dumi
dumi copied to clipboard
feat: demo.FrontMatter 中增加 mobile 属性以手动切换 theme-mobile
Description
部分场景下,期望同一页面中,不同 demo 代码块区分启用 dumi-theme-mobile
以实现更好的 demo 排布和呈现、或者 demo 之间的互动等
Related
#531
Solution
通过在 demo.FrontMatter
中增加 mobile
属性来控制不同 previewer block 对 theme-mobile 的启用情况,如下
# 某文档页 A
### Demo 1
```jsx
export default () => ('📱 Mobile 布局 Demo Block')
```
### Demo 2
```jsx
/**
* mobile: false
*/
export default () => ('💻 常规布局 Demo Block')
```
Config Weight
demo.FrontMatter
权重大于 markdown.FrontMatter
权重
---
mobile: false
---
# 某文档页 B
### Demo 3
```jsx
export default () => ('💻 常规布局 Demo Block')
```
### Demo 4
```jsx
/**
* mobile: true
*/
export default () => ('📱 Mobile 布局 Demo Block')
```
居然有这么个属性 = =,demo 互动的场景下用 inline OK,不过为啥 inline 模式设计为无法查看源码?用户可能会有需求
没有源码和渲染器的外框才是 inline 👀
如果用户的组件库兼容 PC 与移动端,并需要在一屏内呈现同类型组件的话,demo.frontmatter.mobile 应该依然是有价值的,这样的场景下 inline 可能无法满足需求