İçeriğe atla
1.6k

Kaydırma alanı

Sohbet pencereleri, kenar çubukları ve dosya ağaçları için özel, tarayıcılar arası uyumlu kaydırma çubuklarına sahip, kaydırılabilir bir kap — kalın, neobrütalist bir kaydırma çubuğu ile.

import * as React from "react"

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

Scroll area, tarayıcının varsayılan kaydırma çubuklarını kendi stillendirdiğiniz çubuklarla değiştirir — altta yerel kaydırma korunur; tekerlek, dokunma ve momentum davranışlarına dokunulmaz. Base UI Scroll Area bileşeni üzerine kuruludur ve neobrütalist reçeteye göre stillendirilmiştir: kenarlık renginde dolgun, iri bir tutamaç ve görünüm penceresinde keskin bir odak halkası.

Şu durumlarda tercih edin:

  • Sohbet ve log bölmeleri — yüksekliği sabitleyin; mesajlar sayfada değil panelin içinde kaysın.
  • Kenar çubukları ve dosya ağaçları — ana içerikten bağımsız kayan uzun gezinme listeleri.
  • Yatay şeritler — orientation="horizontal" ile etiket satırları, kart galerileri ve geniş tablolar.

Kurulum

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

Aşağıdaki bağımlılıkları yükleyin:

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

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

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 }

İçe aktarma yollarını proje kurulumunuza göre güncelleyin.

Kullanım

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

Kompozisyon

Bir ScrollArea oluşturmak için aşağıdaki kompozisyonu kullanın:

ScrollArea
└── ScrollBar

Örnekler

Yatay

Yatay kaydırma için ScrollBar'ı orientation="horizontal" ile kullanın.

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

RTL

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik

Kaydırma alanları için bir WAI-ARIA deseni yoktur — gerekmez de; çünkü Base UI bileşeni altta gerçek bir yerel kaydırma kabı tutar, dolayısıyla tekerlek, dokunma ve klavye kaydırması tarayıcının kendi davranışıyla birebir aynıdır. Her tarayıcı bir kaydırma kabını kendiliğinden klavyeyle odaklanabilir yapmaz: içerikte odaklanabilir öğe yoksa, klavye kullanıcılarının alana ulaşıp kaydırabilmesi için görünüm penceresine tabIndex={0} ve bir aria-label ekleyin — stiller bu durum için görünür bir odak halkasını zaten içerir. Özel kaydırma çubuğu ve tutamaç yalnızca işaretçiyle kullanılan öğelerdir; asla kaydırmanın tek yolu olmamalıdır.

API Referansı

Base UI Scroll Area belgelerine bakın.