Shadwire
Componentes

Accordion

Um conjunto vertical de cabeçalhos interativos que revelam seções de conteúdo.

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 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: 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 { "É acessível?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Sim. Ele segue o padrão WAI-ARIA para accordions.
    <% 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 %>
        É acessível?
      <% end %>
    <% end %>
    <%= render Ui::Accordion::ContentComponent.new do %>

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 é um alias de nome para ui_accordion_content. 

<%= ui_accordion do %>
  <%= ui_accordion_item do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Título" } %>
    <% end %>
    <%= ui_accordion_content { "Conteúdo" } %>
  <% end %>
<% end %>

Exemplos

Basic

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 faço para redefinir minha senha?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Clique em "Esqueci minha senha" na tela de login, informe seu e-mail e enviaremos um link válido por 24 horas.
    <% end %>

Multiple

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, push e resumos semanais para acompanhar atualizações importantes.
    <% end %>

Disabled

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 { "Posso acessar meu histórico?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Sim. O histórico fica disponível na área de conta para planos ativos.
    <% end %>

Borders

Adicione border no accordion para destacar o contorno do 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, com opção mensal ou anual e cancelamento a qualquer momento.
    <% end %>

Card

Componha o Accordion dentro de Card quando ele fizer parte de uma superfície maior.

Assinatura e cobrança

Perguntas 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 { "Perguntas comuns sobre planos, pagamentos e cancelamentos." } %>
  <% end %>
  <%= ui_card_content do %>
    <%= ui_accordion(default_value: :plans) do %>
      <%= ui_accordion_item(value: :plans) do %>

Referência da API

Os helpers encapsulam os componentes ViewComponent e preservam atributos HTML livres, incluindo data: e aria:.

Helper Argumentos principais Descrição
ui_accordion multiple, default_value, orientation, disabled, loop_focus Root com controller Stimulus, valores iniciais e navegação por teclado.
ui_accordion_item value, disabled Item com border-b last:border-b-0. Use value quando configurar default_value.
ui_accordion_header tag Renderiza o cabeçalho semântico; o padrão é :h3.
ui_accordion_trigger disabled Botão que alterna o item, com ícone chevron-down e ações Stimulus.
ui_accordion_content / ui_accordion_panel class / class_name Painel com role="region", animações shadcn e wrapper interno pt-0 pb-4.