Demo 研发

Ant Design Style Dumi Theme

指南

配置

介绍: 简介; 进展

特性: Builtin 内置组件; 目录 Toc; 页面 Tab

进阶特性: Demo 研发; Theme 主题; SyntaxHighlighter 代码高亮; ApiHeader API 概要

页面 Tab

Theme 主题

Demo 研发

本主题包下，demo 会自动响应站点亮暗色模式（themeMode = auto），并默认使用 antd 原本的亮暗色主题。

默认的 antd 主题

默认情况下， Demo 与文档站的主题互相隔离，Demo 使用 antd 默认的主题

锁定亮色主题

指定 appearance=light ，将会锁定亮色主题，用户也无法切换

如果需要控制单个 demo 是否继承文档站的主题，可以通过 demo 元数据的 inheritSiteTheme字段配置。

继承站点主题的 antd 组件

添加 inheritSiteTheme: true，可以让 Demo 继承文档站主题

如果需要让站点的主题全部都跟随 demo 的主题，可以通过添加 siteToken: { demoInheritSiteTheme: true } 属性来指定。详细可以查看：siteToken 配置介绍

自定义方向

通过在 demo 元数据中添加 codePlacement 属性，可以控制预览器的代码展开方向。

设置 codePlacement:left ，可以让代码展示在预览器左侧。

index.tsx

Antd.tsx

tsx

设置 codePlacement:top ，可以让代码展示在预览器上方。

index.tsx

Antd.tsx

tsx

设置 codePlacement:right ，可以让代码展示在预览器右侧。

index.tsx

Antd.tsx

tsx

INFO

设置 codePlacement 时，建议搭配设置 defaultShowCode: true

Table of Contents

Table of Contents

Demo 研发

默认的 antd 主题

锁定亮色主题

继承站点主题的 antd 组件

自定义方向

Demo 研发

默认的 antd 主题

锁定亮色主题

继承站点主题的 antd 组件

自定义方向