Components Tabs

Tabs

Tabs are used to quickly navigate between views within the same context.
Basic tabs
heex
          <.tabs>
  <.tab is_active to="/">Home</.tab>
  <.tab link_type="a" to="/" label="About" />
</.tabs>

        
Tabs with underline
heex
          <.tabs>
  <.tab underline is_active to="/">Home</.tab>
  <.tab underline link_type="a" to="/" label="About" />
</.tabs>

        
Basic tabs with number
heex
          <.tabs>
  <.tab number={1} is_active to="/">Home</.tab>
  <.tab number={63} link_type="a" to="/" label="About" />
</.tabs>

        
Tabs underlined with number
heex
          <.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
heex
          <.tabs>
  <.tab is_active to="/">
    <.icon name="hero-home-solid" class="w-5 h-5 mr-2" /> Home
  </.tab>
  <.tab link_type="a" to="/">
    <.icon name="hero-building-office-solid" class="w-5 h-5 mr-2" /> Company
  </.tab>
</.tabs>

        
Tabs underlined with outline icons
heex
          <.tabs underline>
  <.tab underline is_active to="/">
    <.icon name="hero-home" class="w-5 h-5 mr-2" /> Home
  </.tab>
  <.tab underline link_type="a" to="/">
    <.icon name="hero-building-office" class="w-5 h-5 mr-2" /> Company
  </.tab>
</.tabs>

        
Properties
elixir
          # <.tabs>
attr(:underline, :boolean, default: false, doc: "underlines your tabs")
attr(:class, :string, default: "", doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)


# <.tab>
attr(:class, :string, default: "", doc: "CSS class")
attr(:label, :string, default: nil, doc: "labels your tab")

attr(:link_type, :string,
  default: "a",
  values: ["a", "live_patch", "live_redirect"]
)

attr(:to, :string, default: nil, doc: "link path")
attr(:number, :integer, default: nil, doc: "indicates a number next to your tab")
attr(:underline, :boolean, default: false, doc: "underlines your your tab")
attr(:is_active, :boolean, default: false, doc: "indicates the current tab")
attr(:rest, :global, include: ~w(method download hreflang ping referrerpolicy rel target type))
slot(:inner_block, required: false)