Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update sidebar demo

Browse Source
This commit is contained in:
zernonia 2024-10-24 17:49:37 +02:00
parent 75eb9736e6
commit 967732b23b
1 changed files with 3 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
apps/www/src/content/docs/components/sidebar.md
View File

@ -1,73 +1,6 @@
--- ---
title: Sheet title: Sidebar
description: Extends the Dialog component to display content that complements the main content of the screen. description: A composable, themeable and customizable sidebar component.
source: apps/www/src/lib/registry/default/ui/sheet
primitive: https://www.radix-vue.com/components/dialog.html
--- ---
<ComponentPreview name="SheetDemo" /> <BlockPreview name="Sidebar07" ></BlockPreview>
## Installation
```bash
npx shadcn-vue@latest add sheet
```
## Usage
```vue
<script setup lang="ts">
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from '@/components/ui/sheet'
</script>
<template>
<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
</template>
```
## Examples
### Side
Use the `side` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`.
<ComponentPreview name="SheetSideDemo" />
### Size
You can adjust the size of the sheet using CSS classes:
```vue:line-numbers {4}
<template>
<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent class="w-[400px] sm:w-[540px]">
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
</template>
```