Scroll Area

Menyempurnakan gulir bawaan browser agar tampilannya bisa di-style dan konsisten lintas browser.

Installation

pnpm dlx kliping@latest add scroll-area

Pasang dependensi berikut:

pnpm add reka-ui

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Usage

vue

<script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area'
</script>

<template>
  <ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
    Jokester began sneaking into the castle in the middle of the night and leaving
    jokes all over the place: under the king's pillow, in his soup, even in the
    royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
    then one day, the king tripped over one of Jokester's whoopee cushions and
    fell into the moat. He was so embarrassed that he decided to make Jokester the
    official court jester.
  </ScrollArea>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias `@` — disiapkan `kliping init`
npm packages	`@vueuse/core@^14.4.0`, `reka-ui@^2.10.3`
Files	`components/ui/scroll-area/scroll-area.vue` `components/ui/scroll-area/scroll-bar.vue` `components/ui/scroll-area/index.ts`

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

vue

<ScrollArea />

Bagian lain yang tersedia: ScrollBar.

API Reference

ScrollArea

Prop	Type	Default	Description
`type?`	`ScrollType`	—	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`	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`scrollHideDelay?`	`number`	—	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`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"scroll-area"`

ScrollBar

Prop	Type	Default	Description
`orientation?`	`"vertical" \| "horizontal"`	`"vertical"`	The orientation of the scrollbar
`forceMount?`	`boolean`	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Data attribute	Value
`[data-slot]`	`"scroll-area-scrollbar"`

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --ring.

Credits

PreviousResponsive Dialog Next Scroll Spy

On This Page

Installation Usage Requirements Anatomy API Reference ScrollArea ScrollBar CSS Variables Credits

Scroll Area

Tags

Installation ​

Usage ​

Requirements ​

Anatomy ​

API Reference ​

ScrollArea ​

ScrollBar ​

CSS Variables ​

Credits ​