A component for displaying content in different tabs.
<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" } ]/>
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}/></>
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}/></>
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.
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}/></>
<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 is a design system and component library for building websites, web and desktop applications.