ScrollArea

カスタムスクロールバー付きのスクロール領域コンポーネント。

インポート

import { ScrollArea } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

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

基本的な使い方

項目 1

項目 2

項目 3

項目 4

項目 5

項目 6

項目 7

項目 8

項目 9

項目 10

項目 11

項目 12

<ScrollArea className="h-[200px] w-[300px] rounded-md border p-4">
  <div className="space-y-4">
    {Array.from({ length: 20 }).map((_, i) => (
      <p key={i}>項目 {i + 1}</p>
    ))}
  </div>
</ScrollArea>

リスト表示

通知

新しいコメント2分前

タスクが完了しました5分前

新しいメッセージ10分前

招待を受けました1時間前

ファイルがアップロードされました2時間前

<ScrollArea className="h-[200px] w-[300px] rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium">通知</h4>
    {notifications.map((notification) => (
      <div key={notification.id} className="flex items-center gap-2">
        <Avatar className="h-8 w-8">
          <AvatarFallback>{notification.initial}</AvatarFallback>
        </Avatar>
        <div>
          <p className="text-sm font-medium">{notification.title}</p>
          <p className="text-xs text-muted-foreground">{notification.time}</p>
        </div>
      </div>
    ))}
  </div>
</ScrollArea>

横スクロール

デフォルトでは垂直スクロールバーのみ描画されます。横スクロールを機能させるにはorientation="horizontal"を指定してください（未指定だと横方向の可視スクロールバーが描画されません）。

カード 1

カード 2

カード 3

カード 4

カード 5

<ScrollArea orientation="horizontal" className="w-[350px] whitespace-nowrap rounded-md border">
  <div className="flex space-x-4 p-4">
    {Array.from({ length: 10 }).map((_, i) => (
      <div key={i} className="w-[150px] shrink-0">
        カード {i + 1}
      </div>
    ))}
  </div>
</ScrollArea>

縦横両方のスクロール

コンテンツが縦横どちらにも溢れる場合はorientation="both"を指定します。

横に長い項目 1 ---------------------------------

横に長い項目 2 ---------------------------------

横に長い項目 3 ---------------------------------

横に長い項目 4 ---------------------------------

横に長い項目 5 ---------------------------------

横に長い項目 6 ---------------------------------

横に長い項目 7 ---------------------------------

横に長い項目 8 ---------------------------------

横に長い項目 9 ---------------------------------

横に長い項目 10 ---------------------------------

<ScrollArea orientation="both" className="h-[200px] w-[300px] rounded-md border p-4">
  <div className="w-[600px] space-y-4">{/* ... */}</div>
</ScrollArea>

Props

Prop	Type	Default	Description
`orientation`	`'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	表示するスクロールバーの向き。指定した向きのScrollBarのみ描画する
`className`	`string`	`-`	高さと幅を指定するCSSクラス