Vitral 0.2
Painel

ScrollPanel

Um contêiner de rolagem com as barras finas do próprio tema, sobre a rolagem nativa.

Testado com WAI-ARIA

Importação

main.ts
import { ScrollPanel } from '@vitral/vue';

Vertical e horizontal

Paragraph 1. Vitral draws the scrollbars of this panel with the theme's tokens, while the browser keeps doing the scrolling, so the wheel, touch, and the arrow and page keys all work as they do anywhere else.

Paragraph 2. Vitral draws the scrollbars of this panel with the theme's tokens, while the browser keeps doing the scrolling, so the wheel, touch, and the arrow and page keys all work as they do anywhere else.

Paragraph 3. Vitral draws the scrollbars of this panel with the theme's tokens, while the browser keeps doing the scrolling, so the wheel, touch, and the arrow and page keys all work as they do anywhere else.

Paragraph 4. Vitral draws the scrollbars of this panel with the theme's tokens, while the browser keeps doing the scrolling, so the wheel, touch, and the arrow and page keys all work as they do anywhere else.

Paragraph 5. Vitral draws the scrollbars of this panel with the theme's tokens, while the browser keeps doing the scrolling, so the wheel, touch, and the arrow and page keys all work as they do anywhere else.

Paragraph 6. Vitral draws the scrollbars of this panel with the theme's tokens, while the browser keeps doing the scrolling, so the wheel, touch, and the arrow and page keys all work as they do anywhere else.

Paragraph 7. Vitral draws the scrollbars of this panel with the theme's tokens, while the browser keeps doing the scrolling, so the wheel, touch, and the arrow and page keys all work as they do anywhere else.

Paragraph 8. Vitral draws the scrollbars of this panel with the theme's tokens, while the browser keeps doing the scrolling, so the wheel, touch, and the arrow and page keys all work as they do anywhere else.

<script setup lang="ts">import { ScrollPanel } from '@vitral/vue'; const paragraphs = Array.from({ length: 8 }, (_, i) => `Paragraph ${i + 1}. Vitral draws the scrollbars of this panel with the theme's tokens, while the browser keeps doing the scrolling, so the wheel, touch, and the arrow and page keys all work as they do anywhere else.`);</script> <template>    <ScrollPanel aria-label="Notes" style="width: 100%; max-width: 28rem; height: 14rem; border: 1px solid var(--vt-content-border-color); border-radius: 8px">        <div style="padding: 1rem; width: 40rem">            <p v-for="p in paragraphs" :key="p" style="margin: 0 0 0.75rem">{{ p }}</p>        </div>    </ScrollPanel></template>

API

Lido de packages/vue/src/components/ScrollPanel/types.ts, então diz o que o componente aceita de fato.

Slots

NomeProps do slotDescrição
default——