Interlock
PrimitivesTextBoxButtonFlexLinkModalData inputInputData vizList
List Interlock list component
This component inherits all params of the Box component

List props

🔗 items ▪️ listItemBoxProps ▪️ variant

List inherited props Box

🔗 padding ▪️ margin ▪️ css className
Props 
interface ListItemProps {
  /**
   * @param key identifies a particular list item
   */
  key: string | number;
  /**
   * @param children content that is rendered fo an item
   */
  children: string | React.ReactNode | React.ReactNode[];
}

interface ListProps extends BoxProps {
  /**
   * @param items Items to display in the list
   */
  items?: ListItemProps[];
  /**
   * @param listItemBoxProps Boxprops that will be applied to each list items container.
   */
  listItemBoxProps?: BoxProps;
  /**
   * @param variant specifies design vaiant
   */
  variant?: "markers" | "borders" | "noformat";
}
items
const items = [{ key: 'test_item1', children: <span>Test item 1</span>},
              { key: 'test_item2', children: <span>Test item 2</span>},
              { key: 'test_item1', children: <span>Test item 3</span>}]    

<>
  <List items={items} />
</>
Rendered output
  • Test item 1
  • Test item 2
  • Test item 3
listItemBoxProps
<>
  <List items={items} listItemBoxProps={{ margin: 'small' }} />
</>
Rendered output
  • Example of
  • customizing list item
  • props
variant
 <>
   <List items={items} variant="markers" />
   <List items={items} variant="borders" />
   <List items={items} variant="noformat" />
 </>
Rendered output
  • Test item 1
  • Test item 2
  • Test item 3
  • Test item 1
  • Test item 2
  • Test item 3
  • Test item 1
  • Test item 2
  • Test item 3
Github