> AI coding agents: see [/llms.txt](/llms.txt) for the full documentation index. Markdown version: [/docs/manual/zh/essentials/components.md](/docs/manual/zh/essentials/components.md).

---
title: Markdown 组件
description: 使用 Markdown 组件借助 Nuxt UI 来结构化您的内容。
navigation:
  icon: i-lucide-component
  title: 组件
---

Prose 组件是 HTML 排版标签的替代品。它们提供了一种在使用 Markdown 时自定义 UI 的简单方式。

**TockDocs 和 Nuxt UI** 提供了一套样式美观的 prose 组件，帮助您使用 [MDC 语法](https://content.nuxt.com/docs/files/markdown#mdc-syntax)编写文档。

::note{to="https://ui.nuxt.com/getting-started"}
本页仅重点介绍最适合编写文档的 prose 组件。但是，您可以在 Markdown 中使用**任何 Nuxt UI 组件**。有关所有可用组件的完整列表，请访问 Nuxt UI 文档。
::

### `Accordion`（手风琴）

使用 `accordion` 和 `accordion-item` 组件在内容中显示[手风琴](https://ui.nuxt.com/components/accordion)。

::tabs
  :::tabs-item{icon="i-lucide-eye" label="预览"}
    ::::accordion
      :::::accordion-item
      ---
      icon: i-lucide-circle-help
      label: 什么是 TockDocs，它的主要功能是什么？
      ---
      TockDocs 是一个基于 Nuxt UI 构建的全集成文档解决方案。它是一个基于 UI 文档模板的主题，提供即用型视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。
      :::::

      :::::accordion-item
      ---
      icon: i-lucide-circle-help
      label: 如何开始使用 TockDocs？
      ---
      开始 TockDocs 项目所需的只是一个 `content/` 文件夹。您可以查看起步模板以快速入门。
      :::::

      :::::accordion-item{icon="i-lucide-circle-help" label="什么是 Nuxt UI？"}
      [Nuxt UI](https://ui.nuxt.com/) 是一系列优质 Vue 组件、组合式函数和工具的集合。
      :::::
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="代码"}
  ```mdc
  ::accordion

  :::accordion-item{label="什么是 TockDocs，它的主要功能是什么？" icon="i-lucide-circle-help"}
  TockDocs 是一个基于 Nuxt UI 构建的全集成文档解决方案。它是一个基于 UI 文档模板的主题，提供即用型视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。
  :::

  :::accordion-item{label="如何开始使用 TockDocs？" icon="i-lucide-circle-help"}
  开始 TockDocs 项目所需的只是一个 `content/` 文件夹。您可以查看起步模板以快速入门。
  :::

  :::accordion-item{label="什么是 Nuxt UI？" icon="i-lucide-circle-help"}
  [Nuxt UI](https://ui.nuxt.com/) 是一系列优质 Vue 组件、组合式函数和工具的集合。
  :::
  ::
  ```
  :::
::

### `Badge`（徽章）

在 `badge` 组件的默认插槽中使用 Markdown，在内容中显示[徽章](https://ui.nuxt.com/components/badge)。

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="预览"}
    ::::badge
    **v3.0.0**
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="代码"}
  ```mdc
  ::badge
  **v3.0.0**
  ::
  ```
  :::
::

### `Callout`（提示框）

在 `callout` 组件的默认插槽中使用 Markdown，为您的内容添加引人注目的上下文。

使用 `icon` 和 `color` 属性来自定义它。您还可以传递 `<NuxtLink>` 组件的任何属性。

您还可以使用带有预定义图标和颜色的 `note`、`tip`、`warning` 和 `caution` 快捷方式。

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="预览"}
    ::::div{.flex.flex-col.gap-4.w-full}
      :::::note{.w-full.my-0}
      这里是一些额外的信息。
      :::::

      :::::tip{.w-full.my-0}
      这里是一个有用的建议。
      :::::

      :::::warning{.w-full.my-0}
      请谨慎执行此操作，因为它可能会产生意外结果。
      :::::

      :::::caution{.w-full.my-0}
      此操作无法撤销。
      :::::
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="代码"}
  ```mdc
  ::note
  这里是一些额外的信息。
  ::

  ::tip
  这里是一个有用的建议。
  ::

  ::warning
  请谨慎执行此操作，因为它可能会产生意外结果。
  ::

  ::caution
  此操作无法撤销。
  ::
  ```
  :::
::

### `Card` 和 `CardGroup`（卡片与卡片组）

在 `card` 组件的默认插槽中使用 Markdown 来突出显示您的内容。

使用 `title`、`icon` 和 `color` 属性来自定义它。您还可以传递 `<NuxtLink>` 的任何属性。

用 `card-group` 组件包裹您的 `card` 组件，将它们以网格布局分组。

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="预览"}
    ::::card-group{.w-full.my-0}
      :::::card
      ---
      icon: i-simple-icons-github
      target: _blank
      title: Dashboard
      to: https://github.com/nuxt-ui-templates/dashboard
      ---
      一个多列布局的仪表板。
      :::::

      :::::card
      ---
      icon: i-simple-icons-github
      target: _blank
      title: SaaS
      to: https://github.com/nuxt-ui-templates/saas
      ---
      一个包含首页、定价、文档和博客的模板。
      :::::

      :::::card
      ---
      icon: i-simple-icons-github
      target: _blank
      title: Docs
      to: https://github.com/nuxt-ui-templates/docs
      ---
      一个使用 `@nuxt/content` 的文档模板。
      :::::

      :::::card
      ---
      icon: i-simple-icons-github
      target: _blank
      title: Landing
      to: https://github.com/nuxt-ui-templates/landing
      ---
      一个您可以用作起点的首页模板。
      :::::
    ::::
  :::

  :::tabs-item{.my-5 icon="i-lucide-code" label="代码"}
  ```mdc
  :::card-group

  ::card
  ---
  title: Dashboard
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/dashboard
  target: _blank
  ---
  一个多列布局的仪表板。
  ::

  ::card
  ---
  title: SaaS
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/saas
  target: _blank
  ---
  一个包含首页、定价、文档和博客的模板。
  ::

  ::card
  ---
  title: Docs
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/docs
  target: _blank
  ---
  一个使用 `@nuxt/content` 的文档模板。
  ::

  ::card
  ---
  title: Landing
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/landing
  target: _blank
  ---
  一个您可以用作起点的首页模板。
  ::

  :::
  ```
  :::
::

### `Collapsible`（可折叠）

用 `collapsible` 组件包裹您的内容，在内容中显示[可折叠区域](https://ui.nuxt.com/components/collapsible)。

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="预览"}
    ::::collapsible
    | 属性   | 默认值    | 类型     |
    | ------ | --------- | -------- |
    | `name` |           | `string` |
    | `size` | `md`      | `string` |
    | `color`| `neutral` | `string` |
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="代码"}
  ```mdc
  ::collapsible

  | 属性   | 默认值    | 类型                     |
  |--------|----------|--------------------------|
  | `name` |          | `string`{lang="ts-type"} |
  | `size` | `md`     | `string`{lang="ts-type"} |
  | `color`| `neutral`| `string`{lang="ts-type"} |

  ::
  ```
  :::
::

### `Field` 和 `FieldGroup`（字段与字段组）

`field` 是显示在内容中的属性或参数。您可以通过 `field-group` 将它们分组为列表。

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="预览"}
    ::::field-group{.my-0}
      :::::field{name="analytics" type="boolean"}
      默认值 `false` - 为您的项目启用分析功能（即将推出）。
      :::::

      :::::field{name="blob" type="boolean"}
      默认值 `false` - 启用 Blob 存储来存储静态资源，如图像、视频等。
      :::::

      :::::field{name="cache" type="boolean"}
      默认值 `false` - 启用缓存存储，使用 Nitro 的 `cachedEventHandler` 和 `cachedFunction` 缓存服务器路由响应或函数。
      :::::

      :::::field{name="database" type="boolean"}
      默认值 `false` - 启用 SQL 数据库来存储应用数据。
      :::::
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="代码"}
  ```mdc
  ::field-group
    ::field{name="analytics" type="boolean"}
      默认值 `false` - 为您的项目启用分析功能（即将推出）。
    ::

  ::field{name="blob" type="boolean"}
    默认值 `false` - 启用 Blob 存储来存储静态资源，如图像、视频等。
  ::

  ::field{name="cache" type="boolean"}
    默认值 `false` - 启用缓存存储，使用 Nitro 的 `cachedEventHandler` 和 `cachedFunction` 缓存服务器路由响应或函数。
  ::

  ::field{name="database" type="boolean"}
    默认值 `false` - 启用 SQL 数据库来存储应用数据。
  ::
  ::
  ```
  :::
::

### `Icon`（图标）

使用 `icon` 组件在内容中显示[图标](https://ui.nuxt.com/components/icon)。

::code-preview
:icon{name="i-simple-icons-nuxtdotjs"}

#code
```mdc
:icon{name="i-simple-icons-nuxtdotjs"}
```
::

### `Kbd`（键盘按键）

使用 `kbd` 组件在内容中显示[键盘按键](https://ui.nuxt.com/components/kbd)。

::code-preview
#code
```mdc
:kbd{value="meta"} :kbd{value="K"}
```
::

### `Tabs`（标签页）

使用 `tabs` 和 `tabs-item` 组件在内容中显示[标签页](https://ui.nuxt.com/components/tabs)。

::code-preview
  :::tabs{.w-full}
    ::::tabs-item{icon="i-lucide-code" label="代码"}
    ```mdc
    ::callout
    Lorem velit voluptate ex reprehenderit ullamco et culpa.
    ::
    ```
    ::::

    ::::tabs-item{icon="i-lucide-eye" label="预览"}
      :::::callout
      Lorem velit voluptate ex reprehenderit ullamco et culpa.
      :::::
    ::::
  :::

#code
````mdc
::tabs{.w-full}
  :::tabs-item{icon="i-lucide-code" label="代码"}
    ```mdc
    ::::callout
    Lorem velit voluptate ex reprehenderit ullamco et culpa.
    ::::
    ```
  ::::

:::tabs-item{icon="i-lucide-eye" label="预览"}
  :::::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  :::::
:::
::
````
::

### `Steps`（步骤）

用 Steps 组件包裹您的标题以显示步骤列表。

使用 `level` 属性来定义步骤使用哪级标题。

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="预览"}
    ::::steps{level="4"}
    #### 创建一个全新的项目

    ```bash [Terminal]
    npm create nuxt@latest -- -t github:taowang1993/tockdocs
    ```

    #### 启动 Nuxt 开发服务器

    ```bash [Terminal]
    npm run dev
    ```
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="代码"}
  ````mdc
  ::steps{level="4"}
    #### 创建一个全新的项目
    
    ```bash [Terminal]
    npm create nuxt@latest -- -t github:taowang1993/tockdocs
    ```
    
    #### 启动 Nuxt 开发服务器
    
    ```bash [Terminal]
    npm run dev
    ```
  ::
  ````
  :::
::