初次提交旧的文档与blog
This commit is contained in:
3
docs/1.简单文档/.navigation.yml
Normal file
3
docs/1.简单文档/.navigation.yml
Normal file
@@ -0,0 +1,3 @@
|
||||
title: 简单文档
|
||||
description: 一个简约但功能强大的开源文档系统
|
||||
icon: lucide-book-open-text
|
||||
237
docs/1.简单文档/1.index.md
Normal file
237
docs/1.简单文档/1.index.md
Normal file
@@ -0,0 +1,237 @@
|
||||
---
|
||||
title: 入门简介
|
||||
description: Estel Docs 是一个基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
|
||||
navigation:
|
||||
icon: lucide-house
|
||||
---
|
||||
|
||||
## 缘起
|
||||
|
||||
使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.
|
||||
于是自己动手，丰衣足食.
|
||||
同时在 Markdown 语法的基础上增加了许多**魔法(自定义组件)**,比如:
|
||||
|
||||
|
||||
::code-group
|
||||
```mdc [index.md]
|
||||
在 Markdown 中使用::card 标签,即可创建一个卡片,卡片里可以放置任何内容。比如以下内容:
|
||||
::card
|
||||
这里是卡片里的内容
|
||||
::
|
||||
```
|
||||
|
||||
```html [Card.vue]
|
||||
<!-- Card组件: components/content/Card.vue -->
|
||||
<template>
|
||||
<div class="p-2 border bg-white dark:bg-black dark:border-gray-700 rounded">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
:::code-preview{icon="i-lucide-eye" label="Preview"}
|
||||
::::example-card
|
||||
这里是卡片里的内容
|
||||
::::
|
||||
:::
|
||||
|
||||
::
|
||||
|
||||
:::UPageCard{icon="lucide-code" title="代码组" description="这个组件使用 自定义的 Markdown 语法,从 Markdown 中提取代码块,并展示在页面上 (而其自身亦是一个卡片组)"}
|
||||
|
||||
::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.
|
||||
````
|
||||
|
||||
::
|
||||
:::
|
||||
|
||||
::code-group
|
||||
```md [搜索.md]
|
||||
#### 此组件打开一个模态搜索框,进行搜索
|
||||
::::example-fulltext-content-search
|
||||
::::
|
||||
|
||||
#### 此组件建立一个mini搜索框,进行搜索
|
||||
::::example-fulltext-mini-search
|
||||
::::
|
||||
```
|
||||
|
||||
:::code-preview{label="预览模态组件" icon="i-lucide-eye"}
|
||||
::::example-fulltext-content-search
|
||||
::::
|
||||
:::
|
||||
:::code-preview{label="预览搜索框组件" icon="i-lucide-eye"}
|
||||
::::example-fulltext-mini-search
|
||||
::::
|
||||
:::
|
||||
|
||||
::
|
||||
|
||||
|
||||
::tip{icon="lucide-info" color="primary" class="text-black dark:text-white"}
|
||||
阅读更多关于 [`自定义组件`](/docs/简单文档/components/api) 的内容.
|
||||
::
|
||||
|
||||
|
||||
## 特性
|
||||
|
||||
- 基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
|
||||
- 完美支持 Markdown 和 相关扩展。
|
||||
- 和 Vue 组件高度集成。
|
||||
- 支持搜索,由Content v3 赋能。
|
||||
- 支持多主题,使用Nuxt UI Pro。
|
||||
- 开源且免费。
|
||||
- 支持移动端。
|
||||
|
||||
## 致谢
|
||||
|
||||
- Nuxt Content：为 Vue 开发者简化内容管理。
|
||||
- Nuxt UI Pro ：文档系统 UI 组件。
|
||||
- Docus：获取灵感及一些文档组件源代码。
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
61
docs/1.简单文档/2.installation.md
Normal file
61
docs/1.简单文档/2.installation.md
Normal file
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: 安装指南
|
||||
description: 安装 Estel Docs
|
||||
navigation:
|
||||
icon: lucide-play
|
||||
---
|
||||
|
||||
|
||||
## 安装与使用
|
||||
|
||||
|
||||
:::steps
|
||||
### 1. 获取项目
|
||||
|
||||
```bash
|
||||
git clone https://github.com/estle-li/estel_docs.git
|
||||
```
|
||||
|
||||
::tip
|
||||
或者，您也可以从 [GitHub 仓库](https://github.com/estle-li/estel_docs) 克隆或下载该模板。
|
||||
::
|
||||
|
||||
### 导航到项目目录
|
||||
|
||||
```bash
|
||||
cd [project-name]
|
||||
```
|
||||
|
||||
### 编译项目
|
||||
|
||||
::::code-group
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm i && pnpm dev
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn install && yarn dev
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install && npm run dev
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun install && bun dev
|
||||
```
|
||||
::::
|
||||
|
||||
|
||||
::tip
|
||||
做得好！浏览器窗口应会自动打开，访问 http://localhost:3000。
|
||||
::
|
||||
|
||||
### 配置系统
|
||||
|
||||
选择主题或根据个人喜好调整其他设置。
|
||||
|
||||
:read-more{to="/"}
|
||||
|
||||
:::
|
||||
2
docs/1.简单文档/3.writing/.navigation.yml
Normal file
2
docs/1.简单文档/3.writing/.navigation.yml
Normal file
@@ -0,0 +1,2 @@
|
||||
title: 开始写作
|
||||
icon: lucide:edit
|
||||
83
docs/1.简单文档/3.writing/1.markdown.md
Normal file
83
docs/1.简单文档/3.writing/1.markdown.md
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
title: Markdown
|
||||
description: 如何使用MDC语法编写文档。
|
||||
navigation:
|
||||
icon: lucide:arrow-big-down
|
||||
|
||||
---
|
||||
|
||||
::card-group
|
||||
::card
|
||||
---
|
||||
title: MDC语法
|
||||
to: https://content.nuxt.com/docs/files/markdown#mdc-syntax
|
||||
target: _blank
|
||||
icon: lucide:arrow-big-down
|
||||
---
|
||||
在**Nuxt Content**文档中阅读详细的MDC使用指南。
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: 组件
|
||||
to: /components/prose
|
||||
icon: lucide:box
|
||||
---
|
||||
查看**shadcn-docs-nuxt**提供的MDC组件。
|
||||
::
|
||||
::
|
||||
|
||||
## VS Code集成
|
||||
|
||||
### MDC扩展
|
||||
|
||||
[Nuxt MDC](https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc)是一个VS Code扩展，为MDC语法提供语法高亮和自动完成功能。
|
||||
|
||||
启动VS Code快速打开 :shortcut{value="Ctrl"} + :shortcut{value="P"}，粘贴以下命令，然后按回车。
|
||||
|
||||
```bash [shell]
|
||||
ext install Nuxt.mdc
|
||||
```
|
||||
|
||||
### 启用组件元数据自动完成
|
||||
|
||||
::alert
|
||||
需要 `Nuxt.mdc >= 0.3.1`
|
||||
::
|
||||
|
||||
::steps{:level="4"}
|
||||
#### VSCode设置
|
||||
|
||||
```json [.vscode/settings.json] line-numbers
|
||||
{
|
||||
"mdc.enableComponentMetadataCompletions": true // [!code ++]
|
||||
}
|
||||
```
|
||||
|
||||
#### 安装 `nuxt-component-meta` 模块
|
||||
|
||||
将nuxt-component-meta依赖添加到您的项目中：
|
||||
|
||||
:pm-install{name="nuxt-component-meta"}
|
||||
|
||||
将nuxt-component-meta添加到nuxt.config.ts的modules部分，并可选择配置模块：
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['nuxt-component-meta'],
|
||||
});
|
||||
```
|
||||
|
||||
一旦您的项目构建完成或在开发服务器上运行，扩展将自动扫描您的项目以获取组件元数据，并根据发现的组件提供建议，无需额外配置。
|
||||
::
|
||||
|
||||
## 技巧
|
||||
|
||||
### 从目录中隐藏标题
|
||||
:badge[0.4.7]{variant="outline"}
|
||||
|
||||
将标题的 `id` 设置为 `hide-toc` 将从目录中隐藏该标题。
|
||||
|
||||
```mdc
|
||||
:h2[脚注]{id="hide-toc"}
|
||||
```
|
||||
109
docs/1.简单文档/3.writing/2.pages.md
Normal file
109
docs/1.简单文档/3.writing/2.pages.md
Normal file
@@ -0,0 +1,109 @@
|
||||
---
|
||||
title: 页面
|
||||
description: Estel Docs 中使用的front matter属性。
|
||||
navigation:
|
||||
icon: lucide:file-text
|
||||
---
|
||||
|
||||
```md
|
||||
---
|
||||
title: Front Matter
|
||||
description: Estel Dsoc中使用的front matter属性。
|
||||
icon: lucide:book-type
|
||||
|
||||
navBadges:
|
||||
- value: New
|
||||
type: lime
|
||||
|
||||
authors:
|
||||
- name: Tony Zhang
|
||||
username: ZTL-UwU
|
||||
avatar: https://www.github.com/ZTL-UwU.png
|
||||
to: https://github.com/ZTL-UwU
|
||||
target: _blank
|
||||
---
|
||||
```
|
||||
|
||||
## 展示
|
||||
|
||||
:::tabs{variant="line"}
|
||||
::stack{label="badges"}
|
||||
|
||||
```yml
|
||||
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
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="authors"}
|
||||
|
||||
```yml
|
||||
authors:
|
||||
- name: Tony Zhang
|
||||
username: ZTL-UwU
|
||||
avatar: https://www.github.com/ZTL-UwU.png
|
||||
to: https://github.com/ZTL-UwU
|
||||
target: _blank
|
||||
```
|
||||
::
|
||||
|
||||
::stack{label="navBadges"}
|
||||
|
||||
```yml
|
||||
navBadges:
|
||||
- value: New
|
||||
type: lime
|
||||
```
|
||||
::
|
||||
:::
|
||||
|
||||
## 参数
|
||||
|
||||
::field-group
|
||||
::field{name="title" type="string"}
|
||||
页面标题。默认为文件名。
|
||||
::
|
||||
::field{name="description" type="string"}
|
||||
页面描述。默认为页面的第一个 `<p>`{lang="html"}。
|
||||
::
|
||||
::field{name="navigation" type="boolean" default-value="true"}
|
||||
定义页面是否包含在侧边栏中。在 `index.md` 中设置为 `false`。
|
||||
::
|
||||
::field{name="icon" type="string"}
|
||||
在侧边栏中为页面显示的图标。
|
||||
::
|
||||
::field{name="navBadges" type="[]"}
|
||||
附加到侧边栏链接末尾的徽章列表。
|
||||
::
|
||||
::field{name="navTruncate" type="boolean" default-value="true"}
|
||||
是否截断侧边栏标题。
|
||||
::
|
||||
::field{name="badges" type="[]"}
|
||||
显示在页面标题底部的徽章列表。
|
||||
::
|
||||
::field{name="authors" type="[]"}
|
||||
显示在页面标题底部的作者列表。
|
||||
::
|
||||
::field{name="toc" type="boolean" default-value="true"}
|
||||
是否为此页面显示目录部分。
|
||||
::
|
||||
::field{name="aside" type="boolean" default-value="true"}
|
||||
是否为此页面显示侧边栏部分。
|
||||
::
|
||||
::field{name="editLink" type="boolean" default-value="true"}
|
||||
是否为此页面显示编辑链接。
|
||||
::
|
||||
::field{name="prevNext" type="boolean" default-value="true"}
|
||||
是否显示上一页和下一页按钮。
|
||||
::
|
||||
::field{name="breadcrumb" type="boolean" default-value="true"}
|
||||
是否显示面包屑导航。
|
||||
::
|
||||
::field{name="fullpage" type="boolean" default-value="false"}
|
||||
是否使用像主页一样的全页面布局。[示例](/简单文档/writing/full-page-example)。
|
||||
::
|
||||
::
|
||||
57
docs/1.简单文档/3.writing/3.folders.md
Normal file
57
docs/1.简单文档/3.writing/3.folders.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: 目录
|
||||
description: 通过 YML 文件配置目录节点。
|
||||
navigation:
|
||||
icon: lucide:folder
|
||||
---
|
||||
|
||||
You can customize folders by creating a `_dir.yml` file in the folder.
|
||||
|
||||
::code-group
|
||||
```yml [_dir.yml]
|
||||
title: Folder
|
||||
icon: lucide:folder
|
||||
navigation.redirect: /frameworks/vue
|
||||
navBadges:
|
||||
- value: New
|
||||
type: lime
|
||||
sidebar:
|
||||
style: group
|
||||
collapse: false
|
||||
```
|
||||
```[Directory structure]
|
||||
content/
|
||||
1.frameworks/
|
||||
_dir.yml
|
||||
1.vue.md
|
||||
2.nuxt.md
|
||||
```
|
||||
::
|
||||
|
||||
## Parameters
|
||||
|
||||
::field-group
|
||||
::field{name="title" type="string"}
|
||||
Title of the page. Defaults to the filename.
|
||||
::
|
||||
::field{name="icon" type="string"}
|
||||
The icon shown in the sidebar for the page.
|
||||
::
|
||||
::field{name="navBadges" type="[]"}
|
||||
A list of badges appended to the end of the sidebar link.
|
||||
::
|
||||
::field{name="collapse" type="boolean"}
|
||||
Whether the folder should be collapsed by default.
|
||||
::
|
||||
::field{name="sidebar" type="object"}
|
||||
::collapsible{title="Details" default-open}
|
||||
::field{name="style" type="'default' | 'tree' | 'group'" default-value="default"}
|
||||
The style used for the folder. The default value can be configured in the [appConfig](/api/configuration/shadcn-docs#aside).
|
||||
|
||||
| `default` | `tree` | `group` |
|
||||
| :-------------------------------------------------: | :-------------------------------------------: | :---------------------------------------------: |
|
||||
| {width=400} | {width=400} | {width=400} |
|
||||
::
|
||||
::
|
||||
::
|
||||
::
|
||||
9
docs/1.简单文档/3.writing/4.full-page-example.md
Normal file
9
docs/1.简单文档/3.writing/4.full-page-example.md
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: 单页面示例
|
||||
description: 全页面示例
|
||||
fullpage: true
|
||||
navigation:
|
||||
icon: lucide:layout-template
|
||||
---
|
||||
|
||||
写作ing...
|
||||
49
docs/1.简单文档/4.deployment.md
Normal file
49
docs/1.简单文档/4.deployment.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: 部署服务
|
||||
description: 部署你的 Estel Docs 应用。
|
||||
navigation:
|
||||
icon: lucide:cloud
|
||||
---
|
||||
|
||||
## 静态托管
|
||||
|
||||
::steps{:level="4"}
|
||||
#### 在 `nuxt.config.ts` 或 `.env` 中配置 `site.url`
|
||||
|
||||
OG Images 必须使用绝对 URL 提供服务，您需要提供一个站点 URL。
|
||||
|
||||
::code-group
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
site: {
|
||||
url: 'https://example.com',
|
||||
},
|
||||
});
|
||||
```
|
||||
```dotenv [.env]
|
||||
NUXT_SITE_URL=https://example.com
|
||||
```
|
||||
::
|
||||
|
||||
#### 运行生成命令
|
||||
:pm-run{script="generate"}
|
||||
|
||||
::alert{icon="lucide:triangle"}
|
||||
在 Vercel 上，在**构建和开发设置**中将**构建命令**设置为 `nuxt generate`。
|
||||
::
|
||||
|
||||
#### 部署
|
||||
您现在可以将 `.output/public` 目录部署到任何静态托管服务，或使用 `npx serve .output/public` 在本地预览。
|
||||
::
|
||||
|
||||
## SSR 服务器
|
||||
|
||||
::steps{:level="4"}
|
||||
#### 运行构建命令
|
||||
:pm-run{script="build"}
|
||||
|
||||
#### 部署
|
||||
```shell
|
||||
node .output/server/index.mjs
|
||||
```
|
||||
::
|
||||
2
docs/1.简单文档/5.components/.navigation.yml
Normal file
2
docs/1.简单文档/5.components/.navigation.yml
Normal file
@@ -0,0 +1,2 @@
|
||||
title: 组件特性
|
||||
icon: lucide:box
|
||||
82
docs/1.简单文档/5.components/1.API.md
Normal file
82
docs/1.简单文档/5.components/1.API.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
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.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
158
docs/1.简单文档/5.components/alert.md
Normal file
158
docs/1.简单文档/5.components/alert.md
Normal file
@@ -0,0 +1,158 @@
|
||||
---
|
||||
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"}]
|
||||
::
|
||||
125
docs/1.简单文档/5.components/badge.md
Normal file
125
docs/1.简单文档/5.components/badge.md
Normal file
@@ -0,0 +1,125 @@
|
||||
---
|
||||
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]
|
||||
::
|
||||
53
docs/1.简单文档/5.components/button-link.md
Normal file
53
docs/1.简单文档/5.components/button-link.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
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'`]
|
||||
::
|
||||
16
docs/1.简单文档/5.components/callout.md
Normal file
16
docs/1.简单文档/5.components/callout.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
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"}.
|
||||
::
|
||||
175
docs/1.简单文档/5.components/card-group.md
Normal file
175
docs/1.简单文档/5.components/card-group.md
Normal file
@@ -0,0 +1,175 @@
|
||||
---
|
||||
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)]
|
||||
::
|
||||
173
docs/1.简单文档/5.components/card.md
Normal file
173
docs/1.简单文档/5.components/card.md
Normal file
@@ -0,0 +1,173 @@
|
||||
---
|
||||
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"}]
|
||||
::
|
||||
77
docs/1.简单文档/5.components/code-group.md
Normal file
77
docs/1.简单文档/5.components/code-group.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
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`]
|
||||
324
docs/1.简单文档/5.components/code-tree.md
Normal file
324
docs/1.简单文档/5.components/code-tree.md
Normal file
@@ -0,0 +1,324 @@
|
||||
---
|
||||
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"}
|
||||
::
|
||||
62
docs/1.简单文档/5.components/field-group.md
Normal file
62
docs/1.简单文档/5.components/field-group.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
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.
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
39
docs/1.简单文档/5.components/field.md
Normal file
39
docs/1.简单文档/5.components/field.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
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]
|
||||
::
|
||||
182
docs/1.简单文档/5.components/file-tree.md
Normal file
182
docs/1.简单文档/5.components/file-tree.md
Normal file
@@ -0,0 +1,182 @@
|
||||
---
|
||||
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]
|
||||
::
|
||||
94
docs/1.简单文档/5.components/icon.md
Normal file
94
docs/1.简单文档/5.components/icon.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
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"}
|
||||
```
|
||||
::
|
||||
82
docs/1.简单文档/5.components/playground.md
Normal file
82
docs/1.简单文档/5.components/playground.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
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]
|
||||
::
|
||||
39
docs/1.简单文档/5.components/read-more.md
Normal file
39
docs/1.简单文档/5.components/read-more.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
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]
|
||||
::
|
||||
89
docs/1.简单文档/5.components/stack.md
Normal file
89
docs/1.简单文档/5.components/stack.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
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`
|
||||
148
docs/1.简单文档/5.components/steps.md
Normal file
148
docs/1.简单文档/5.components/steps.md
Normal file
@@ -0,0 +1,148 @@
|
||||
---
|
||||
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]
|
||||
375
docs/1.简单文档/5.components/tabs.md
Normal file
375
docs/1.简单文档/5.components/tabs.md
Normal file
@@ -0,0 +1,375 @@
|
||||
---
|
||||
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