Tremorx

Tab

Total Sales

KES 442,276

Product Y

KES 108,799

38%

Attribute Type Documentation Default Value
id :string "tabs"
variant :string "line"
color :string
class :string
tab_list_class :string CSS classes styles to apply to the tab list container
tab_panel_class :string CSS classes styles to apply to the tabpanel container
tab_panels_class :string CSS classes styles to apply to the tabpanels container
tab_class :string CSS classes styles to apply to the tab button
rest :global
tab :slot The tab button 
<:tab>
    <.icon name="hero-user-group-solid" />
    <span> Location A </span>
  </:tab>

  <:tab>
    <.icon name="hero-user-solid" />
    <span> Location B </span>
  </:tab>

  <:tabpanel>
    <.flex class="mt-8">
      <.text class="w-full">Product Y</.text>
      <.flex class="space-x-2 justify-end" justify_content="end">
        <.text>KES 108,799</.text>
        <.text>38%</.text>
      </.flex>
    </.flex>

    <.progress_bar value={38} class="mt-2" />
  </:tabpanel>

  <:tabpanel>
    <.flex class="mt-8">
      <.text class="w-full">Product Z</.text>
      <.flex class="space-x-2" justify_content="end">
        <.text>KES 99,484</.text>
        <.text>16%</.text>
      </.flex>
    </.flex>

    <.progress_bar value={12} class="mt-2" />
  </:tabpanel>
tab_content :slot The content after the tab buttons
tabpanel :slot The tab content 
<:tab>
    <.icon name="hero-user-group-solid" />
    <span> Location A </span>
  </:tab>

  <:tab>
    <.icon name="hero-user-solid" />
    <span> Location B </span>
  </:tab>

  <:tabpanel>
    <.flex class="mt-8">
      <.text class="w-full">Product Y</.text>
      <.flex class="space-x-2 justify-end" justify_content="end">
        <.text>KES 108,799</.text>
        <.text>38%</.text>
      </.flex>
    </.flex>

    <.progress_bar value={38} class="mt-2" />
  </:tabpanel>

  <:tabpanel>
    <.flex class="mt-8">
      <.text class="w-full">Product Z</.text>
      <.flex class="space-x-2" justify_content="end">
        <.text>KES 99,484</.text>
        <.text>16%</.text>
      </.flex>
    </.flex>

    <.progress_bar value={12} class="mt-2" />
  </:tabpanel>