Components
List

List

The List component allows you to create lists with customizable properties such as direction, list style, spacing, width, height, background, and alignment.

Examples

Basic Usage

<Widget
	src='flashui.near/widget/List'
	props={{
		children: (
			<>
				<Widget
					src='flashui.near/widget/ListItems'
					props={{ children: <span>Item 1</span> }}
				/>
				<Widget
					src='flashui.near/widget/ListItems'
					props={{ children: <span>Item 2</span> }}
				/>
				<Widget
					src='flashui.near/widget/ListItems'
					props={{ children: <span>Item 3</span> }}
				/>
			</>
		),
	}}
/>

Props

The List component accepts the following props:

  • children (ReactNode, optional): The list items or content to be displayed inside the list.

  • direction (string, optional): The direction of the list (e.g., "flex"). Defaults to "flex."

  • listStyle (string, optional): The list style of the list (e.g., "none"). Defaults to "none."

  • spacing (string, optional): The spacing between list items.

  • width (string, optional): The width of the list. Defaults to "auto."

  • height (string, optional): The height of the list. Defaults to "auto."

  • background (string, optional): The background color or image of the list.

  • alignItems (string, optional): The vertical alignment of list items within the list. Defaults to "start."

  • justifyContent (string, optional): The horizontal alignment of list items within the list. Defaults to "flex-start."

CardTable