This component for displaying a list of items which can be navigated and selected with keyboard or mouse.
<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") ]}/>
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}/></>
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} /></>
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} /></>
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} /></>
<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") ]/>
<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 is a design system and component library for building websites, web and desktop applications.