Accordion — Shadwire

Instalação

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

shadwire add accordion --yes

O item accordion do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/accordion_component.rb
app/components/ui/accordion/item_component.rb
app/components/ui/accordion/header_component.rb
app/components/ui/accordion/trigger_component.rb
app/components/ui/accordion/content_component.rb
app/components/ui/accordion/panel_component.rb
app/components/ui/icon_component.rb
app/helpers/ui/accordion_helper.rb
app/helpers/ui/icon_helper.rb
app/javascript/controllers/ui_accordion_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus, então 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

Use a composição Root > Item > Header > Trigger + Content. O helper ui_accordion aceita os mesmos argumentos de Ui::AccordionComponent.

<%= ui_accordion(default_value: :item_1) do %>
  <%= ui_accordion_item(value: :item_1) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Is it accessible?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Yes. It follows the WAI-ARIA pattern for accordions.
    <% end %>

<%= ui_accordion(default_value: :item_1) do %>
  <%= ui_accordion_item(value: :item_1) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Is it accessible?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Yes. It follows the WAI-ARIA pattern for accordions.
    <% end %>
  <% end %>
<% end %>

Também é possível renderizar as classes ViewComponent diretamente:

<%= render Ui::AccordionComponent.new(default_value: :item_1) do %>
  <%= render Ui::Accordion::ItemComponent.new(value: :item_1) do %>
    <%= render Ui::Accordion::HeaderComponent.new do %>
      <%= render Ui::Accordion::TriggerComponent.new do %>
        Is it accessible?
      <% end %>
    <% end %>
    <%= render Ui::Accordion::ContentComponent.new do %>

<%= render Ui::AccordionComponent.new(default_value: :item_1) do %>
  <%= render Ui::Accordion::ItemComponent.new(value: :item_1) do %>
    <%= render Ui::Accordion::HeaderComponent.new do %>
      <%= render Ui::Accordion::TriggerComponent.new do %>
        Is it accessible?
      <% end %>
    <% end %>
    <%= render Ui::Accordion::ContentComponent.new do %>
      Yes. It follows the WAI-ARIA pattern for accordions.
    <% end %>
  <% end %>
<% end %>

Composição

A anatomia segue a referência Base UI usada pelo shadcn: item, cabeçalho, trigger e painel de conteúdo. ui_accordion_panel é outro nome para ui_accordion_content.

<%= ui_accordion do %>
  <%= ui_accordion_item do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Title" } %>
    <% end %>
    <%= ui_accordion_content { "Content" } %>
  <% end %>
<% end %>

Exemplos

Básico

Um accordion simples que exibe um item por vez. O primeiro item começa aberto.

<%= ui_accordion(default_value: :password, class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :password) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Como redefino minha senha?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Clique em "Esqueci minha senha" na tela de entrada, informe seu e-mail e enviaremos um link válido por 24 horas.
    <% end %>

<%= ui_accordion(default_value: :password, class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :password) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Como redefino minha senha?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Clique em "Esqueci minha senha" na tela de entrada, informe seu e-mail e enviaremos um link válido por 24 horas.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :plan) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Posso trocar de plano?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Sim. Você pode alternar entre os planos mensal e anual quando quiser, nas configurações de cobrança.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :payment) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Quais formas de pagamento vocês aceitam?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Aceitamos cartão de crédito, cartão de débito e faturamento por boleto para contas empresariais.
    <% end %>
  <% end %>
<% end %>

Vários abertos

Use multiple: true para permitir que vários itens fiquem abertos ao mesmo tempo.

<%= ui_accordion(multiple: true, default_value: [ :notifications, :privacy ], class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :notifications) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Configurações de notificação" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Gerencie alertas por e-mail, notificações push e resumos semanais para acompanhar o que importa.
    <% end %>

<%= ui_accordion(multiple: true, default_value: [ :notifications, :privacy ], class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :notifications) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Configurações de notificação" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Gerencie alertas por e-mail, notificações push e resumos semanais para acompanhar o que importa.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :privacy) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Privacidade e segurança" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Configure a autenticação em duas etapas, revise as sessões ativas e controle o acesso aos seus dados.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :billing) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Cobrança e assinatura" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Consulte faturas, formas de pagamento e o ciclo atual da sua assinatura.
    <% end %>
  <% end %>
<% end %>

Desabilitado

Use disabled: true no item para bloquear um painel específico.

<%= ui_accordion(default_value: :history, class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :history) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Consigo acessar meu histórico?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Sim. O histórico fica na área da conta, nos planos ativos.
    <% end %>

<%= ui_accordion(default_value: :history, class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :history) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Consigo acessar meu histórico?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Sim. O histórico fica na área da conta, nos planos ativos.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :premium, disabled: true) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger(disabled: true) { "Detalhes do recurso premium" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Este conteúdo fica indisponível até você fazer o upgrade do plano.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :email) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Como atualizo meu e-mail?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Abra seu perfil, troque o endereço e confirme o link enviado para o novo e-mail.
    <% end %>
  <% end %>
<% end %>

Com borda

Adicione a classe border no accordion para contornar o grupo.

<%= ui_accordion(default_value: :billing, class_name: "w-full max-w-md rounded-md border px-4") do %>
  <%= ui_accordion_item(value: :billing) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Como funciona a cobrança?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      A cobrança acontece no início de cada ciclo, mensal ou anual, e você pode cancelar quando quiser.
    <% end %>

<%= ui_accordion(default_value: :billing, class_name: "w-full max-w-md rounded-md border px-4") do %>
  <%= ui_accordion_item(value: :billing) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Como funciona a cobrança?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      A cobrança acontece no início de cada ciclo, mensal ou anual, e você pode cancelar quando quiser.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :security) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Meus dados estão seguros?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Os dados são criptografados em trânsito e guardados atrás de controles de acesso por papel.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :integrations) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Quais integrações são suportadas?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Webhooks, importação por CSV e integrações com ferramentas de suporte e de cobrança.
    <% end %>
  <% end %>
<% end %>

Card

Coloque o Accordion dentro de um Card quando ele fizer parte de uma área maior.

Assinatura e cobrança

Dúvidas comuns sobre planos, pagamentos e cancelamentos.

<%= ui_card(class_name: "w-full max-w-md") do %>
  <%= ui_card_header do %>
    <%= ui_card_title { "Assinatura e cobrança" } %>
    <%= ui_card_description { "Dúvidas comuns sobre planos, pagamentos e cancelamentos." } %>
  <% end %>
  <%= ui_card_content do %>
    <%= ui_accordion(default_value: :plans) do %>
      <%= ui_accordion_item(value: :plans) do %>

<%= ui_card(class_name: "w-full max-w-md") do %>
  <%= ui_card_header do %>
    <%= ui_card_title { "Assinatura e cobrança" } %>
    <%= ui_card_description { "Dúvidas comuns sobre planos, pagamentos e cancelamentos." } %>
  <% end %>
  <%= ui_card_content do %>
    <%= ui_accordion(default_value: :plans) do %>
      <%= ui_accordion_item(value: :plans) do %>
        <%= ui_accordion_header do %>
          <%= ui_accordion_trigger { "Quais planos existem?" } %>
        <% end %>
        <%= ui_accordion_content do %>
          Starter, Professional e Enterprise, com limites e recursos progressivamente maiores.
        <% end %>
      <% end %>
      <%= ui_accordion_item(value: :billing) do %>
        <%= ui_accordion_header do %>
          <%= ui_accordion_trigger { "Como sou cobrado?" } %>
        <% end %>
        <%= ui_accordion_content do %>
          A cobrança é recorrente e segue o ciclo que você escolheu ao se cadastrar.
        <% end %>
      <% end %>
      <%= ui_accordion_item(value: :cancel) do %>
        <%= ui_accordion_header do %>
          <%= ui_accordion_trigger { "Como cancelo minha assinatura?" } %>
        <% end %>
        <%= ui_accordion_content do %>
          O cancelamento fica nas configurações de cobrança, e o acesso continua até o fim do ciclo.
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Referência da API

Os helpers encapsulam os componentes ViewComponent e repassam qualquer atributo HTML, incluindo data: e aria:.

Helper	Argumentos principais	Descrição
`ui_accordion`	`multiple`, `default_value`, `orientation`, `disabled`, `loop_focus`	A raiz, com o controller Stimulus, os valores iniciais e a navegação por teclado.
`ui_accordion_item`	`value`, `disabled`	O item, com `border-b last:border-b-0`. Passe `value` sempre que usar `default_value`.
`ui_accordion_header`	`tag`	Renderiza o cabeçalho semântico; o padrão é `:h3`.
`ui_accordion_trigger`	`disabled`	O botão que abre e fecha o item, com o ícone `chevron-down` e as ações Stimulus.
`ui_accordion_content` / `ui_accordion_panel`	`class` / `class_name`	O painel, com `role="region"`, as animações do shadcn e um wrapper interno `pt-0 pb-4`.