Tabs

Camadas de conteúdo — painéis de abas — exibidas uma por vez.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI:

shadwire add tabs --yes

O item tabs do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/tabs_component.rb
app/components/ui/tabs/list_component.rb
app/components/ui/tabs/trigger_component.rb
app/components/ui/tabs/content_component.rb
app/helpers/ui/tabs_helper.rb
app/javascript/controllers/ui_tabs_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus: a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

O controller Stimulus implementa o padrão WAI-ARIA de tabs: roving tabindex, ativação automática com ←/→, Home/End, e o wiring de aria-controls/aria-labelledby.

<%= ui_tabs(default_value: :account) do %>
  <%= ui_tabs_list do %>
    <%= ui_tabs_trigger(value: :account) { "Conta" } %>
    <%= ui_tabs_trigger(value: :password) { "Senha" } %>
  <% end %>
  <%= ui_tabs_content(value: :account) { "Painel da conta" } %>
  <%= ui_tabs_content(value: :password) { "Painel de senha" } %>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::TabsComponent.new(default_value: :account) do %>
  <%= render Ui::Tabs::ListComponent.new do %>
    <%= render Ui::Tabs::TriggerComponent.new(value: :account) do %>
      Conta
    <% end %>
  <% end %>
  <%= render Ui::Tabs::ContentComponent.new(value: :account) do %>
    Painel da conta

<%= render Ui::TabsComponent.new(default_value: :account) do %>
  <%= render Ui::Tabs::ListComponent.new do %>
    <%= render Ui::Tabs::TriggerComponent.new(value: :account) do %>
      Conta
    <% end %>
  <% end %>
  <%= render Ui::Tabs::ContentComponent.new(value: :account) do %>
    Painel da conta
  <% end %>
<% end %>

Composição

Tabs (data-controller="ui-tabs")
|-- Tabs::List (role="tablist")
|   `-- Tabs::Trigger (role="tab", um por painel)
`-- Tabs::Content (role="tabpanel", um por value)

Exemplos

Padrão

Dois painéis com cards; o painel ativo é controlado pelo controller ui-tabs.

<%= ui_tabs(default_value: :account, class: "w-full max-w-sm") do %>
  <%= ui_tabs_list(class: "w-full") do %>
    <%= ui_tabs_trigger(value: :account) { "Conta" } %>
    <%= ui_tabs_trigger(value: :password) { "Senha" } %>
  <% end %>
  <%= ui_tabs_content(value: :account) do %>
    <%= ui_card do %>
      <%= ui_card_header do %>

<%= ui_tabs(default_value: :account, class: "w-full max-w-sm") do %>
  <%= ui_tabs_list(class: "w-full") do %>
    <%= ui_tabs_trigger(value: :account) { "Conta" } %>
    <%= ui_tabs_trigger(value: :password) { "Senha" } %>
  <% end %>
  <%= ui_tabs_content(value: :account) do %>
    <%= ui_card do %>
      <%= ui_card_header do %>
        <%= ui_card_title { "Conta" } %>
        <%= ui_card_description { "Altere seus dados de perfil aqui." } %>
      <% end %>
      <%= ui_card_content(class: "grid gap-4") do %>
        <div class="grid gap-2">
          <%= ui_label(for: "tabs-demo-name") { "Nome" } %>
          <%= ui_input(id: "tabs-demo-name", value: "Eduardo de Moraes") %>
        </div>
      <% end %>
      <%= ui_card_footer do %>
        <%= ui_button { "Salvar alterações" } %>
      <% end %>
    <% end %>
  <% end %>
  <%= ui_tabs_content(value: :password) do %>
    <%= ui_card do %>
      <%= ui_card_header do %>
        <%= ui_card_title { "Senha" } %>
        <%= ui_card_description { "Troque sua senha de acesso aqui." } %>
      <% end %>
      <%= ui_card_content(class: "grid gap-4") do %>
        <div class="grid gap-2">
          <%= ui_label(for: "tabs-demo-password") { "Nova senha" } %>
          <%= ui_input(id: "tabs-demo-password", type: :password) %>
        </div>
      <% end %>
      <%= ui_card_footer do %>
        <%= ui_button { "Salvar senha" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Trigger desabilitado

disabled: true tira o trigger do fluxo de teclado e da ativação.

<%= ui_tabs(default_value: :overview, class: "w-full max-w-sm") do %>
  <%= ui_tabs_list(class: "w-full") do %>
    <%= ui_tabs_trigger(value: :overview) { "Visão geral" } %>
    <%= ui_tabs_trigger(value: :analytics, disabled: true) { "Analytics" } %>
  <% end %>
  <%= ui_tabs_content(value: :overview, class: "rounded-md border p-4 text-sm") do %>
    Triggers desabilitados ficam fora da navegação por teclado.
  <% end %>

<%= ui_tabs(default_value: :overview, class: "w-full max-w-sm") do %>
  <%= ui_tabs_list(class: "w-full") do %>
    <%= ui_tabs_trigger(value: :overview) { "Visão geral" } %>
    <%= ui_tabs_trigger(value: :analytics, disabled: true) { "Analytics" } %>
  <% end %>
  <%= ui_tabs_content(value: :overview, class: "rounded-md border p-4 text-sm") do %>
    Triggers desabilitados ficam fora da navegação por teclado.
  <% end %>
  <%= ui_tabs_content(value: :analytics, class: "rounded-md border p-4 text-sm") do %>
    Indisponível.
  <% end %>
<% end %>

Referência da API

Todas as partes aceitam class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Tabs`	`default_value`	`nil`	Aba aberta inicialmente; sem valor, a primeira habilitada é ativada.
`Tabs::Trigger`	`value:` (obrigatório)	—	Identificador que liga o trigger ao painel de mesmo `value`.
`Tabs::Trigger`	`disabled`	`false`	Remove o trigger da ativação e da navegação por teclado.
`Tabs::Content`	`value:` (obrigatório)	—	Painel correspondente; renderiza `hidden` até ser ativado.