docs(Stepper): update docs

This commit is contained in:
Eduard Predescu 2024-07-21 18:39:42 +03:00
parent cbaebcf7ad
commit 8eecc8b221
3 changed files with 69 additions and 0 deletions

View File

@ -321,6 +321,11 @@ export const docsConfig: DocsConfig = {
href: '/docs/components/sonner',
items: [],
},
{
title: 'Stepper',
href: '/docs/components/stepper',
label: 'New',
},
{
title: 'Switch',
href: '/docs/components/switch',

View File

@ -990,6 +990,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/SonnerWithDialog.vue"],
},
"StepperDemo": {
name: "StepperDemo",
type: "components:example",
registryDependencies: ["stepper"],
component: () => import("../src/lib/registry/default/example/StepperDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/StepperDemo.vue"],
},
"SwitchDemo": {
name: "SwitchDemo",
type: "components:example",
@ -2433,6 +2440,13 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/SonnerWithDialog.vue"],
},
"StepperDemo": {
name: "StepperDemo",
type: "components:example",
registryDependencies: ["stepper"],
component: () => import("../src/lib/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/StepperDemo.vue"],
},
"SwitchDemo": {
name: "SwitchDemo",
type: "components:example",

View File

@ -0,0 +1,50 @@
---
title: Stepper
description: A set of steps that are used to indicate progress through a multi-step process.
source: apps/www/src/lib/registry/default/ui/stepper
primitive: https://www.radix-vue.com/components/stepper.html
---
<ComponentPreview name="StepperDemo" />
## Installation
```bash
npx shadcn-vue@latest add stepper
```
## Usage
```vue
<script setup lang="ts">
import {
Stepper,
StepperDescription,
StepperIndicator,
StepperItem,
StepperSeparator,
StepperTitle,
StepperTrigger,
} from '@/components/ui/stepper'
</script>
<template>
<Stepper>
<StepperItem :step="1" linear>
<StepperTrigger>
<StepperIndicator>1</StepperIndicator>
<StepperTitle>Step 1</StepperTitle>
<StepperDescription>This is the first step</StepperDescription>
</StepperTrigger>
<StepperSeparator />
</StepperItem>
<StepperItem :step="2">
<StepperTrigger>
<StepperIndicator>2</StepperIndicator>
<StepperTitle>Step 2</StepperTitle>
<StepperDescription>This is the second step</StepperDescription>
</StepperTrigger>
</StepperItem>
</Stepper>
</template>
```