Ui.InteractiveList.Item

A component to display a Ui.ListItem for the interactive list.

Interactive Demo

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

Some content...
Size (16px)
Intended
Selected
<Ui.InteractiveList.Item
onClick={(event : Html.Event) { Ui.Notifications.notifyDefault(<>"Clicked"</>) }}
size={Ui.Size.Px(16)}
intended={false}
selected={false}>
"Some content..."
</Ui.InteractiveList.Item>
Size

The size of the component can be set with the size property.

Some content...
Some content...
Some content...
<>
<Ui.InteractiveList.Item size={Ui.Size.Px(12)} intended={true}>
"Some content..."
</Ui.InteractiveList.Item>
<Ui.InteractiveList.Item size={Ui.Size.Px(16)} intended={true}>
"Some content..."
</Ui.InteractiveList.Item>
<Ui.InteractiveList.Item size={Ui.Size.Px(20)} intended={true}>
"Some content..."
</Ui.InteractiveList.Item>
</>
Intended

The component can marked as intended to be selected using the intended property.

Some content...
Some content...
<>
<Ui.InteractiveList.Item intended={true}>"Some content..."</Ui.InteractiveList.Item>
<Ui.InteractiveList.Item intended={false}>"Some content..."</Ui.InteractiveList.Item>
</>
Selected

The component can marked as selected using the selected property.

Some content...
Some content...
<>
<Ui.InteractiveList.Item selected={true}>"Some content..."</Ui.InteractiveList.Item>
<Ui.InteractiveList.Item selected={false}>"Some content..."</Ui.InteractiveList.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.