Sheet — Vue

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

<Sheet id="demo-sheet" title="Panel" side="right" triggerLabel="Open sheet" client:load>
  <p>Sheet content.</p>
</Sheet>

<!-- Use .sheet-root so overlay stacks behind the sheet. openSheet_<id>(), closeSheet_<id>(). -->
<div class="sheet-root">
  <div class="sheet__overlay" data-sheet-overlay id="drawer-overlay" aria-hidden="true"></div>
  <div class="sheet sheet--right" id="drawer" data-sheet aria-hidden="true" hidden>
    <div class="sheet__content">
      <div class="sheet__header">
        <h2 class="sheet__title">Title</h2>
        <button type="button" class="sheet__close" aria-label="Close" data-sheet-close></button>
      </div>
      <div class="sheet__body">Content</div>
    </div>
  </div>
</div>
<button type="button" class="btn" onclick="window.openSheet_drawer()">Open</button>

<script>
  import { Sheet, Button } from '$lib/rizzo';
  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open sheet</Button>
<Sheet bind:open title="Panel" side="right">
  <p>Sheet content.</p>
</Sheet>

<script setup>
import { ref } from 'vue';
import Sheet from '@/components/rizzo/Sheet.vue';
import Button from '@/components/rizzo/Button.vue';
</script>

<template>
  <Button @click="open = true">Open sheet</Button>
  <Sheet v-model:open="open" title="Panel" side="right">
    <p>Sheet content.</p>
  </Sheet>
</template>

import { useState } from 'react';
import { Sheet, Button } from './components/react';

const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Open sheet</Button>
<Sheet open={open} onOpenChange={setOpen} title="Panel" side="right">
  <p>Sheet content.</p>
</Sheet>