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
Home About 
          <.tabs>
  <.tab is_active to="/">Home</.tab>
  <.tab link_type="a" to="/" label="About" />
</.tabs>
Tabs with underline
Home About 
          <.tabs>
  <.tab underline is_active to="/">Home</.tab>
  <.tab underline link_type="a" to="/" label="About" />
</.tabs>
Basic tabs with number
Home 1 About 
          <.tabs>
  <.tab number={1} is_active to="/">Home</.tab>
  <.tab number={63} link_type="a" to="/" label="About" />
</.tabs>
Tabs underlined with number
Home 1 About 
          <.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
Home Company 
          <.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
Home Company 
          <.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.