Toggle Group

Um grupo de toggles com seleção única ou múltipla e navegação por setas.

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

O item toggle-group do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/toggle_group_component.rb
app/components/ui/toggle_group/item_component.rb
app/helpers/ui/toggle_group_helper.rb
app/javascript/controllers/ui_toggle_group_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_group(type: :single) do %>
  <%= ui_toggle_group_item(value: "left") { ui_icon("align-left") } %>
  <%= ui_toggle_group_item(value: "center") { ui_icon("align-center") } %>
<% end %>

Exemplos

Padrão

Seleção múltipla de formatação de texto.

<%= ui_toggle_group(type: :multiple, variant: :outline, "aria-label": "Formatting") do %>
  <%= ui_toggle_group_item(value: "bold", variant: :outline, "aria-label": "Bold") { ui_icon("bold") } %>
  <%= ui_toggle_group_item(value: "italic", variant: :outline, pressed: true, "aria-label": "Italic") { ui_icon("italic") } %>
  <%= ui_toggle_group_item(value: "underline", variant: :outline, "aria-label": "Underline") { ui_icon("underline") } %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`ToggleGroup`	`type`	`:single`	`:single` mantém no máximo um item pressionado; `:multiple` deixa cada um alternar sozinho.
`ToggleGroup`	`variant`	`:default`	Define `data-variant`; `:outline` dá a sombra ao grupo. Cada item recebe seu próprio `variant:`.
`ToggleGroup`	`size`	`:default`	Define `data-size`. Cada item recebe seu próprio `size:`.
`ToggleGroup`	`orientation`	`:horizontal`	Dispõe os itens numa linha (`:horizontal`) ou numa coluna (`:vertical`).
`ToggleGroup::Item`	`value`	`nil`	Identifica o item no valor do grupo.
`ToggleGroup::Item`	`variant`	`:default`	A aparência; passe o `variant:` do grupo. Um de `:default`, `:outline`.
`ToggleGroup::Item`	`size`	`:default`	O tamanho; passe o `size:` do grupo. Um de `:default`, `:sm`, `:lg`.
`ToggleGroup::Item`	`pressed`	`false`	Começa pressionado.
`ToggleGroup::Item`	`disabled`	`false`	Desabilita: não recebe clique e o teclado o pula.