Separator

Divide conteúdo visualmente ou semanticamente.

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

O item separator do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/separator_component.rb
app/helpers/ui/separator_helper.rb
vendor/shadwire/shadwire.css

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

Uso

Use o modo semântico por padrão. Passe decorative: true para divisores puramente visuais.

<%= ui_separator %>
<%= ui_separator(orientation: :vertical, class: "h-5") %>

Ou renderize Ui::SeparatorComponent diretamente:

<%= render Ui::SeparatorComponent.new(decorative: true) %>

Exemplos

Orientações e decorativo

Separadores semânticos expõem aria-orientation; decorativos ficam ocultos da tecnologia assistiva.

Conta

Gerencie email, senha e preferências.

Blog

Docs

API

<div class="grid gap-4">
  <div>
    <p class="text-sm font-medium">Conta</p>
    <p class="text-sm text-muted-foreground">Gerencie email, senha e preferências.</p>
  </div>
  <%= ui_separator %>
  <div class="flex h-5 items-center gap-3 text-sm">
    <span>Blog</span>

<div class="grid gap-4">
  <div>
    <p class="text-sm font-medium">Conta</p>
    <p class="text-sm text-muted-foreground">Gerencie email, senha e preferências.</p>
  </div>
  <%= ui_separator %>
  <div class="flex h-5 items-center gap-3 text-sm">
    <span>Blog</span>
    <%= ui_separator(orientation: :vertical) %>
    <span>Docs</span>
    <%= ui_separator(orientation: :vertical) %>
    <span>API</span>
  </div>
  <%= ui_separator(decorative: true) %>
</div>

Referência da API

ui_separator(**options) encapsula Ui::SeparatorComponent.new(**options).

Argumento	Tipo	Padrão	Descrição
`orientation`	Symbol/String	`:horizontal`	`:horizontal` ou `:vertical`.
`decorative`	Boolean	`nil`	Quando `true`, renderiza `role="none"` e `aria-hidden="true"`.
`**attrs`	Hash	`{}`	Atributos HTML livres e merge de `data`/`aria`.