滚动区域
<script setup lang="ts">
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'radix-vue'
const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
</script>
<template>
<ScrollAreaRoot
class="w-[200px] h-[225px] rounded overflow-hidden shadow-[0_2px_10px] shadow-blackA7 bg-white"
style="--scrollbar-size: 10px"
>
<ScrollAreaViewport class="w-full h-full rounded">
<div class="py-[15px] px-5">
<div class="text-grass11 text-[15px] leading-[18px] font-semibold">
Tags
</div>
<div
v-for="tag in tags"
:key="tag"
class="text-mauve12 text-[13px] leading-[18px] mt-2.5 pt-2.5 border-t border-t-mauve6"
>
{{ tag }}
</div>
</div>
</ScrollAreaViewport>
<ScrollAreaScrollbar
class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
orientation="vertical"
>
<ScrollAreaThumb
class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
/>
</ScrollAreaScrollbar>
<ScrollAreaScrollbar
class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
orientation="horizontal"
>
<ScrollAreaThumb
class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
/>
</ScrollAreaScrollbar>
</ScrollAreaRoot>
</template>特性
- 滚动条位于可滚动内容的顶部，不占用任何空间。
- 滚动是原生的；没有通过 CSS 转换进行的任何基础位置移动。
- 仅在与控件交互时才会模拟指针行为，因此键盘控件不受影响。
- 支持从右到左的方向。
安装
从命令行安装组件。
$ npm add radix-vue解剖
导入所有部分并将它们拼凑在一起。
<script setup>
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'radix-vue'
</script>
<template>
<ScrollAreaRoot>
<ScrollAreaViewport />
<ScrollAreaScrollbar orientation="horizontal">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaScrollbar orientation="vertical">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaCorner />
</ScrollAreaRoot>
</template>API 参考
根
包含滚动区域的所有部分。
| 道具 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应呈现为的元素或组件。可以被 |
asChild | 布尔值将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。 阅读我们的 组合 指南了解更多详情。 | |
dir | 'ltr' | 'rtl'组合框的阅读方向（如果适用）。 | |
scrollHideDelay | 600 | 数字如果类型设置为 |
type | 'hover' | 'always' | 'scroll' | 'hover' | 'auto'描述滚动条可见性的性质，类似于 macOS 中的滚动条首选项如何控制原生滚动条的可见性。
|
| 方法 | 类型 |
|---|---|
scrollTop | () => void将视窗滚动到顶部 |
scrollTopLeft | () => void将视窗滚动到左上角 |
视窗
滚动区域的视窗区域。
| 道具 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应呈现为的元素或组件。可以被 |
asChild | 布尔值将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。 阅读我们的 组合 指南了解更多详情。 | |
nonce | 字符串将 |
滚动条
垂直滚动条。添加第二个带有orientation道具的Scrollbar来启用水平滚动。
| 道具 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应呈现为的元素或组件。可以被 |
asChild | 布尔值将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。 阅读我们的 组合 指南了解更多详情。 | |
forceMount | 布尔值用于在需要更多控制时强制挂载。当使用 Vue 动画库控制动画时很有用。 | |
orientation | 'vertical' | 'vertical' | 'horizontal'滚动条的方向 |
| 数据属性 | 价值 |
|---|---|
[data-state] | "visible" | "hidden" |
[data-orientation] | "vertical" | "horizontal" |
拇指
将在ScrollAreaScrollbar中使用的拇指。
| 道具 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应呈现为的元素或组件。可以被 |
asChild | 布尔值将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。 阅读我们的 组合 指南了解更多详情。 |
| 数据属性 | 价值 |
|---|---|
[data-state] | "visible" | "hidden" |
角
垂直和水平滚动条相遇的角落。
| 道具 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应呈现为的元素或组件。可以被 |
asChild | 布尔值将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。 阅读我们的 组合 指南了解更多详情。 |
无障碍
在大多数情况下，最好依赖原生滚动并使用 CSS 中提供的自定义选项。当这还不够时，ScrollArea 提供额外的自定义功能，同时保持浏览器的原生滚动行为（以及无障碍功能，如键盘滚动）。
键盘交互
默认情况下支持通过键盘滚动，因为该组件依赖于原生滚动。特定平台之间的特定键盘交互可能有所不同，因此我们不会在此处指定它们，也不会添加特定事件监听器来处理通过键盘事件进行滚动。