Lewati ke konten
1.6k

Area gulir

Sebuah wadah yang dapat digulir dengan bilah gulir khusus yang kompatibel di berbagai peramban untuk panel obrolan, bilah samping, dan pohon file — dilengkapi dengan tombol gulir bergaya neobrutalis yang tebal.

import * as React from "react"

import { ScrollArea } from "@/components/ui/scroll-area"

Scroll area menggantikan scrollbar bawaan browser dengan scrollbar yang bisa Anda gayakan sendiri — pengguliran natif tetap bekerja di baliknya, sehingga perilaku roda mouse, sentuhan, dan momentum tidak tersentuh. Dibangun di atas komponen Base UI Scroll Area dan ditata dengan resep neobrutalis: thumb pejal nan tebal dengan warna garis tepi serta cincin fokus keras pada viewport.

Cocok digunakan untuk:

  • Panel obrolan dan log — tetapkan tingginya dan biarkan pesan bergulir di dalam panel, bukan di halaman.
  • Sidebar dan pohon berkas — daftar navigasi panjang yang bergulir terpisah dari konten utama.
  • Lajur horizontal — deretan tag, galeri kartu, dan tabel lebar lewat orientation="horizontal".

Instalasi

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json
npx shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json

Instal dependensi berikut:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Salin dan tempel kode berikut ke dalam proyek Anda.

components/ui/scroll-area.tsx
"use client"

import * as React from "react"
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function ScrollArea({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn("relative", className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

function ScrollBar({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      data-orientation={orientation}
      orientation={orientation}
      className={cn(
        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
        className
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="relative flex-1 rounded bg-border"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}

export { ScrollArea, ScrollBar }

Perbarui jalur impor agar sesuai dengan pengaturan proyek Anda.

Penggunaan

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>

Komposisi

Gunakan komposisi berikut untuk membangun ScrollArea:

ScrollArea
└── ScrollBar

Contoh

Horizontal

Gunakan ScrollBar dengan orientation="horizontal" untuk scroll horizontal.

import * as React from "react"
import Image from "next/image"

RTL

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas

Tidak ada pola WAI-ARIA untuk scroll area — memang tidak diperlukan, karena komponen Base UI mempertahankan kontainer gulir natif sungguhan di baliknya, sehingga pengguliran lewat roda mouse, sentuhan, dan keyboard berperilaku persis seperti bawaan browser. Tidak semua browser otomatis menjadikan kontainer gulir dapat difokus lewat keyboard: jika kontennya tidak memuat elemen yang dapat difokus, tambahkan tabIndex={0} dan aria-label pada viewport agar pengguna keyboard dapat menjangkau dan menggulirnya — gayanya sudah menyertakan cincin fokus yang terlihat untuk kasus tersebut. Scrollbar dan thumb kustom hanyalah afordansi untuk pointer; keduanya tidak boleh menjadi satu-satunya cara menggulir.

Referensi API

Lihat dokumentasi Base UI Scroll Area.