dumi icon indicating copy to clipboard operation
dumi copied to clipboard

feat: demo.FrontMatter 中增加 mobile 属性以手动切换 theme-mobile

Open CJY0208 opened this issue 2 years ago • 4 comments

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')
```

CJY0208 avatar Sep 13 '21 13:09 CJY0208

demo 之间的互动

这个场景如果是指需要正文区域的 A demo 对模拟器区域的 B demo 做互动说明的话,感觉把 A 渲染成 inline demo 更合适

PeachScript avatar Sep 17 '21 03:09 PeachScript

居然有这么个属性 = =,demo 互动的场景下用 inline OK,不过为啥 inline 模式设计为无法查看源码?用户可能会有需求

CJY0208 avatar Sep 17 '21 10:09 CJY0208

没有源码和渲染器的外框才是 inline 👀

PeachScript avatar Sep 17 '21 10:09 PeachScript

如果用户的组件库兼容 PC 与移动端,并需要在一屏内呈现同类型组件的话,demo.frontmatter.mobile 应该依然是有价值的,这样的场景下 inline 可能无法满足需求

CJY0208 avatar Sep 17 '21 10:09 CJY0208