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)