Ui.InteractiveList

This component for displaying a list of items which can be navigated and selected with keyboard or mouse.

Interactive Demo

You can play around with a Ui.InteractiveList below using the controls.

Item 1
Item 2
Item 4
Item 3
Selected
Item 1
Size (16px)
Intendable
Interactive
<Ui.InteractiveList
selected={Set.fromArray(["item-1"])}
size={Ui.Size.Px(16)}
interactive={true}
intendable={true}
items={[
Ui.ListItem.Item(content: <>"Item 1"</>, matchString: "item-1", key: "item-1"),
Ui.ListItem.Item(content: <>"Item 2"</>, matchString: "item-2", key: "item-2"),
Ui.ListItem.Divider,
Ui.ListItem.Item(content: <>"Item 4"</>, matchString: "item-4", key: "item-4"),
Ui.ListItem.Item(content: <>"Item 3"</>, matchString: "item-3", key: "item-3")
]}/>
Intendable

If the intendable property is true then items will not be selected when navigating with keys, but only intended (shown with a chevron). Intended items can be selected using the enter or spacing keys.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
let items =
[
Ui.ListItem.Item(content: <>"Item 1"</>, matchString: "item-1", key: "item-1"),
Ui.ListItem.Item(content: <>"Item 2"</>, matchString: "item-2", key: "item-2"),
Ui.ListItem.Item(content: <>"Item 3"</>, matchString: "item-3", key: "item-3")
]
<>
<Ui.InteractiveList interactive={true} intendable={true} items={items}/>
<Ui.InteractiveList interactive={true} intendable={false} items={items}/>
</>
Interactive

The interactive property controls whether or not the component can be intacted with a keyboard. If it's false then the component is not focusable.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
let items =
[
Ui.ListItem.Item(content: <>"Item 1"</>, matchString: "item-1", key: "item-1"),
Ui.ListItem.Item(content: <>"Item 2"</>, matchString: "item-2", key: "item-2"),
Ui.ListItem.Item(content: <>"Item 3"</>, matchString: "item-3", key: "item-3")
]
<>
<Ui.InteractiveList
selected={Set.fromArray(["item-1"])}
interactive={true}
intendable={true}
items={items}
/>
<Ui.InteractiveList
selected={Set.fromArray(["item-1"])}
interactive={false}
intendable={true}
items={items}
/>
</>
Selected

The selected property controls which items are selected. It's a Set(String) where the values match the items keys.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
let items =
[
Ui.ListItem.Item(content: <>"Item 1"</>, matchString: "item-1", key: "item-1"),
Ui.ListItem.Item(content: <>"Item 2"</>, matchString: "item-2", key: "item-2"),
Ui.ListItem.Item(content: <>"Item 3"</>, matchString: "item-3", key: "item-3")
]
<>
<Ui.InteractiveList
selected={Set.fromArray(["item-1"])}
interactive={false}
items={items}
/>
<Ui.InteractiveList
selected={Set.fromArray(["item-1", "item-3"])}
interactive={false}
items={items}
/>
</>
Size

The size property controls the size of the component.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
let items =
[
Ui.ListItem.Item(content: <>"Item 1"</>, matchString: "item-1", key: "item-1"),
Ui.ListItem.Item(content: <>"Item 2"</>, matchString: "item-2", key: "item-2"),
Ui.ListItem.Item(content: <>"Item 3"</>, matchString: "item-3", key: "item-3")
]
<>
<Ui.InteractiveList
selected={Set.fromArray(["item-1"])}
size={Ui.Size.Px(12)}
interactive={false}
items={items}
/>
<Ui.InteractiveList
selected={Set.fromArray(["item-1"])}
size={Ui.Size.Px(16)}
interactive={false}
items={items}
/>
<Ui.InteractiveList
selected={Set.fromArray(["item-1"])}
size={Ui.Size.Px(20)}
interactive={false}
items={items}
/>
</>
Select Event

The onSelect property is called when the selection changes using the keyboard.

Item 1
Item 2
Item 3
<Ui.InteractiveList
onSelect={
(selected : String) {
Ui.Notifications.notifyDefault(<>"Selected: #{selected}"</>)
}
}
items=[
Ui.ListItem.Item(content: <>"Item 1"</>, matchString: "item-1", key: "item-1"),
Ui.ListItem.Item(content: <>"Item 2"</>, matchString: "item-2", key: "item-2"),
Ui.ListItem.Item(content: <>"Item 3"</>, matchString: "item-3", key: "item-3")
]
/>
Click Select Event

The onClickSelect property is called when an item is selected by clicking on it.

Item 1
Item 2
Item 3
<Ui.InteractiveList
onClickSelect={
(selected : String) {
Ui.Notifications.notifyDefault(<>"Selected: #{selected}"</>)
}
}
items=[
Ui.ListItem.Item(content: <>"Item 1"</>, matchString: "item-1", key: "item-1"),
Ui.ListItem.Item(content: <>"Item 2"</>, matchString: "item-2", key: "item-2"),
Ui.ListItem.Item(content: <>"Item 3"</>, matchString: "item-3", key: "item-3")
]
/>
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.