Tabs

Here are some examples showcasing tabs.

Basic Tabs

Tabs are transparent by default and don't automatically do anything since they are simple <a> (anchor) elements. You can set the href attribute to make them link to another page.

Preview

I Do Nothing Ditto Open Google

Code

= daisy_tabs(css: "tabs-bordered") do |tabs|
  - tabs.with_tab(title: "I Do Nothing", active: true)
  - tabs.with_tab(title: "Ditto", html: { onclick: "alert('Ha! Gotcha ;-)')" })
  - tabs.with_tab(title: "Open Google", href: "https://google.com", target: "_blank")

Radio Button Tabs with Content

If you want the tabs to change their content, you can use the radio option. Note that this does not allow the use of icons or other HTML elements in the title.

Preview

Tab 1 content

Tab 2 content

Tab 3 content

Code

= daisy_tabs(css: "tabs-lifted w-[500px]", radio: true) do |tabs|
  - # Add some space before the first tab
  - tabs.with_tab(title: "", css: "!w-14 !cursor-auto", disabled: true)

  - (1..3).each do |i|
    - tabs.with_tab(title: "Tab #{i}", content_wrapper_css: "bg-base-100 border-base-300 rounded-box p-6", checked: i == 1) do
      %p Tab #{i} content

Turbo Frame Tabs

You can also use tabs with Turbo Frames to load content dynamically.

2 bars content...

3 bars content...

4 bars content...

%turbo-frame#tabs--turob-tabs-example
  = daisy_tabs(css: "tabs-lifted w-[500px]") do |tabs|
    - (2..4).each do |i|
      - is_checked = params[:custom_tab] ? params[:custom_tab] == i.to_s : i == 3
      - tabs.with_tab(href: "?custom_tab=#{i}", checked: is_checked) do |tab|
        - tab.with_title(css: "test-tab") do
          .flex.gap-x-2.items-center
            %span.w-4.h-4
              = heroicon_tag("bars-#{i}")
            %span.whitespace-nowrap #{i} Bars

        - tab.with_custom_content(css: "tab-content bg-base-100 border-base-300 rounded-box p-6") do
          %p #{i} bars content...

Made with by Profoundry .