Scroll Area 滚动区域
基于 reka-ui 的 ScrollArea 原语构建的新粗野主义风格滚动区域，带有自定义滚动条样式。
预览
Preview
通知
标签
变体
default
primary
accent
尺寸
sm
default
lg
安装
pnpm dlx brutx-vue@latest add scroll-area用法
vue
<script setup>
import { ScrollArea } from 'brutx-ui-vue'
</script>
<template>
<ScrollArea class="h-72 w-48 border-3 border-brutal">
<div class="p-4">
<h4 class="mb-4 text-sm font-black leading-none">Tags</h4>
<div class="space-y-1">
<div v-for="tag in tags" :key="tag" class="text-sm font-medium">
{{ tag }}
</div>
</div>
</div>
</ScrollArea>
</template>水平滚动
vue
<script setup>
import { ScrollArea, ScrollBar } from 'brutx-ui-vue'
</script>
<template>
<ScrollArea class="w-96 border-3 border-brutal">
<div class="flex w-max space-x-4 p-4">
<div v-for="artwork in artworks" :key="artwork" class="shrink-0">
<div class="h-[250px] w-[200px] border-3 border-brutal bg-brutal-muted" />
</div>
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</template>变体
控制滚动条边框与滑块颜色。设置在 ScrollArea 上会下发给默认垂直滚动条；手动添加的水平滚动条需在 ScrollBar 上单独设置。
| 变体 | 边框 | 滑块 |
|---|---|---|
default | border-brutal | bg-brutal-fg |
primary | border-brutal-primary | bg-brutal-primary |
accent | border-brutal-accent | bg-brutal-accent |
vue
<script setup>
import { ScrollArea } from 'brutx-ui-vue'
const tags = Array.from({ length: 20 }, (_, i) => `标签 ${i + 1}`)
</script>
<template>
<ScrollArea variant="primary" class="h-72 w-48 border-3 border-brutal">
<div class="p-4 space-y-1">
<div v-for="tag in tags" :key="tag" class="text-sm font-medium">
{{ tag }}
</div>
</div>
</ScrollArea>
</template>尺寸
控制滚动条粗细（通过 --scroll-thickness 令牌）。
| 尺寸 | 粗细 |
|---|---|
sm | 0.5rem |
default | 0.75rem |
lg | 1rem |
vue
<script setup>
import { ScrollArea } from 'brutx-ui-vue'
const tags = Array.from({ length: 20 }, (_, i) => `标签 ${i + 1}`)
</script>
<template>
<ScrollArea size="lg" class="h-72 w-48 border-3 border-brutal">
<div class="p-4 space-y-1">
<div v-for="tag in tags" :key="tag" class="text-sm font-medium">
{{ tag }}
</div>
</div>
</ScrollArea>
</template>子组件
| 组件 | 说明 |
|---|---|
ScrollArea | 根可滚动容器 |
ScrollBar | 自定义滚动条（默认垂直，支持水平） |
API 参考
ScrollArea
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "accent" | "default" | "primary" | undefined | "default" | 选择滚动条与滑块的 default、primary 或 accent 颜色变体，并传递给内部 ScrollBar。 |
详情声明类型NonNullable<"default" | "primary" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/scroll-area/ScrollArea.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 选择内部滚动条的粗细尺寸，并传递给 ScrollBar。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/scroll-area/ScrollArea.vue | |||
class | string | undefined | undefined | 追加到 Reka UI 滚动区域根元素的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/scroll-area/ScrollArea.vue | |||
viewportClass | string | undefined | undefined | 追加到可滚动 Viewport 元素的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/scroll-area/ScrollArea.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 放置要在可滚动 viewport 中呈现的内容。 |
详情声明类型{}来源packages/ui/src/components/scroll-area/ScrollArea.vue | ||
ScrollBar
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | "vertical" | "horizontal" | undefined | "vertical" | 选择竖直或水平滚动条方向。 |
详情声明类型"vertical" | "horizontal" | undefined 字面量
默认值详情
来源packages/ui/src/components/scroll-area/ScrollBar.vue | |||
variant | "accent" | "default" | "primary" | undefined | "default" | 选择滚动条与滑块的 default、primary 或 accent 颜色变体。 |
详情声明类型NonNullable<"default" | "primary" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/scroll-area/ScrollBar.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 选择滚动条粗细尺寸。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/scroll-area/ScrollBar.vue | |||
class | string | undefined | undefined | 追加到 Reka UI scrollbar 元素的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/scroll-area/ScrollBar.vue | |||
可访问性
- 键盘操作：支持键盘方向键、Page Up/Down、Home/End 键滚动内容
- ARIA 属性：滚动区域自动设置
role="region"和aria-label，滚动条设置适当的 ARIA 属性 - 滚动条交互：滚动条滑块支持鼠标拖拽和键盘操作，具有可见的焦点指示器
- 内容溢出：当内容溢出时，屏幕阅读器能够识别可滚动区域并提供导航提示