Attributes

• accessibility_label (:string) - Defaults to nil.
• badge (:any) - Defaults to nil.
• id (:any) - Defaults to nil.
• panel_id (:any) - Defaults to nil.
• content (:string) - Defaults to nil.
• image_source (:string) - Defaults to nil.
• disabled (:any) - Defaults to false.
• sibling_tab_has_focus (:boolean) - Defaults to false.
• focused (:any) - Defaults to nil.
• selected (:boolean) - Defaults to false.
• phx_focus (:any) - onFocus. Defaults to nil.
• phx_keydown (:any) - onKeyDown. Defaults to nil.
• phx_click (:any) - onClick. Defaults to nil.
• phx_target (:any) - Allows setting the target for the button. Defaults to nil.

Use to alternate among related views within the same context.

Examples

<.card padding={[xs: "0"]}>
  <.tabs id="customers">
    <:tab
      content="All"
      accessibility_label="All customers"
    >
      <.box padding={[md: "200"]}>All Customers</.box>
    </:tab>
    <:tab content="Accepts marketing">
      <.box padding={[md: "200"]}>Accepts marketing</.box>
    </:tab>
    <:tab
      content="Repeat customers"
      accessibility_label="Repeat customers"
    >
      <.box padding={[md: "200"]}>Repeat customers</.box>
    </:tab>
    <:tab content="Prospects">
      <.box padding={[md: "200"]}>Prospects</.box>
    </:tab>
  </.tabs>
</.card>

See

• https://polaris.shopify.com/components/navigation/tabs
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Tabs/Tabs.tsx

Attributes

• id (:string) (required)
• selected (:integer) - The index of the currently selected Tab. Defaults to 0.
• disabled (:boolean) - Whether the Tabs are disabled or not. Defaults to false.
• bottom_tabs (:boolean) - Should the tabs be below the content?. Defaults to false.
• inline_align (:string) - Horizontal alignment of children. Defaults to nil.
• phx_focus (:any) - onFocus. Defaults to nil.
• phx_blur (:any) - onBlur. Defaults to nil.
• phx_keydown (:any) - onKeyDown. Defaults to nil.
• phx_keyup (:any) - onKeyUp. Defaults to nil.

Slots

• tab - Accepts attributes:
  • accessibility_label (:any)
  • id (:any)
  • panel_id (:any)
  • content (:string)
  • disabled (:any)
  • selected (:integer)
  • phx_focus (:any)
  • phx_keydown (:any)
  • phx_click (:any)
  • phx_target (:any)
• block_stack