List items

In Mint UI the data for a list is defined with the Ui.ListItem enum.

Example

Having a data structure to define list items allows us to display lists in different ways. For example we can display the same list in a Ui.Native.Select and a normal Ui.Select.

Select something!
Select something!
let items =
[
Ui.ListItem.Item(
content: <>"Something"</>,
matchString: "something",
key: "something"),
Ui.ListItem.Item(
content: <>"An other thing"</>,
matchString: "an other thing",
key: "an-other-thing")
]
<>
<Ui.Native.Select placeholder="Select something!" items={items}/>
<Ui.Select placeholder="Select something!" matchWidth={true} items={items}/>
</>
Ui.ListItem
The Ui.ListItem enum is used to describe list items, currently it consists of:
  • Ui.ListItem.Item - an item in the list
  • Ui.ListItem.Divider - a divider between list items.
[
Ui.ListItem.Item(
content: <>"A list item!"</>,
matchString: "a list item",
key: "a-list-item"),
Ui.ListItem.Divider,
Ui.ListItem.Item(
content: <>"An other list item!"</>,
matchString: "an other list item",
key: "an-other-list-item")
]
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.
Something
An other thing