docs(Stepper): update docs
This commit is contained in:
parent
cbaebcf7ad
commit
8eecc8b221
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
50
apps/www/src/content/docs/components/stepper.md
Normal file
50
apps/www/src/content/docs/components/stepper.md
Normal 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>
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user