Drawer

Um painel que desliza de uma borda, feito com um <dialog> nativo, que fecha ao ser arrastado.

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

O item drawer do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/drawer_component.rb
app/components/ui/drawer/trigger_component.rb
app/components/ui/drawer/content_component.rb
app/components/ui/drawer/header_component.rb
app/components/ui/drawer/footer_component.rb
app/components/ui/drawer/title_component.rb
app/components/ui/drawer/description_component.rb
app/components/ui/drawer/close_component.rb
app/components/ui/button_component.rb
app/helpers/ui/drawer_helper.rb
app/helpers/ui/button_helper.rb
app/javascript/controllers/ui_drawer_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_drawer do %>
  <%= ui_drawer_trigger { "Open" } %>
  <%= ui_drawer_content do %>
    <%= ui_drawer_header do %>
      <%= ui_drawer_title { "Title" } %>
    <% end %>
  <% end %>
<% end %>

Exemplos

Padrão

Uma gaveta que sobe de baixo, com cabeçalho, descrição e ações.

<%= ui_drawer do %>
  <%= ui_drawer_trigger(variant: :outline) { "Abrir drawer" } %>
  <%= ui_drawer_content(class: "mx-auto max-w-md") do %>
    <%= ui_drawer_header do %>
      <%= ui_drawer_title { "Mover para a lixeira?" } %>
      <%= ui_drawer_description { "Você pode restaurar este item depois." } %>
    <% end %>
    <%= ui_drawer_footer do %>

<%= ui_drawer do %>
  <%= ui_drawer_trigger(variant: :outline) { "Abrir drawer" } %>
  <%= ui_drawer_content(class: "mx-auto max-w-md") do %>
    <%= ui_drawer_header do %>
      <%= ui_drawer_title { "Mover para a lixeira?" } %>
      <%= ui_drawer_description { "Você pode restaurar este item depois." } %>
    <% end %>
    <%= ui_drawer_footer do %>
      <%= ui_button { "Confirmar" } %>
      <%= ui_drawer_close(variant: :outline) { "Cancelar" } %>
    <% end %>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Drawer`	`close_on_backdrop`	`true`	Fecha com um clique fora do painel.
`Drawer::Trigger`	`variant`	`:outline`	Repassado ao botão que ele renderiza: qualquer variante do Button.
`Drawer::Trigger`	`size`	`:default`	Repassado ao botão que ele renderiza: qualquer tamanho do Button.
`Drawer::Content`	`side`	`:bottom`	A borda de onde desliza: `:bottom`, `:top`, `:right` ou `:left`. Drawers de cima e de baixo ganham uma alça de arraste.
`Drawer::Title`	`tag`	`:h2`	O elemento do título.
`Drawer::Title`	`tag_name`	`nil`	O nome antigo de `tag:`, ainda aceito.
`Drawer::Close`	`variant`	`:outline`	Repassado ao botão que ele renderiza: qualquer variante do Button.
`Drawer::Close`	`size`	`:default`	Repassado ao botão que ele renderiza: qualquer tamanho do Button.