Ui.Tabs

A component for displaying content in different tabs.

Demo

You can see a demo of a Ui.Tabs below.

First Content
Active
First Tab
Size (16px)
Breakpoint (400px)
<Ui.Tabs
size={Ui.Size.Px(16)}
active="first_tab"
breakpoint={400}
items=[
{
iconBefore: Ui.Icons.ALERT,
iconAfter: <></>,
content: <>"First Content"</>,
label: "First Tab",
key: "first_tab"
},
{
iconBefore: Ui.Icons.ARCHIVE,
iconAfter: <></>,
content: <>"Second Content"</>,
label: "Second Tab",
key: "second_tab"
},
{
iconBefore: Ui.Icons.BEAKER,
iconAfter: <></>,
content: <>"Third Content"</>,
label: "Third Tab",
key: "third_tab"
}
]/>
Active

The active tab can be set with the active property.

Tab 1
Tab 2
let items =
[
{
content: <>"Tab 1"</>,
iconBefore: <></>,
iconAfter: <></>,
label: "Tab 1",
key: "tab_1"
},
{
content: <>"Tab 2"</>,
iconBefore: <></>,
iconAfter: <></>,
label: "Tab 2",
key: "tab_2"
}
]
<>
<Ui.Tabs breakpoint={0} active="tab_1" items={items}/>
<Ui.Tabs breakpoint={0} active="tab_2" items={items}/>
</>
Size

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

Tab 1
Tab 1
Tab 1
let items =
[
{
content: <>"Tab 1"</>,
iconBefore: <></>,
iconAfter: <></>,
label: "Tab 1",
key: "tab_1"
},
{
content: <>"Tab 2"</>,
iconBefore: <></>,
iconAfter: <></>,
label: "Tab 2",
key: "tab_2"
}
]
<>
<Ui.Tabs size={Ui.Size.Px(12)} breakpoint={0} active="tab_1" items={items}/>
<Ui.Tabs size={Ui.Size.Px(16)} breakpoint={0} active="tab_1" items={items}/>
<Ui.Tabs size={Ui.Size.Px(20)} breakpoint={0} active="tab_1" items={items}/>
</>
Breakpoint

The breakpoint which determines to show a button that opens a Ui.ActionSheet (to select the tab) instead can be set using the breakpoint property.

Tab 1
Tab 1
let items =
[
{
content: <>"Tab 1"</>,
iconBefore: <></>,
iconAfter: <></>,
label: "Tab 1",
key: "tab_1"
},
{
content: <>"Tab 2"</>,
iconBefore: <></>,
iconAfter: <></>,
label: "Tab 2",
key: "tab_2"
}
]
<>
<Ui.Tabs breakpoint={0} active="tab_1" items={items}/>
<Ui.Tabs breakpoint={1000} active="tab_1" items={items}/>
</>
Change Event

The component calls the onChange handler (property) when a user selects an other tab.

Tab 1
<Ui.Tabs
breakpoint={0}
active="tab_1"
onChange={
(tab : String) { Ui.Notifications.notifyDefault(<>"Selected: #{tab}"</>) }
}
items=[
{
content: <>"Tab 1"</>,
iconBefore: <></>,
iconAfter: <></>,
label: "Tab 1",
key: "tab_1"
},
{
content: <>"Tab 2"</>,
iconBefore: <></>,
iconAfter: <></>,
label: "Tab 2",
key: "tab_2"
}
]
/>
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.