Fluxbit ViewComponents

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="">
  <ul class="flex text-center flex-wrap text-sm font-medium text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400" role="tablist" data-tabs-toggle="#tab-ojzrtwasupipebcthlropbjenndaqh-content" data-tabs-active-classes="text-blue-600 bg-gray-100 active dark:bg-gray-800 dark:text-blue-500" data-tabs-inactive-classes="hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300" id="tab-ojzrtwasupipebcthlropbjenndaqh">
    <li role="presentation" id="tab-ojzrtwasupipebcthlropbjenndaqh-0-li" class=""><a class="inline-flex w-full inline-block p-4 rounded-t-lg text-blue-600 bg-gray-100 active dark:bg-gray-800 dark:text-blue-500" role="tab" aria-selected="" aria-controls="tab-ojzrtwasupipebcthlropbjenndaqh-tabpanel-0" id="tab-ojzrtwasupipebcthlropbjenndaqh-0" type="button" data-tabs-target="#tab-ojzrtwasupipebcthlropbjenndaqh-tabpanel-0" href="#"><svg class="mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
          <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd"></path>
        </svg>
        <span>Profile</span></a></li>
    <li role="presentation" id="tab-ojzrtwasupipebcthlropbjenndaqh-1-li" class=""><a class="inline-flex w-full inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300" role="tab" aria-selected="" aria-controls="tab-ojzrtwasupipebcthlropbjenndaqh-tabpanel-1" id="tab-ojzrtwasupipebcthlropbjenndaqh-1" type="button" data-tabs-target="#tab-ojzrtwasupipebcthlropbjenndaqh-tabpanel-1" href="#"><svg class="mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
          <path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z"></path>
        </svg>
        <span>Settings</span></a></li>
    <li role="presentation" id="tab-ojzrtwasupipebcthlropbjenndaqh-2-li" class=""><a disabled="disabled" class="inline-flex w-full inline-block p-4 rounded-t-lg text-gray-400 cursor-not-allowed dark:text-gray-500" id="tab-ojzrtwasupipebcthlropbjenndaqh-2" type="button" data-tabs-target="#tab-ojzrtwasupipebcthlropbjenndaqh-tabpanel-2"><svg class="mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
          <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"></path>
        </svg>
        <span>Disabled</span></a></li>
  </ul>
  <div id="#tab-ojzrtwasupipebcthlropbjenndaqh-content" class="">
    <div class="p-4 rounded-b-lg bg-gray-50 dark:bg-gray-800 hidden" id="tab-ojzrtwasupipebcthlropbjenndaqh-tabpanel-0" role="tabpanel" aria-labelledby="tab-ojzrtwasupipebcthlropbjenndaqh-0">Profile details</div>
    <div class="p-4 rounded-b-lg bg-gray-50 dark:bg-gray-800 hidden" id="tab-ojzrtwasupipebcthlropbjenndaqh-tabpanel-1" role="tabpanel" aria-labelledby="tab-ojzrtwasupipebcthlropbjenndaqh-1">Settings details</div>
    <div class="p-4 rounded-b-lg bg-gray-50 dark:bg-gray-800 hidden" id="tab-ojzrtwasupipebcthlropbjenndaqh-tabpanel-2" role="tabpanel" aria-labelledby="tab-ojzrtwasupipebcthlropbjenndaqh-2"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
render Fluxbit::TabComponent.new(
  variant: variant,
  color: color,
  tab_panel: tab_panel,
  vertical: vertical,
) do |tabs|
  tabs.with_tab title: "Profile", active: true, icon: anyicon(icon: "heroicons_solid:user") do |content|
    'Profile details'
  end
  tabs.with_tab title: "Settings", icon: anyicon(icon: "heroicons_solid:pencil") do |content|
    'Settings details'
  end
  tabs.with_tab title: "Disabled", icon: anyicon(icon: "heroicons_solid:exclamation-triangle"), disabled: true
end

Fluxbit::TabComponent

You can use this component to display a message to the user

Param Description Input

variant

Color

Tab Panel

vertical?