删除本地content目录,改为由github获取
This commit is contained in:
@@ -1,2 +0,0 @@
|
||||
title: 组件特性
|
||||
icon: lucide:box
|
||||
@@ -1,82 +0,0 @@
|
||||
---
|
||||
title: 常用组件
|
||||
description: 常用自定义组件速查文档
|
||||
navigation:
|
||||
icon: lucide-component
|
||||
---
|
||||
|
||||
|
||||
|
||||
:::code-group
|
||||
```mdc [index.md]
|
||||
::callout
|
||||
---
|
||||
icon: simple-icons-visualstudiocode
|
||||
to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
|
||||
---
|
||||
安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
|
||||
::
|
||||
```
|
||||
|
||||
::::code-preview{icon="i-lucide-eye" label="Preview"}
|
||||
::callout
|
||||
---
|
||||
icon: simple-icons-visualstudiocode
|
||||
to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
|
||||
---
|
||||
安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
|
||||
::
|
||||
::::
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::tip
|
||||
在 tip 标签中嵌套 code-group 的示例. 可以直接复制index.md 中的内容,既是 当前展示 的效果.
|
||||
|
||||
:::code-group
|
||||
```mdc [index.md]
|
||||
::tip
|
||||
在文档中使用自定义组件时，可以在插槽中使用 Markdown 语法，组件会自动渲染 Markdown 内容。
|
||||
|
||||
:::code-group
|
||||
```mdc [index.md]
|
||||
::my-title
|
||||
A [rich text](/) will be **rendered** by the component.
|
||||
::
|
||||
```
|
||||
|
||||
```html [MyTitle.vue]
|
||||
<template>
|
||||
<h1 class="text-4xl">
|
||||
<slot mdc-unwrap="p" />
|
||||
</h1>
|
||||
</template>
|
||||
```
|
||||
|
||||
::::code-preview{icon="i-lucide-eye" label="Preview"}
|
||||
:::::example-title
|
||||
A [rich text](/) will be **rendered** by the component.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
::
|
||||
```
|
||||
|
||||
```html [MyTitle.vue]
|
||||
<template>
|
||||
<h1 class="text-4xl">
|
||||
<slot mdc-unwrap="p" />
|
||||
</h1>
|
||||
</template>
|
||||
```
|
||||
|
||||
::::code-preview{icon="i-lucide-eye" label="Preview"}
|
||||
:::::example-title
|
||||
A [rich text](/) will be **rendered** by the component.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
@@ -1,158 +0,0 @@
|
||||
---
|
||||
icon: lucide:triangle-alert
|
||||
badges:
|
||||
- value: Docus
|
||||
to: https://docus.dev/api/components#alert
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Alert.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::alert{icon="lucide:info"}
|
||||
A **default** alert with `code` and a [link](/).
|
||||
::
|
||||
|
||||
::alert{type="secondary" icon="lucide:info"}
|
||||
A **secondary** alert with `code` and a [link](/).
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::alert{icon="lucide:info"}
|
||||
A **default** alert with `code` and a [link](/).
|
||||
::
|
||||
|
||||
::alert{type="secondary" icon="lucide:info"}
|
||||
A **secondary** alert with `code` and a [link](/).
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Link
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
|
||||
A **link** alert.
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
|
||||
A **link** alert.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Variants
|
||||
|
||||
::tabs{variant="line"}
|
||||
::stack{label="info" icon="lucide:info"}
|
||||
::div{class="p-3"}
|
||||
::alert{type="info" icon="lucide:info"}
|
||||
An **info** alert with `code` and a [link](/).
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::alert{type="info" icon="lucide:info"}
|
||||
An **info** alert with `code` and a [link](/).
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="note" icon="lucide:pencil"}
|
||||
::div{class="p-3"}
|
||||
::alert{type="note" icon="lucide:pencil"}
|
||||
A **note** alert with `code` and a [link](/).
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::alert{type="note" icon="lucide:pencil"}
|
||||
A **note** alert with `code` and a [link](/).
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="success" icon="lucide:lightbulb"}
|
||||
::div{class="p-3"}
|
||||
::alert{type="success" icon="lucide:lightbulb"}
|
||||
A **success** alert with `code` and a [link](/).
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::alert{type="success" icon="lucide:lightbulb"}
|
||||
A **success** alert with `code` and a [link](/).
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="example" icon="lucide:test-tube"}
|
||||
::div{class="p-3"}
|
||||
::alert{type="example" icon="lucide:test-tube"}
|
||||
An **example** alert with `code` and a [link](/).
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::alert{type="example" icon="lucide:test-tube"}
|
||||
An **example** alert with `code` and a [link](/).
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="warning" icon="lucide:triangle-alert"}
|
||||
::div{class="p-3"}
|
||||
::alert{type="warning" icon="lucide:triangle-alert"}
|
||||
A **warning** alert with `code` and a [link](/).
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::alert{type="warning" icon="lucide:triangle-alert"}
|
||||
A **warning** alert with `code` and a [link](/).
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="danger" icon="lucide:circle-x"}
|
||||
::div{class="p-3"}
|
||||
::alert{type="danger" icon="lucide:circle-x"}
|
||||
A **danger** alert with `code` and a [link](/).
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::alert{type="danger" icon="lucide:circle-x"}
|
||||
A **danger** alert with `code` and a [link](/).
|
||||
::
|
||||
```
|
||||
::
|
||||
::
|
||||
|
||||
### Title
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::alert{title="Title" icon="lucide:layout-list"}
|
||||
An alert with a title.
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::alert{title="Title" icon="lucide:layout-list"}
|
||||
An alert with a title.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="title" type="string"}[Alert title]
|
||||
:field{name="icon" type="string"}[Alert icon]
|
||||
:field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'secondary'" default-value="'default'"}
|
||||
:field{name="to" type="string"}[Link URL]
|
||||
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
|
||||
:field{name="external" type="boolean"}[Alias to `target='_blank'`]
|
||||
:field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
|
||||
::
|
||||
@@ -1,125 +0,0 @@
|
||||
---
|
||||
title: Badge
|
||||
icon: lucide:badge
|
||||
badges:
|
||||
- value: Docus
|
||||
to: https://docus.dev/api/components#badge
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Badge.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-3"}
|
||||
::badge
|
||||
Default
|
||||
::
|
||||
::badge{size="sm"}
|
||||
Small
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::badge
|
||||
Default
|
||||
::
|
||||
::badge{size="sm"}
|
||||
Small
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Variants
|
||||
|
||||
::tabs{variant="line"}
|
||||
::stack{label="outline"}
|
||||
::div{class="p-3"}
|
||||
:badge[Outline]{variant="outline"}
|
||||
::
|
||||
```mdc
|
||||
:badge[Outline]{variant="outline"}
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="secondary"}
|
||||
::div{class="p-3"}
|
||||
:badge[Secondary]{variant="secondary"}
|
||||
::
|
||||
```mdc
|
||||
:badge[Secondary]{variant="secondary"}
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="info"}
|
||||
::div{class="p-3"}
|
||||
:badge[Info]{type="info"}
|
||||
::
|
||||
```mdc
|
||||
:badge[Info]{type="info"}
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="warning"}
|
||||
::div{class="p-3"}
|
||||
:badge[Warning]{type="warning"}
|
||||
::
|
||||
```mdc
|
||||
:badge[Warning]{type="warning"}
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="success"}
|
||||
::div{class="p-3"}
|
||||
:badge[Success]{type="success"}
|
||||
::
|
||||
```mdc
|
||||
:badge[Success]{type="success"}
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="lime"}
|
||||
::div{class="p-3"}
|
||||
:badge[lime]{type="lime"}
|
||||
::
|
||||
```mdc
|
||||
:badge[lime]{type="lime"}
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="danger"}
|
||||
::div{class="p-3"}
|
||||
:badge[Danger]{type="danger"}
|
||||
::
|
||||
```mdc
|
||||
:badge[Danger]{type="danger"}
|
||||
```
|
||||
::
|
||||
::
|
||||
|
||||
### Link
|
||||
|
||||
::stack
|
||||
::div{class="p-3"}
|
||||
::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
|
||||
Link
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
|
||||
Link
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'" default-value="'default'"}
|
||||
:field{name="variant" type="'default' | 'secondary' | 'destructive' | 'outline'" default-value="'default'"}
|
||||
:field{name="size" type="'md' | 'sm'" default-value="'md'"}
|
||||
:field{name="to" type="string"}[Link URL]
|
||||
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
|
||||
::
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
title: Button Link
|
||||
icon: lucide:external-link
|
||||
badges:
|
||||
- value: Docus
|
||||
to: https://docus.dev/api/components#buttonlink
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ButtonLink.vue
|
||||
target: _blank
|
||||
- value: 0.6.5
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-3 flex gap-4"}
|
||||
::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
|
||||
Get Started
|
||||
::
|
||||
::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
|
||||
GitHub
|
||||
::
|
||||
::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
|
||||
Ghost
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
|
||||
Get Started
|
||||
::
|
||||
::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
|
||||
GitHub
|
||||
::
|
||||
::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
|
||||
Ghost
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="variant" type="'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'" default-value="'default'"}
|
||||
:field{name="size" type="'default' | 'icon' | 'sm' | 'xs' | 'lg'" default-value="'default'"}
|
||||
:field{name="leftIcon" type="string"}[Icon on the left]
|
||||
:field{name="rightIcon" type="string"}[Icon on the right]
|
||||
:field{name="to" type="string"}[Link URL]
|
||||
:field{name="href" type="string"}[Alias to `to`]
|
||||
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
|
||||
:field{name="blank" type="boolean"}[Alias to `target='_blank'`]
|
||||
::
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
title: Callout
|
||||
icon: lucide:megaphone
|
||||
badges:
|
||||
- value: Nuxt UI Pro
|
||||
to: https://ui.nuxt.com/pro/prose/callout
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Callout.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
::alert{to="/components/docs/alert"}
|
||||
`::callout`{lang="mdc"} is an alias to `::alert`{lang="mdc"}.
|
||||
::
|
||||
@@ -1,175 +0,0 @@
|
||||
---
|
||||
title: Card Group
|
||||
icon: lucide:layout-grid
|
||||
badges:
|
||||
- value: Nuxt UI Pro
|
||||
to: https://ui.nuxt.com/pro/prose/card-group
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CardGroup.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::card-group
|
||||
::card
|
||||
---
|
||||
title: Components
|
||||
icon: lucide:box
|
||||
to: https://nuxt.com/docs/api/components/client-only
|
||||
target: _blank
|
||||
---
|
||||
Explore Nuxt built-in components for pages, layouts, head, and more.
|
||||
::
|
||||
::card
|
||||
---
|
||||
title: Composables
|
||||
icon: lucide:arrow-right-left
|
||||
to: https://nuxt.com/docs/api/composables/use-app-config
|
||||
target: _blank
|
||||
---
|
||||
Discover Nuxt composable functions for data-fetching, head management and more.
|
||||
::
|
||||
::card
|
||||
---
|
||||
title: Utils
|
||||
icon: lucide:scissors
|
||||
to: https://nuxt.com/docs/api/utils/dollarfetch
|
||||
target: _blank
|
||||
---
|
||||
Learn about Nuxt utility functions for navigation, error handling and more.
|
||||
::
|
||||
::card
|
||||
---
|
||||
title: Commands
|
||||
icon: lucide:square-terminal
|
||||
to: https://nuxt.com/docs/api/commands/add
|
||||
target: _blank
|
||||
---
|
||||
List of Nuxt CLI commands to init, analyze, build, and preview your application.
|
||||
::
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::card-group
|
||||
::card
|
||||
---
|
||||
title: Components
|
||||
icon: lucide:box
|
||||
to: https://nuxt.com/docs/api/components/client-only
|
||||
target: _blank
|
||||
---
|
||||
Explore Nuxt built-in components for pages, layouts, head, and more.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Composables
|
||||
icon: lucide:arrow-right-left
|
||||
to: https://nuxt.com/docs/api/composables/use-app-config
|
||||
target: _blank
|
||||
---
|
||||
Discover Nuxt composable functions for data-fetching, head management and more.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Utils
|
||||
icon: lucide:scissors
|
||||
to: https://nuxt.com/docs/api/utils/dollarfetch
|
||||
target: _blank
|
||||
---
|
||||
Learn about Nuxt utility functions for navigation, error handling and more.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Commands
|
||||
icon: lucide:square-terminal
|
||||
to: https://nuxt.com/docs/api/commands/add
|
||||
target: _blank
|
||||
---
|
||||
List of Nuxt CLI commands to init, analyze, build, and preview your application.
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Cols
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::card-group{:cols="3"}
|
||||
::card
|
||||
---
|
||||
title: Components
|
||||
icon: lucide:box
|
||||
to: https://nuxt.com/docs/api/components/client-only
|
||||
target: _blank
|
||||
---
|
||||
Explore Nuxt built-in components for pages, layouts, head, and more.
|
||||
::
|
||||
::card
|
||||
---
|
||||
title: Composables
|
||||
icon: lucide:arrow-right-left
|
||||
to: https://nuxt.com/docs/api/composables/use-app-config
|
||||
target: _blank
|
||||
---
|
||||
Discover Nuxt composable functions for data-fetching, head management and more.
|
||||
::
|
||||
::card
|
||||
---
|
||||
title: Utils
|
||||
icon: lucide:scissors
|
||||
to: https://nuxt.com/docs/api/utils/dollarfetch
|
||||
target: _blank
|
||||
---
|
||||
Learn about Nuxt utility functions for navigation, error handling and more.
|
||||
::
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::card-group{:cols="3"}
|
||||
::card
|
||||
---
|
||||
title: Components
|
||||
icon: lucide:box
|
||||
to: https://nuxt.com/docs/api/components/client-only
|
||||
target: _blank
|
||||
---
|
||||
Explore Nuxt built-in components for pages, layouts, head, and more.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Composables
|
||||
icon: lucide:arrow-right-left
|
||||
to: https://nuxt.com/docs/api/composables/use-app-config
|
||||
target: _blank
|
||||
---
|
||||
Discover Nuxt composable functions for data-fetching, head management and more.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Utils
|
||||
icon: lucide:scissors
|
||||
to: https://nuxt.com/docs/api/utils/dollarfetch
|
||||
target: _blank
|
||||
---
|
||||
Learn about Nuxt utility functions for navigation, error handling and more.
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="cols" type="1 | 2 | 3 | 4 | 5 | 6" default-value="2"}[Number of columns (only for desktop)]
|
||||
::
|
||||
@@ -1,173 +0,0 @@
|
||||
---
|
||||
title: Card
|
||||
icon: lucide:square
|
||||
badges:
|
||||
- value: Nuxt UI Pro
|
||||
to: https://ui.nuxt.com/pro/prose/card
|
||||
target: _blank
|
||||
- value: Docus
|
||||
to: https://docus.dev/api/components#card
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Card.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::card
|
||||
---
|
||||
icon: lucide:box
|
||||
---
|
||||
|
||||
#title
|
||||
Card Title
|
||||
|
||||
#description
|
||||
Description
|
||||
|
||||
#content
|
||||
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
|
||||
|
||||
#footer
|
||||
Footer
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::card
|
||||
---
|
||||
icon: lucide:box
|
||||
---
|
||||
|
||||
#title
|
||||
Card Title
|
||||
|
||||
#description
|
||||
Description
|
||||
|
||||
#content
|
||||
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
|
||||
|
||||
#footer
|
||||
Footer
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Link
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::card
|
||||
---
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
|
||||
target: _blank
|
||||
# showLinkIcon: false
|
||||
---
|
||||
|
||||
#title
|
||||
Link Card
|
||||
|
||||
#content
|
||||
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::card
|
||||
---
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
|
||||
target: _blank
|
||||
# showLinkIcon: false
|
||||
---
|
||||
|
||||
#title
|
||||
Link Card
|
||||
|
||||
#content
|
||||
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Horizontal
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::card
|
||||
---
|
||||
icon: 'lucide:fold-horizontal'
|
||||
icon-size: 26
|
||||
horizontal: true
|
||||
---
|
||||
|
||||
#title
|
||||
Horizontal Card
|
||||
|
||||
#description
|
||||
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::card
|
||||
---
|
||||
icon: 'lucide:fold-horizontal'
|
||||
icon-size: 26
|
||||
horizontal: true
|
||||
---
|
||||
|
||||
#title
|
||||
Horizontal Card
|
||||
|
||||
#description
|
||||
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Image
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::card
|
||||
---
|
||||
img: /og-nuxt.png
|
||||
---
|
||||
#title
|
||||
Image Card
|
||||
|
||||
#content
|
||||
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::card
|
||||
---
|
||||
img: /og-nuxt.png
|
||||
---
|
||||
#title
|
||||
Image Card
|
||||
|
||||
#content
|
||||
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="title" type="string"}[Card title]
|
||||
:field{name="description" type="string"}[Card description]
|
||||
:field{name="content" type="string"}[Card content]
|
||||
:field{name="footer" type="string"}[Card footer]
|
||||
:field{name="icon" type="string"}[Card icon]
|
||||
:field{name="horizontal" type="boolean" default-value="false"}
|
||||
:field{name="to" type="string"}[Link URL]
|
||||
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
|
||||
:field{name="iconSize" type="number" default-value="24"}
|
||||
:field{name="img" type="string"}[Image URL]
|
||||
:field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
|
||||
::
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
title: Code Group
|
||||
icon: lucide:code-xml
|
||||
badges:
|
||||
- value: Nuxt UI Pro
|
||||
to: https://ui.nuxt.com/pro/prose/code-group
|
||||
target: _blank
|
||||
- value: Docus
|
||||
to: https://docus.dev/api/components#codegroup
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeGroup.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::code-group
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
<div>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
```vue [pages/index.vue]
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome to the homepage</h1>
|
||||
<AppAlert>
|
||||
This is an auto-imported component
|
||||
</AppAlert>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
::
|
||||
|
||||
```mdc
|
||||
::code-group
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
<div>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
```vue [pages/index.vue]
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome to the homepage</h1>
|
||||
<AppAlert>
|
||||
This is an auto-imported component
|
||||
</AppAlert>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
::alert{to="/components/docs/tabs"}
|
||||
`::code-group`{lang="mdc"} is a wrapper around `::tabs{variant="card"}`{lang="mdc"}.
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:field{name="sync" type="string"}[Sync scope for `::tabs`]
|
||||
@@ -1,324 +0,0 @@
|
||||
---
|
||||
title: Code Tree
|
||||
icon: lucide:folder-code
|
||||
badges:
|
||||
- value: 0.8.17
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeTree.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::code-tree{defaultValue="nuxt.config.ts"}
|
||||
|
||||
```css [app/assets/main.css]
|
||||
@import "tailwindcss" theme(static);
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
|
||||
```ts [app/app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'sky',
|
||||
colors: 'slate'
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```vue [app/app.vue]
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
```json [package.json]
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"typecheck": "nuxt typecheck"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/lucide": "^1.2.18",
|
||||
"@nuxt/ui-pro": "3.0.0-alpha.10",
|
||||
"nuxt": "^3.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.2",
|
||||
"vue-tsc": "^2.2.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json [tsconfig.json]
|
||||
{
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
```
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro'],
|
||||
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
|
||||
css: ['~/assets/main.css']
|
||||
});
|
||||
```
|
||||
|
||||
````md [README.md]
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
````
|
||||
|
||||
::
|
||||
::
|
||||
|
||||
`````mdc height=400
|
||||
::code-tree{defaultValue="nuxt.config.ts"}
|
||||
|
||||
```css [app/assets/main.css]
|
||||
@import "tailwindcss" theme(static);
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
|
||||
```ts [app/app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'sky',
|
||||
colors: 'slate'
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```vue [app/app.vue]
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
```json [package.json]
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"typecheck": "nuxt typecheck"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/lucide": "^1.2.18",
|
||||
"@nuxt/ui-pro": "3.0.0-alpha.10",
|
||||
"nuxt": "^3.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.2",
|
||||
"vue-tsc": "^2.2.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json [tsconfig.json]
|
||||
{
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
```
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro'],
|
||||
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
|
||||
css: ['~/assets/main.css']
|
||||
});
|
||||
```
|
||||
|
||||
````md [README.md]
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
````
|
||||
|
||||
::
|
||||
`````
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="defaultValue"}[Default open file]
|
||||
:field{name="title" type="string"}[Code tree title]
|
||||
:field{name="height" type="number" default-value="400"}
|
||||
::
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
title: Field Group
|
||||
icon: lucide:settings-2
|
||||
badges:
|
||||
- value: Nuxt UI Pro
|
||||
to: https://ui.nuxt.com/pro/prose/field-group
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FieldGroup.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::field-group
|
||||
::field{name="withDefault" type="boolean" defaultValue="true"}
|
||||
A field with a default value.
|
||||
::
|
||||
::field{name="requiredField" type="boolean" required}
|
||||
A required field.
|
||||
::
|
||||
::field{name="clear (path?: string)" type="void"}
|
||||
Clears form errors associated with a specific path. If no path is provided, clears all form errors.
|
||||
::
|
||||
::field{name="getErrors (path?: string)" type="FormError[]"}
|
||||
Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
|
||||
::
|
||||
::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
|
||||
Sets form errors for a given path. If no path is provided, overrides all errors.
|
||||
::
|
||||
::field{name="errors" type="Ref<FormError[]>"}
|
||||
A reference to the array containing validation errors. Use this to access or manipulate the error information.
|
||||
::
|
||||
::
|
||||
::
|
||||
|
||||
```mdc
|
||||
::field-group
|
||||
::field{name="withDefault" type="boolean" defaultValue="true"}
|
||||
A field with a default value.
|
||||
::
|
||||
::field{name="requiredField" type="boolean" required}
|
||||
A required field.
|
||||
::
|
||||
::field{name="clear (path?: string)" type="void"}
|
||||
Clears form errors associated with a specific path. If no path is provided, clears all form errors.
|
||||
::
|
||||
::field{name="getErrors (path?: string)" type="FormError[]"}
|
||||
Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
|
||||
::
|
||||
::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
|
||||
Sets form errors for a given path. If no path is provided, overrides all errors.
|
||||
::
|
||||
::field{name="errors" type="Ref<FormError[]>"}
|
||||
A reference to the array containing validation errors. Use this to access or manipulate the error information.
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
title: Field
|
||||
icon: lucide:settings-2
|
||||
badges:
|
||||
- value: Nuxt UI Pro
|
||||
to: https://ui.nuxt.com/pro/prose/field
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Field.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::field{name="Field" type="string" defaultValue="'default'" required}
|
||||
The _description_ can be set as prop or in the default slot with full **markdown** support.
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::field{name="Field" type="string" defaultValue="'default'" required}
|
||||
The _description_ can be set as prop or in the default slot with full **markdown** support.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
The text `required` is configurable in [`main.fieldRequiredText`](/api/configuration/shadcn-docs#main).
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="name" type="string"}[Field name]
|
||||
:field{name="type" type="string"}[Field type]
|
||||
:field{name="description" type="string"}[Field description]
|
||||
:field{name="defaultValue" type="string"}[Field default value]
|
||||
:field{name="required" type="boolean"}[Whether the field is required]
|
||||
::
|
||||
@@ -1,182 +0,0 @@
|
||||
---
|
||||
title: File Tree
|
||||
icon: lucide:folder-tree
|
||||
badges:
|
||||
- value: 0.8.10
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FileTree.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::file-tree
|
||||
---
|
||||
tree:
|
||||
- app:
|
||||
- components:
|
||||
- Header.vue
|
||||
- Footer.vue
|
||||
- composables:
|
||||
- useErrorHandler.ts
|
||||
- ^app.vue^
|
||||
- docs:
|
||||
- index.md
|
||||
---
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::file-tree
|
||||
---
|
||||
tree:
|
||||
- app:
|
||||
- components:
|
||||
- Header.vue
|
||||
- Footer.vue
|
||||
- composables:
|
||||
- useErrorHandler.ts
|
||||
- ^app.vue^ # This is highlighted
|
||||
- docs:
|
||||
- index.md
|
||||
---
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Customizations
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::file-tree
|
||||
---
|
||||
title: File Tree Title
|
||||
icon: lucide:folder-tree
|
||||
autoSlash: false # Whether to add a slash after every folder automatically
|
||||
showArrow: true # Whether to show the guide arrow
|
||||
tree:
|
||||
- components:
|
||||
- layout:
|
||||
- Header.vue
|
||||
- Footer.vue
|
||||
- ...
|
||||
- content:
|
||||
- Accordion.vue
|
||||
- Alert.vue
|
||||
- ProseCode.vue
|
||||
- ...
|
||||
---
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::file-tree
|
||||
---
|
||||
title: File Tree Title
|
||||
icon: lucide:folder-tree
|
||||
autoSlash: false # Whether to add a slash after every folder automatically
|
||||
showArrow: true # Whether to show the collapse arrow
|
||||
tree:
|
||||
- components:
|
||||
- layout:
|
||||
- Header.vue
|
||||
- Footer.vue
|
||||
- ...
|
||||
- content:
|
||||
- Accordion.vue
|
||||
- Alert.vue
|
||||
- ProseCode.vue
|
||||
- ...
|
||||
---
|
||||
::
|
||||
```
|
||||
::
|
||||
### Disable Icons
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::file-tree
|
||||
---
|
||||
showIcon: false
|
||||
tree:
|
||||
- app:
|
||||
- components:
|
||||
- Header.vue
|
||||
- Footer.vue
|
||||
- composables:
|
||||
- useErrorHandler.ts
|
||||
- ^app.vue^
|
||||
- docs:
|
||||
- index.md
|
||||
---
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::file-tree
|
||||
---
|
||||
showIcon: false
|
||||
tree:
|
||||
- app:
|
||||
- components:
|
||||
- Header.vue
|
||||
- Footer.vue
|
||||
- composables:
|
||||
- useErrorHandler.ts
|
||||
- ^app.vue^
|
||||
- docs:
|
||||
- index.md
|
||||
---
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Diff
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::file-tree
|
||||
---
|
||||
showIcon: false
|
||||
tree:
|
||||
- app:
|
||||
- + components:
|
||||
- Header.vue
|
||||
- "- Footer.vue"
|
||||
- composables:
|
||||
- useErrorHandler.ts
|
||||
- ^app.vue^
|
||||
- docs:
|
||||
- index.md
|
||||
---
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::file-tree
|
||||
---
|
||||
showIcon: false
|
||||
tree:
|
||||
- app:
|
||||
- + components:
|
||||
- Header.vue
|
||||
- "- Footer.vue"
|
||||
- composables:
|
||||
- useErrorHandler.ts
|
||||
- ^app.vue^
|
||||
- docs:
|
||||
- index.md
|
||||
---
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="tree"}[The file tree]
|
||||
:field{name="title" type="string"}[File tree title]
|
||||
:field{name="icon" type="string"}[File tree title icon]
|
||||
:field{name="autoSlash" type="boolean" default-value="true"}[Whether to add a slash after every folder automatically]
|
||||
:field{name="showArrow" type="boolean" default-value="false"}[Whether to show the collapse arrow]
|
||||
:field{name="showIcon" type="boolean" default-value="true"}[Whether to show file & folder icons]
|
||||
::
|
||||
@@ -1,94 +0,0 @@
|
||||
---
|
||||
title: Icon
|
||||
icon: lucide:star
|
||||
badges:
|
||||
- value: Docus
|
||||
to: https://docus.dev/api/components#icon
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Icon.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
::alert{to="https://github.com/nuxt-modules/icon" target="_blank"}
|
||||
The icon component uses **Nuxt Icon** under the hood. Check out the usage guide from Nuxt Icon.
|
||||
::
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4 space-x-2"}
|
||||
:icon{name="lucide:box"}
|
||||
:icon{name="vscode-icons:file-type-js-official"}
|
||||
:icon{name="vscode-icons:file-type-vue"}
|
||||
:icon{name="vscode-icons:file-type-nuxt" :size="30"}
|
||||
::
|
||||
|
||||
```mdc
|
||||
:icon{name="lucide:box"}
|
||||
:icon{name="vscode-icons:file-type-js-official"}
|
||||
:icon{name="vscode-icons:file-type-vue"}
|
||||
:icon{name="vscode-icons:file-type-nuxt" :size="30"}
|
||||
```
|
||||
::
|
||||
|
||||
If you want to use other icons, it is highly recommended to install them locally, which is faster and more reliable on both SSR and client-side.
|
||||
|
||||
```bash [Terminal]
|
||||
npm i -D @iconify-json/collection-name
|
||||
```
|
||||
|
||||
`@iconify-json/lucide` and `@iconify-json/vscode-icons` are installed by default.
|
||||
|
||||
### Smart Icon
|
||||
|
||||
:badge[0.5.3]{variant="outline"}
|
||||
|
||||
You can put iconify icons, emojis and urls in `smart-icon`. Smart icon will render them automatically.
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
**Iconify**
|
||||
<div class="space-x-2">
|
||||
|
||||
:smart-icon{name="lucide:box"}
|
||||
:smart-icon{name="vscode-icons:file-type-js-official"}
|
||||
:smart-icon{name="vscode-icons:file-type-vue"}
|
||||
|
||||
</div>
|
||||
|
||||
**Emojis**
|
||||
<div class="space-x-2">
|
||||
|
||||
:smart-icon{name="😍"}
|
||||
:smart-icon{name="🚀"}
|
||||
:smart-icon{name="🎉" :size="30"}
|
||||
|
||||
</div>
|
||||
|
||||
**URL**
|
||||
<div class="space-x-2">
|
||||
|
||||
:smart-icon{name="/logo.svg"}
|
||||
:smart-icon{name="https://vueuse.org/favicon.svg" :size="40"}
|
||||
|
||||
</div>
|
||||
::
|
||||
|
||||
```mdc
|
||||
**Iconify**
|
||||
:smart-icon{name="lucide:box"}
|
||||
:smart-icon{name="vscode-icons:file-type-js-official"}
|
||||
:smart-icon{name="vscode-icons:file-type-vue"}
|
||||
|
||||
**Emojis**
|
||||
:smart-icon{name="😍"}
|
||||
:smart-icon{name="🚀"}
|
||||
:smart-icon{name="🎉" :size="30"}
|
||||
|
||||
**URL**
|
||||
:smart-icon{name="/logo.svg"}
|
||||
:smart-icon{name="https://vueuse.org/favicon.svg" :size="40"}
|
||||
```
|
||||
::
|
||||
@@ -1,82 +0,0 @@
|
||||
---
|
||||
title: Playground
|
||||
icon: lucide:app-window
|
||||
navBadges:
|
||||
- value: New
|
||||
type: lime
|
||||
badges:
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Playground.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
### Stackblitz
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::playground
|
||||
---
|
||||
provider: stackblitz
|
||||
repo: nuxt/starter
|
||||
branch: v3
|
||||
file: app.vue
|
||||
---
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::playground
|
||||
---
|
||||
provider: stackblitz
|
||||
repo: nuxt/starter
|
||||
branch: v3
|
||||
file: app.vue
|
||||
---
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### CodeSandbox
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::playground
|
||||
---
|
||||
provider: codesandbox
|
||||
repo: nuxt/starter
|
||||
branch: v3
|
||||
file: app.vue
|
||||
---
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::playground
|
||||
---
|
||||
provider: codesandbox
|
||||
repo: nuxt/starter
|
||||
branch: v3
|
||||
file: app.vue
|
||||
---
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="provider" type="'stackblitz' | 'codesandbox'"}[Provider to use]
|
||||
:field{name="repo" type="string"}[GitHub repository name (e.g. `nuxt/starter`)]
|
||||
:field{name="branch" type="string" default-value="main"}[Branch name]
|
||||
::field{name="id" type="string"}
|
||||
Repository ID (e.g. for Stackblitz `github-t1vjvm`, for Codesandbox `8hq5qn`)
|
||||
|
||||
::alert{icon="lucide:info" type="info"}
|
||||
You need to provide either `repo` or `id` prop, but not both.
|
||||
::
|
||||
::
|
||||
:field{name="dir" type="string" default-value="''"}[Directory to open in the playground (optional)]
|
||||
:field{name="file" type="string"}[File path to open]
|
||||
:field{name="title" type="string" default-value="Playground"}[Title of the iframe]
|
||||
::
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
title: Read More
|
||||
icon: lucide:bookmark
|
||||
badges:
|
||||
- value: undocs
|
||||
to: https://undocs.pages.dev/guide/components#read-more
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ReadMore.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
:read-more{to="/getting-started/writing/markdown"}
|
||||
:read-more{title="Nuxt website" to="https://nuxt.com/"}
|
||||
:read-more{to="https://nuxt.com/"}
|
||||
:read-more{icon="lucide:link" to="https://nuxt.com/"}
|
||||
::
|
||||
|
||||
```mdc
|
||||
:read-more{to="/getting-started/writing/markdown"}
|
||||
:read-more{title="Nuxt website" to="https://nuxt.com/"}
|
||||
:read-more{to="https://nuxt.com/"}
|
||||
:read-more{icon="lucide:link" to="https://nuxt.com/"}
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="title" type="string"}[Read More title]
|
||||
:field{name="icon" type="string"}[Read More icon]
|
||||
:field{name="to" type="string"}[Link URL]
|
||||
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
|
||||
::
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
title: Stack
|
||||
icon: lucide:rows-3
|
||||
badges:
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Stack.vue
|
||||
target: _blank
|
||||
- value: 0.6.2
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4 md:p-8"}
|
||||
::stack
|
||||
::div{class="p-6 text-3xl font-bold"}
|
||||
✨ shadcn-docs-nuxt
|
||||
::
|
||||
|
||||
```mdc
|
||||
---
|
||||
title: Installation
|
||||
description: How to install shadcn-docs-nuxt in your app.
|
||||
icon: lucide:play
|
||||
---
|
||||
|
||||
## Using the starter template
|
||||
```
|
||||
|
||||
:pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"}
|
||||
|
||||
:read-more{title="Installation" to="/getting-started/installation"}
|
||||
|
||||
::card
|
||||
---
|
||||
title: Components
|
||||
icon: lucide:box
|
||||
---
|
||||
See MDC components provided by **shadcn-docs-nuxt**.
|
||||
::
|
||||
::
|
||||
::
|
||||
|
||||
```mdc
|
||||
::stack
|
||||
::div{class="p-6 text-3xl font-bold"}
|
||||
✨ shadcn-docs-nuxt
|
||||
::
|
||||
|
||||
```mdc
|
||||
---
|
||||
title: Installation
|
||||
description: How to install shadcn-docs-nuxt in your app.
|
||||
icon: lucide:play
|
||||
---
|
||||
|
||||
## Using the starter template
|
||||
```
|
||||
|
||||
:pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"}
|
||||
|
||||
:read-more{title="Installation" to="/getting-started/installation"}
|
||||
|
||||
::card
|
||||
---
|
||||
title: Components
|
||||
icon: lucide:box
|
||||
---
|
||||
See MDC components provided by **shadcn-docs-nuxt**.
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
Stackable components:
|
||||
|
||||
- `div`
|
||||
- Code Blocks
|
||||
- `alert`
|
||||
- `callout`
|
||||
- `read-more`
|
||||
- `code-group`
|
||||
- `code-tree`
|
||||
- `card`
|
||||
- `tabs`
|
||||
- `pm-install`
|
||||
- `pm-run`
|
||||
- `pm-x`
|
||||
@@ -1,148 +0,0 @@
|
||||
---
|
||||
title: Steps
|
||||
icon: lucide:arrow-down-0-1
|
||||
badges:
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Steps.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4 md:p-6"}
|
||||
::steps
|
||||
### Get Starter Template
|
||||
|
||||
::code-group
|
||||
```bash [npm]
|
||||
npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
|
||||
```
|
||||
```bash [pnpm]
|
||||
pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
|
||||
```
|
||||
```bash [bun]
|
||||
bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
|
||||
```
|
||||
::
|
||||
|
||||
::alert
|
||||
Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
|
||||
::
|
||||
|
||||
### Install Dependencies
|
||||
|
||||
::code-group
|
||||
```bash [npm]
|
||||
npm install
|
||||
```
|
||||
```bash [pnpm]
|
||||
pnpm install
|
||||
```
|
||||
```bash [bun]
|
||||
bun install
|
||||
```
|
||||
::
|
||||
|
||||
### Development Server
|
||||
|
||||
::code-group
|
||||
```bash [npm]
|
||||
npm run dev -- -o
|
||||
```
|
||||
```bash [pnpm]
|
||||
pnpm dev -o
|
||||
```
|
||||
```bash [bun]
|
||||
bun run dev -o
|
||||
```
|
||||
::
|
||||
::
|
||||
::
|
||||
```mdc height=400
|
||||
::steps
|
||||
### Get Starter Template
|
||||
|
||||
::code-group
|
||||
```bash [npm]
|
||||
npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
|
||||
```
|
||||
```bash [pnpm]
|
||||
pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
|
||||
```
|
||||
```bash [bun]
|
||||
bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
|
||||
```
|
||||
::
|
||||
|
||||
::alert
|
||||
Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
|
||||
::
|
||||
|
||||
### Install Dependencies
|
||||
|
||||
::code-group
|
||||
```bash [npm]
|
||||
npm install
|
||||
```
|
||||
```bash [pnpm]
|
||||
pnpm install
|
||||
```
|
||||
```bash [bun]
|
||||
bun install
|
||||
```
|
||||
::
|
||||
|
||||
### Development Server
|
||||
|
||||
::code-group
|
||||
```bash [npm]
|
||||
npm run dev -- -o
|
||||
```
|
||||
```bash [pnpm]
|
||||
pnpm dev -o
|
||||
```
|
||||
```bash [bun]
|
||||
bun run dev -o
|
||||
```
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Multi-level headings
|
||||
:badge[0.4.6]{variant="outline"}
|
||||
|
||||
::stack
|
||||
::div{class="p-4 md:p-6"}
|
||||
::steps{:level="5"}
|
||||
##### Specify the level of headings to use
|
||||
|
||||
```mdc
|
||||
::steps{:level="5"}
|
||||
```
|
||||
|
||||
##### Available Headings
|
||||
|
||||
`h1` through `h6`. Defaults to `h3`.
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::steps{:level="5"}
|
||||
##### Multi-level headings
|
||||
|
||||
```mdc
|
||||
::steps{:level="5"}
|
||||
```
|
||||
|
||||
##### Available Headings
|
||||
|
||||
`h1` through `h6`. Defaults to `h3`.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:field{name="level" type="number"}[Specify the level of headings to use]
|
||||
@@ -1,375 +0,0 @@
|
||||
---
|
||||
title: Tabs
|
||||
icon: lucide:table-2
|
||||
badges:
|
||||
- value: Nuxt UI Pro
|
||||
to: https://ui.nuxt.com/pro/prose/tabs
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Tabs.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::tabs
|
||||
::div{label="PostgreSQL" icon="lucide:database"}
|
||||
### PostgreSQL column types
|
||||
|
||||
```ts
|
||||
import { integer, pgTable } from 'drizzle-orm/pg-core';
|
||||
|
||||
export const table = pgTable('table', {
|
||||
int: integer('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="MySQL"}
|
||||
### MySQL column types
|
||||
|
||||
```ts
|
||||
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
|
||||
|
||||
const table = mysqlTable('table', {
|
||||
int: int('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="SQLite"}
|
||||
### SQLite column types
|
||||
|
||||
```ts
|
||||
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
const table = sqliteTable('table', {
|
||||
id: integer('id')
|
||||
});
|
||||
|
||||
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
|
||||
integer('id', { mode: 'number' });
|
||||
integer('id', { mode: 'boolean' });
|
||||
integer('id', { mode: 'timestamp_ms' });
|
||||
integer('id', { mode: 'timestamp' }); // Date
|
||||
```
|
||||
::
|
||||
::
|
||||
::
|
||||
```mdc height=300
|
||||
::tabs
|
||||
::div{label="PostgreSQL" icon="lucide:database"}
|
||||
### PostgreSQL column types
|
||||
|
||||
```ts
|
||||
import { integer, pgTable } from 'drizzle-orm/pg-core';
|
||||
|
||||
export const table = pgTable('table', {
|
||||
int: integer('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="MySQL"}
|
||||
### MySQL column types
|
||||
|
||||
```ts
|
||||
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
|
||||
|
||||
const table = mysqlTable('table', {
|
||||
int: int('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="SQLite"}
|
||||
### SQLite column types
|
||||
|
||||
```ts
|
||||
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
const table = sqliteTable('table', {
|
||||
id: integer('id')
|
||||
});
|
||||
|
||||
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
|
||||
integer('id', { mode: 'number' });
|
||||
integer('id', { mode: 'boolean' });
|
||||
integer('id', { mode: 'timestamp_ms' });
|
||||
integer('id', { mode: 'timestamp' }); // Date
|
||||
```
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Card Style
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::tabs{variant="card"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::tabs{variant="card"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Line Style
|
||||
:badge[0.6.4]{variant="outline"}
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::tabs{variant="line"}
|
||||
::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
|
||||
:badge[Badge]
|
||||
::
|
||||
::div{label="Code"}
|
||||
```tsx
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
||||
export function BadgeDemo() {
|
||||
return <Badge>Badge</Badge>
|
||||
}
|
||||
```
|
||||
::
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::tabs{variant="line"}
|
||||
::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
|
||||
:badge[Badge]
|
||||
::
|
||||
::div{label="Code"}
|
||||
```tsx
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
||||
export function BadgeDemo() {
|
||||
return <Badge>Badge</Badge>
|
||||
}
|
||||
```
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Combobox Style
|
||||
:badge[0.7.5]{variant="outline"}
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
|
||||
::div{label="PostgreSQL"}
|
||||
### PostgreSQL column types
|
||||
|
||||
```ts
|
||||
import { integer, pgTable } from 'drizzle-orm/pg-core';
|
||||
|
||||
export const table = pgTable('table', {
|
||||
int: integer('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="MySQL"}
|
||||
### MySQL column types
|
||||
|
||||
```ts
|
||||
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
|
||||
|
||||
const table = mysqlTable('table', {
|
||||
int: int('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="SQLite"}
|
||||
### SQLite column types
|
||||
|
||||
```ts
|
||||
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
const table = sqliteTable('table', {
|
||||
id: integer('id')
|
||||
});
|
||||
|
||||
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
|
||||
integer('id', { mode: 'number' });
|
||||
integer('id', { mode: 'boolean' });
|
||||
integer('id', { mode: 'timestamp_ms' });
|
||||
integer('id', { mode: 'timestamp' }); // Date
|
||||
```
|
||||
::
|
||||
::
|
||||
::
|
||||
```mdc height=300
|
||||
::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
|
||||
::div{label="PostgreSQL"}
|
||||
### PostgreSQL column types
|
||||
|
||||
```ts
|
||||
import { integer, pgTable } from 'drizzle-orm/pg-core';
|
||||
|
||||
export const table = pgTable('table', {
|
||||
int: integer('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="MySQL"}
|
||||
### MySQL column types
|
||||
|
||||
```ts
|
||||
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
|
||||
|
||||
const table = mysqlTable('table', {
|
||||
int: int('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="SQLite"}
|
||||
### SQLite column types
|
||||
|
||||
```ts
|
||||
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
const table = sqliteTable('table', {
|
||||
id: integer('id')
|
||||
});
|
||||
|
||||
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
|
||||
integer('id', { mode: 'number' });
|
||||
integer('id', { mode: 'boolean' });
|
||||
integer('id', { mode: 'timestamp_ms' });
|
||||
integer('id', { mode: 'timestamp' }); // Date
|
||||
```
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Synced Tabs
|
||||
:badge[0.8.0]{variant="outline"}
|
||||
|
||||
:read-more{to="/components/docs/pm"}
|
||||
|
||||
::stack
|
||||
::div{class="p-4 md:p-8"}
|
||||
#### Scope 1
|
||||
::tabs{variant="card" sync="your-scope-name"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::tabs{variant="card" sync="your-scope-name"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
|
||||
#### Scope 2
|
||||
::tabs{variant="line" sync="scope2"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::tabs{variant="separate" sync="scope2"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::
|
||||
```mdc height=400
|
||||
#### Scope 1
|
||||
::tabs{variant="card" sync="your-scope-name"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::tabs{variant="card" sync="your-scope-name"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
|
||||
#### Scope 2
|
||||
::tabs{variant="line" sync="scope2"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::tabs{variant="separate" sync="scope2"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="variant" type="'separate' | 'card' | 'line' | 'combobox'" default-value="'separate'"}
|
||||
:field{name="padded" type="boolean" default-value="true"}
|
||||
:field{name="disableSearch" type="boolean" default-value="false"}[For combobox variant]
|
||||
:field{name="searchPlaceholder" type="string" default-value="'Search Tab...'"}[For combobox variant]
|
||||
:field{name="searchEmpty" type="string" default-value="'No tab found.'"}[For combobox variant]
|
||||
:field{name="sync" type="string"}[Sync scope]
|
||||
::
|
||||
Reference in New Issue
Block a user