Scroll Area

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 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: 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 Rails, ou renderize a classe ViewComponent diretamente quando precisar da API de objeto.

<%= 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 viewport, conteúdo, barras, thumb e canto para você.

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>
        Release note <%= index + 1 %>: Rails components are copied into the app and can be edited in place after installation.
      </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>
        Release note <%= index + 1 %>: Rails components are copied into the app and can be edited in place after installation.
      </p>
    <% end %>
  </div>
<% end %>

Horizontal

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

Horizontal

Use a horizontal scrollbar for galleries and wide content.

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:.