折叠面板与选项卡

NCollapse 与 NTabs 组织内容的两种方式。

折叠面板

为什么选择 VitePress？

基于 Vite，启动与热更新极快；Markdown 中可以直接写 Vue 组件，非常适合组件库文档。

为什么选择 Naive UI？

SSR 是怎么处理的？

<script setup>
import { ref } from 'vue'
import { NCollapse, NCollapseItem } from 'naive-ui'

const expanded = ref(['1'])
</script>

<template>
  <n-collapse v-model:expanded-names="expanded">
    <n-collapse-item title="为什么选择 VitePress？" name="1">
      基于 Vite，启动与热更新极快；Markdown 中可以直接写 Vue 组件，非常适合组件库文档。
    </n-collapse-item>
    <n-collapse-item title="为什么选择 Naive UI？" name="2">
      完整的 Vue 3 组件库，TypeScript 友好，主题通过 ConfigProvider 定制，无 CSS 文件引入负担。
    </n-collapse-item>
    <n-collapse-item title="SSR 是怎么处理的？" name="3">
      通过 @css-render/vue3-ssr 在构建时收集 css-render 生成的样式并内联到 HTML，避免首屏无样式闪烁。
    </n-collapse-item>
  </n-collapse>
</template>

选项卡

简介

安装

更多

VitePress + Naive UI 文档站点示例，展示两者的集成方式。

<script setup>
import { ref } from 'vue'
import { NTabPane, NTabs } from 'naive-ui'

const tab = ref('intro')
</script>

<template>
  <n-tabs v-model:value="tab" type="line" animated>
    <n-tab-pane name="intro" tab="简介">
      VitePress + Naive UI 文档站点示例，展示两者的集成方式。
    </n-tab-pane>
    <n-tab-pane name="install" tab="安装">
      <pre style="margin: 0">npm install
npm run docs:dev</pre>
    </n-tab-pane>
    <n-tab-pane name="more" tab="更多">
      查看左侧「组件示例」分组下的其他页面。
    </n-tab-pane>
  </n-tabs>
</template>