Stack webcomponent - DÁP Szolgáltatások

Stack

Stack component is a layout component that stacks its children vertically or horizontally.

Examples

Default stack

Default stack is using vertical direction with a gap of --dds-spacing-600 / 24px between its children.

<dap-ds-stack>
<dap-ds-button>Button 1</dap-ds-button>
<dap-ds-button>Button 2</dap-ds-button>
<dap-ds-button>Button 3</dap-ds-button>
</dap-ds-stack>

Horizontal stack

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.

<dap-ds-stack direction="row">
<dap-ds-button>Button 1</dap-ds-button>
<dap-ds-button>Button 2</dap-ds-button>
<dap-ds-button>Button 3</dap-ds-button>
</dap-ds-stack>

Custom spacing

You can set the spacing to a custom value to adjust the space between the children. Any dds-spacing- variable number can be used.

<dap-ds-stack direction="row" spacing="600">
<dap-ds-button>Button 1</dap-ds-button>
<dap-ds-button>Button 2</dap-ds-button>
<dap-ds-button>Button 3</dap-ds-button>
</dap-ds-stack>

Importing

import { DapDSStack } from 'dap-design-system/dist/dds'

Importing React

import { DapDSStackReact } from 'dap-design-system/dist/react'

Attributes

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)

Slots

Name	Description
`(default)`	The content of the stack.

Events

No custom events available.

CSS Parts

Part Name	Description
`stack`	The main stack container.

CSS Custom Properties

No CSS custom properties available.