Stack

The Stack component allows you to create flexible containers for arranging child elements in a stack. You can customize the stack's direction, alignment, and spacing.

Examples

Basic Usage

<Widget
	src='flashui.near/widget/Stack'
	props={{
		direction: 'row',
		spacing: '4rem', // The distance between elements is 4rem
		background: '#789ADD',
		children: (
			<>
				<div>Item 1</div>
				<div>Item 2</div>
				<div>Item 3</div>
			</>
		),
	}}
/>

Props

The Stack component accepts the following props:

direction (string, optional): The direction of the stack. Can be "row" (default) or "column."
wrap (string, optional): The wrap behavior of the stack. Can be "wrap" (default) or "nowrap."
justifyContent (string, optional): The horizontal alignment of child elements within the stack. Defaults to null.
alignItems (string, optional): The vertical alignment of child elements within the stack. Defaults to null.
alignContent (string, optional): The alignment of the stack within its container. Defaults to null.
spacing (string, optional): The spacing between child elements in the stack. Defaults to null.
width (string, optional): The width of the stack. Defaults to "100%."
background (string, optional): The background color of the stack. Defaults to null.
children (ReactNode, optional): The child elements to be displayed in the stack. Defaults to null.

Loading Accordion