Toggle

Um botão de dois estados com aria-pressed e data-state (on/off).

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 toggle --yes

O item toggle do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/toggle_component.rb
app/helpers/ui/toggle_helper.rb
app/javascript/controllers/ui_toggle_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

<%= ui_toggle(variant: :outline, "aria-label": "Bold") { ui_icon("bold") } %>

Exemplos

Padrão

Toggles de formatação, um deles pressionado.

<div class="flex items-center gap-2">
  <%= ui_toggle(variant: :outline, "aria-label": "Bold") { ui_icon("bold") } %>
  <%= ui_toggle(variant: :outline, pressed: true, "aria-label": "Italic") { ui_icon("italic") } %>
</div>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Toggle`	`variant`	`:default`	A aparência. Um de `:default`, `:outline`.
`Toggle`	`size`	`:default`	O tamanho. Um de `:default`, `:sm`, `:lg`.
`Toggle`	`pressed`	`false`	Começa pressionado (`aria-pressed="true"`).
`Toggle`	`disabled`	`false`	Desabilita: não recebe clique e o teclado o pula.