Scroll Area — Vue

---
import ScrollArea from '../components/astro/ScrollArea.astro';
---

<ScrollArea orientation="vertical" style="max-height: 200px">
  <div>Scrollable content here.</div>
</ScrollArea>

<!-- Rizzo CSS. BEM: scroll-area, scroll-area__viewport, scroll-area__scrollbar. -->
<div class="scroll-area" style="height: 200px;">
  <div class="scroll-area__viewport">...</div>
</div>

<script>
  import { ScrollArea } from '$lib/rizzo';
</script>

<ScrollArea orientation="vertical" style="max-height: 200px">
  <div>Scrollable content here.</div>
</ScrollArea>

<script setup>
import ScrollArea from '@/components/rizzo/ScrollArea.vue';
</script>

<template>
  <ScrollArea orientation="vertical" style="max-height: 200px">
    <div>Scrollable content here.</div>
  </ScrollArea>
</template>

import { ScrollArea } from './components/react';

<ScrollArea orientation="vertical" style={{ maxHeight: '200px' }}>
  <div>Scrollable content here.</div>
</ScrollArea>