@aliyun-obv/obviz-cli

Demo 开发说明

Demo 展示使用 vite-plugin-react-pages 插件。

启动

yarn vite-pages

http://localhost:4000/ 为从本地拿数据。

可添加 demo 位置

如下目录的子文件夹中

[
'packages/name/../xxx.mdx',
]

创建新 demo

参考/packages/components/src/easySelect 组件，在子目录 demo 下添加新的组件库 demo 文件，在组件目录中添加 README.mdx 文件。

vite-pages 插件会自动读取 packages 下的所有 README.mdx 文件。

注意：必须为.mdx 后缀名！！！

title: EasySelect
subGroup: general

---

# EasySelect

## Demos

You can import demos like this:

<Demo src="./demo/basic.demo.tsx" />

添加 packages 外的 demo

修改根目录下的 vite.demos.config.ts 的 pages 插件中的读取 README.mdx 文件的字符串匹配方式。

添加上部导航栏

当前路由展示方式为：/packages 下的第一层文件夹为一级路由，即对应上部导航栏的名称。

修改/demos/pages/_theme.tsx 中的 topNavs 配置，添加新的 label 即添加上部导航栏选项。path 为进入该选项的默认路径。activeIfMatch 匹配所有一级路由。

topNavs: [
    {
      label: 'Components',
      path: '/demos/components/easySelect',
      activeIfMatch: {
        path: '/demos/components/:foo',
      }
    },
  ],

添加左侧导航栏

只需在 markdown 文件中修改 subGroup 即可。

---
title: EasySelect
subGroup: Components
order: 10
---

order 为左侧导航的排列顺序

参照 packages/components/src/easySelect/README.mdx，title 为命名，subGroup 为组件分类。