Scroll Area

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 scroll-area --yes

O item scroll-area do registry instala estes arquivos:

• app/components/ui_component.rb
• app/components/ui/scroll_area_component.rb
• app/components/ui/scroll_area/viewport_component.rb
• app/components/ui/scroll_area/content_component.rb
• app/components/ui/scroll_area/scrollbar_component.rb
• app/components/ui/scroll_area/thumb_component.rb
• app/components/ui/scroll_area/corner_component.rb
• app/helpers/ui/scroll_area_helper.rb
• app/javascript/controllers/ui_scroll_area_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

Use o helper nas views, ou renderize a classe ViewComponent diretamente quando precisar do próprio objeto do componente.

<%= ui_scroll_area(class: "h-[200px] w-[350px] rounded-md border p-4") do %>
  Your scrollable content here.
<% end %>

<%= render Ui::ScrollAreaComponent.new(class: "h-[200px] w-[350px] rounded-md border p-4") do %>
  Your scrollable content here.
<% end %>

Composição

A anatomia do shadcn é ScrollArea com um ScrollBar opcional. No Shadwire, ui_scroll_area renderiza para você o viewport, o conteúdo, as barras, o cursor da barra e o canto.

ScrollArea
`-- ScrollBar

Exemplos

<%= ui_scroll_area(class: "h-[200px] w-[350px] rounded-md border p-4", data: { testid: "scroll-area-vertical" }) do %>
  <div class="flex flex-col gap-4 text-sm leading-6">
    <% 12.times do |index| %>
      <p>
        Nota de versão <%= index + 1 %>: os componentes Rails são copiados para o app e podem ser editados no lugar depois da instalação.
      </p>
    <% end %>
  </div>

<%= ui_scroll_area(class: "h-[200px] w-[350px] rounded-md border p-4", data: { testid: "scroll-area-vertical" }) do %>
  <div class="flex flex-col gap-4 text-sm leading-6">
    <% 12.times do |index| %>
      <p>
        Nota de versão <%= index + 1 %>: os componentes Rails são copiados para o app e podem ser editados no lugar depois da instalação.
      </p>
    <% end %>
  </div>
<% end %>

Horizontal

Use ui_scroll_bar(orientation: :horizontal) ou passe scrollbars: [ :horizontal ] para rolagem horizontal.

Horizontal

Use a barra horizontal para galerias e conteúdo largo.

ExpandirCopiar

<% works = [
  {
    artist: "Ornella Binni",
    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
  },
  {
    artist: "Tom Byrom",
    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80"

<%= ui_scroll_area(scrollbars: [ :horizontal ], class: "w-96 rounded-md border whitespace-nowrap") do %>
  <div class="flex w-max gap-4 p-4">...</div>
<% end %>

RTL

Passe os atributos de direção HTML padrão pelo componente ao renderizar conteúdo da direita para a esquerda.

<%= ui_scroll_area(dir: "rtl", class: "h-[200px] w-[350px] rounded-md border p-4", data: { testid: "scroll-area-rtl" }) do %>
  <div class="flex flex-col gap-4 text-sm leading-6">
    <% [
      "هذا مثال على محتوى طويل داخل منطقة تمرير باتجاه من اليمين إلى اليسار.",
      "يمكنك تمرير المحتوى مع الحفاظ على اتجاه النص العربي داخل المكون.",
      "تنتقل خصائص HTML مثل dir وdata وaria مباشرة إلى الجذر.",
      "تظل أشرطة التمرير المخصصة متوافقة مع السلوك الأصلي للمتصفح.",
      "هذا السطر الإضافي يجعل المثال قابلاً للتمرير عمودياً."

<%= ui_scroll_area(dir: "rtl", class: "h-[200px] w-[350px] rounded-md border p-4", data: { testid: "scroll-area-rtl" }) do %>
  <div class="flex flex-col gap-4 text-sm leading-6">
    <% [
      "هذا مثال على محتوى طويل داخل منطقة تمرير باتجاه من اليمين إلى اليسار.",
      "يمكنك تمرير المحتوى مع الحفاظ على اتجاه النص العربي داخل المكون.",
      "تنتقل خصائص HTML مثل dir وdata وaria مباشرة إلى الجذر.",
      "تظل أشرطة التمرير المخصصة متوافقة مع السلوك الأصلي للمتصفح.",
      "هذا السطر الإضافي يجعل المثال قابلاً للتمرير عمودياً."
    ].each do |line| %>
      <p><%= line %></p>
    <% end %>
  </div>
<% end %>

Referência da API

Este port para Rails espelha as partes no estilo Base UI com classes ViewComponent e atributos de dados. Os helpers preservam atributos HTML livres, incluindo data: e aria:.