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',
|
href: '/docs/components/sonner',
|
||||||
items: [],
|
items: [],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Stepper',
|
||||||
|
href: '/docs/components/stepper',
|
||||||
|
label: 'New',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Switch',
|
title: 'Switch',
|
||||||
href: '/docs/components/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),
|
component: () => import("../src/lib/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/default/example/SonnerWithDialog.vue"],
|
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": {
|
"SwitchDemo": {
|
||||||
name: "SwitchDemo",
|
name: "SwitchDemo",
|
||||||
type: "components:example",
|
type: "components:example",
|
||||||
|
|
@ -2433,6 +2440,13 @@ export const Index = {
|
||||||
component: () => import("../src/lib/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
|
component: () => import("../src/lib/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/new-york/example/SonnerWithDialog.vue"],
|
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": {
|
"SwitchDemo": {
|
||||||
name: "SwitchDemo",
|
name: "SwitchDemo",
|
||||||
type: "components:example",
|
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