Demo设置项

Sutras为demo提供了以下设置项，部分配置项支持通过全局配置来设置。支持全局配置的配置项将通过Badge 标注。

标题 仅Demo中配置

用于定义Demo的标题，设置标题后，在文档中将自动呈现一个二级标题，并在文档右侧添加锚点链接。

• 设置项: title
• 类型: string

徽章 仅Demo中配置

用于指定Demo标题旁的徽章badge，效果详见Vitepress

• 设置项: badge
• 类型: string
• 格式: {BadgeType}-{content}

type BadgeType = 'info' | 'tip' | 'warning' | 'danger'

Sutras首先判断你的设置值中是否由{BadgeType}-开头，如果是，Sutras将其余内容视为Badge内容。 否则，Sutras将默认使用'tip'作为你的徽章类型，整个设置值视为Badge内容。

多文件包含 仅Demo中配置

当你的Demo比较复杂时，你可能习惯于将Demo源码拆分为多个文件

• 设置项: includes

• 类型: array

  includes 包含的文件，将与Demo入口文件一同显示在Demo文档中，也支持REPL，详见Demo模块化

展示模式 支持全局配置

用于设置demo展示区的展示模式

• 设置项: defaultPreviewMode

• 类型: 'block' | 'terminal' | 'browser'

  block，browser详见界面模式，terminal 详见终端模式

开启服务端渲染 支持全局配置

用于开启demo服务端渲染(SSR)

• 设置项: enableSSR

• 类型: 'clientOnly' | 'serverOnly' | 'both' | true | false

  详见服务端渲染

默认渲染模式 支持全局配置

用于设置demo开启服务端渲染时，首次渲染方式

• 设置项: defaultRenderMode

• 类型: 'client' | 'server'

  详见默认渲染模式

开启REPL 支持全局配置

如果开启了REPL，将允许你的文档学习者编辑demo代码并预览效果

• 设置项: enableREPL

• 类型: boolean

  详见REPL

展示区风格 支持全局配置

可以设置展示区无边框风格

• 设置项: style

• 类型: 'compact'

  详见展示区边距

展示区背景 支持全局配置

可以设置展示区背景色

• 设置项: background

• 类型: string

  详见展示区背景

展示区高度 支持全局配置

用于设置demo展示区的固定高度

• 设置项: previewHeight

• 类型: 'auto' | number | string

  详见展示区高度

默认折叠代码块 支持全局配置

demo的代码块在界面模式下默认是折叠的，在终端模式下默认是展开的。 你可以通过这个设置项来指定：

• 设置项: defaultCodeCollapse
• 类型: boolean

Default

<template>
  <Space wrap>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </Space>
</template>
<script setup lang="ts">
import { Space, Button } from 'ant-design-vue'
</script>

代码块高亮 仅Demo中配置

Sutras保留了Vitepress的功能，支持你的demo代码行高亮

• 设置项: highlight
• 类型: string

语法详见Vitepress

defaultDevice 支持全局配置

指定demo的默认设备尺寸类型

• 设置项: defaultDevice

• 类型: string

  详见设备尺寸