Alert

Um bloco de aviso, com semântica de alerta, para mensagens importantes.

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

O item alert do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/alert_component.rb
app/components/ui/alert/title_component.rb
app/components/ui/alert/description_component.rb
app/helpers/ui/alert_helper.rb
vendor/shadwire/shadwire.css

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

Uso

<%= ui_alert do %>
  <%= ui_icon("terminal") %>
  <%= ui_alert_title { "Heads up!" } %>
  <%= ui_alert_description { "You can add components to your app with the CLI." } %>
<% end %>

Ou renderize Ui::AlertComponent diretamente:

<%= render Ui::AlertComponent.new(variant: :destructive) do %>
  <%= render Ui::Alert::TitleComponent.new do %>
    Could not save your changes.
  <% end %>
<% end %>

Exemplos

Padrão

Uma mensagem importante, com role="alert" por padrão.

Atenção!

Você pode adicionar componentes ao seu app pela CLI.

<%= ui_alert do %>
  <%= ui_icon("terminal") %>
  <%= ui_alert_title { "Atenção!" } %>
  <%= ui_alert_description { "Você pode adicionar componentes ao seu app pela CLI." } %>
<% end %>

Destrutivo

Use para erros ou avisos de alta severidade.

Não foi possível salvar

Revise os campos destacados e tente de novo.

<%= ui_alert(variant: :destructive) do %>
  <%= ui_icon("circle-alert") %>
  <%= ui_alert_title { "Não foi possível salvar" } %>
  <%= ui_alert_description { "Revise os campos destacados e tente de novo." } %>
<% end %>

Referência da API

ui_alert, ui_alert_title e ui_alert_description encapsulam os componentes correspondentes. Um ui_icon colocado primeiro ganha uma coluna própria, e o texto se alinha ao lado dele. Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Alert`	`variant`	`:default`	`:default` ou `:destructive`.
`Alert`	`role` (atributo)	`"alert"`	Pode ser sobrescrito quando a mensagem não deve ser anunciada imediatamente.
`Alert::Title`	—	—	A linha de título, limitada a uma linha.
`Alert::Description`	—	—	O corpo, em tom neutro; comporta uma linha de texto ou vários `<p>`.