安裝
Terminal
pnpm dlx shadcn-vue add @admin/scroll-areaimport { AdminScrollArea, AdminScrollBar } from '@/components/admin/scroll-area'用法
<script setup lang="ts">import { AdminScrollArea } from '@/components/admin/scroll-area'const count = 20</script><template> <admin-scroll-area class="h-48 w-64 rounded-[8px] border p-3"> <p v-for="i in count" :key="i" class="typo-content-medium">Row {{ i }}</p> </admin-scroll-area></template>場景
水平捲動
<script setup lang="ts">import { cn } from '@/lib/utils'import { AdminScrollArea, AdminScrollBar } from '@/components/admin/scroll-area'</script><template> <admin-scroll-area class="w-80 rounded-md border"> <div class="flex gap-3 p-3"> <div v-for="i in 12" :key="i" :class=" cn(` flex h-24 w-32 shrink-0 items-center justify-center rounded-md bg-bg-80 typo-content-medium `) " > Card {{ i }} </div> </div> <admin-scroll-bar orientation="horizontal" /> </admin-scroll-area></template>API 參考
組成
<template> <admin-scroll-area> 內容 </admin-scroll-area></template>admin-scroll-area
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
type | ScrollType | undefined | — | Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. `always` - means that scrollbars are always visible regardless of whether the content is overflowing. `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation. `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area. `glimpse` - a hybrid approach that briefly shows scrollbars when the user enters the scroll area, then hides them until further interaction. |
dir | Direction$2 | undefined | — | The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. |
scrollHideDelay | number | undefined | — | If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars. |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-scroll-bar
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
orientation | "horizontal" | "vertical" | undefined | "vertical" | The orientation of the scrollbar |
forceMount | boolean | undefined | — | Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries. |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
更新紀錄
此元件尚無更新紀錄。