Stack component is a layout component that stacks its children vertically or horizontally.
Default stack is using vertical direction with a gap of --dds-spacing-600 / 24px between its children.
You can set the direction to row or row-reverse to stack the children horizontally.
Horizontal stack is using the gap of --dds-spacing-200 / 8px between its children.
You can set the spacing to a custom value to adjust the space between the children. Any dds-spacing- variable number can be used.
You can add margin to the start or end of the stack by setting the startMargin or endMargin to true.
import { DapDSStack } from 'dap-design-system'
import { DapDSStackReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSStack } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
direction | 'column', 'column-reverse' , 'row' , 'row-reverse' | 'column' | The direction of the stack. |
endMargin | boolean, undefined | false | Adds margin to the end of the stack. |
startMargin | boolean, undefined | false | Adds margin to the start of the stack. |
spacing | The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) |
| Name | Description |
|---|---|
(default) | The content of the stack. |
No custom events available.
| Part Name | Description |
|---|---|
stack | The main stack container. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-stack::part(stack) {
/* Your custom styles */
}
Example usage:
<dap-ds-stack class="my-custom-dap-ds-stack">
Stack
</dap-ds-stack>
.my-custom-dap-ds-stack::part(stack) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
No CSS custom properties available.
