Components
Tabs
Tabs
Pagination is the method of splitting up content into discrete pages. It specifies the total number of pages and inidicates to a user the current page within the context of total pages.
Basic tabs
<.tabs>
<.tab is_active to="/">Home</.tab>
<.tab link_type="a" to="/" label="About" />
</.tabs>
Tabs with underline
<.tabs>
<.tab underline is_active to="/">Home</.tab>
<.tab underline link_type="a" to="/" label="About" />
</.tabs>
Basic tabs with number
<.tabs>
<.tab number={1} is_active to="/">Home</.tab>
<.tab number={63} link_type="a" to="/" label="About" />
</.tabs>
Tabs underlined with number
<.tabs underline>
<.tab underline number={1} is_active to="/">Home</.tab>
<.tab number={63} underline link_type="a" to="/" label="About" />
</.tabs>
Basic tabs with icons
<.tabs>
<.tab is_active to="/">
<HeroiconsV1.Solid.home class="w-5 h-5 mr-2" />
Home
</.tab>
<.tab link_type="a" to="/">
<HeroiconsV1.Solid.office_building class="w-5 h-5 mr-2" />
Company
</.tab>
</.tabs>
Tabs underlined with outline icons
<.tabs underline>
<.tab underline is_active to="/">
<HeroiconsV1.Outline.home class="w-5 h-5 mr-2" />
Home
</.tab>
<.tab underline link_type="a" to="/">
<HeroiconsV1.Outline.office_building class="w-5 h-5 mr-2" />
Company
</.tab>
</.tabs>
Properties
Defaults are indicated in bold.
.tabs
Name | Type | Options |
---|---|---|
underline | :boolean | `true`, false |
inner_block | :slot | - |
class | :string | - |
.tab
Name | Type | Options |
---|---|---|
label | :string | - |
link_type | :string |
a
, `live_patch`, `live_redirect`, `button`
|
number | :integer | - |
underline | :boolean | `true`, false |
is_active | :boolean | `true`, false |
inner_block | :slot | - |
class | :string | - |
[all additional properties] |
Will be forwarded to all
tab
HTML elements.
|