KScrollableContainer
示例
Scrollable Container
Item 1 — Scrollable content row
Item 2 — Scrollable content row
Item 3 — Scrollable content row
Item 4 — Scrollable content row
Item 5 — Scrollable content row
Item 6 — Scrollable content row
Item 7 — Scrollable content row
Item 8 — Scrollable content row
Item 9 — Scrollable content row
Item 10 — Scrollable content row
Item 11 — Scrollable content row
Item 12 — Scrollable content row
Item 13 — Scrollable content row
Item 14 — Scrollable content row
Item 15 — Scrollable content row
Item 16 — Scrollable content row
Item 17 — Scrollable content row
Item 18 — Scrollable content row
Item 19 — Scrollable content row
Item 20 — Scrollable content row
Item 21 — Scrollable content row
Item 22 — Scrollable content row
Item 23 — Scrollable content row
Item 24 — Scrollable content row
Item 25 — Scrollable content row
Item 26 — Scrollable content row
Item 27 — Scrollable content row
Item 28 — Scrollable content row
Item 29 — Scrollable content row
Item 30 — Scrollable content row
A scrollable container with a configurable max height and a bottom fade gradient indicator.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| maxHeight | string | '400px' | Maximum height of the scrollable area (CSS value). |
| class | string | — | Additional CSS classes for the container. |
| theme | 'auto' | 'day' | 'night' | 'auto' | Theme mode. auto follows the current theme; day and night force a specific mode. |
Emits
| Name | Parameters | Description |
|---|---|---|
| — | — | This component does not emit custom events. |
Slots
| Name | Description |
|---|---|
| default | Content to render inside the scrollable area. |
Exposed Methods
| Name | Returns | Description |
|---|---|---|
| scrollToTop | void | Smoothly scrolls to the top of the container. |
| scrollToBottom | void | Smoothly scrolls to the bottom of the container. |
| getScrollInfo | { scrollTop, scrollHeight, clientHeight, isAtBottom, isAtTop } | Returns current scroll state information. |
Basic Usage
vue
<script setup>
import { ref } from 'vue'
import { KScrollableContainer } from '@kK-2004/ui-component'
const container = ref(null)
</script>
<template>
<KScrollableContainer ref="container" max-height="300px">
<p v-for="i in 50" :key="i">Item {{ i }}</p>
</KScrollableContainer>
</template>