主题色 灰色 夜间模式组件大小小(1) 中(2) 大(3) 组件圆角 组件缩放90% 95% 100% 105% 110%
none
small
medium
large
full
每个组件的文档中都含有多个如下的示例
vue
, react
, react-dom
, react-dom/client
, @lun/components
, @lun/core
, @lun/utils
, @lun/react
, data
, import其他内容会直接报错绝大部分示例都只编写了 vue 的版本,没时间.jpg
文档存放于src/docs
目录下,每篇文档都由一个包含index.md
的文件夹组成,这个文件夹的路径即为 url 路径。在这个文件夹中,每个不同语言的代码示例都有分别放置在不同的文件中,它们必须使用同一文件名加不同后缀以便于区分。
以button的文档为例,src/components/button
下
basicUsage.vue.tsx
代表 Vue TSX 示例basicUsage.react.tsx
代表 React 示例basicUsage.html
代表 HTML 示例然后在 index.md
中,我们需要以<!-- @Code:basicUsage -->
注释来引入这些示例。
注意,必须编写Vue的代码示例。由于esbuild加载需要时间,为避免明显的白屏时间,内部会直接引入这些Vue的代码示例并展示它们。当esbuild加载完毕后,若用户修改源代码或切换示例语言,便渲染动态生成的用例