dumi-theme-default

dumi-theme-mobile

  • 仓库地址: dumi/packages/theme-mobile
  • 体验地址:(缺失)
  • 主题简介: 基于 dumi 默认主题扩展的移动端研发主题,特性如下:
    1. sticky 手机模拟容器 + iframe 预览 demo
    2. 基于 umi-hd 为 demo 预览提供 viewport 和 root font-size 的自动设置
    3. 提供二维码便于真机预览
移动端主题预览效果

需要注意的是,如果使用 rem 的响应式方案,在样式源代码中也要采用 rem 单位,建议参考 antd-mobile 的方案,设置 Less 变量作为基础单位,再根据需要在编译时配置高清变量控制最终渲染值。

高清方案可以在 dumi 配置文件中通过 themeConfig 配置项切换,配置方式如下:

// .umirc.ts
export default {
// ...
themeConfig: {
carrier: 'dumi', // 设备状态栏左侧的文本内容
hd: {
// umi-hd 的 750 高清方案(默认值)
rules: [{ mode: 'vw', options: [100, 750] }],
// 禁用高清方案
rules: [],
// 根据不同的设备屏幕宽度断点切换高清方案
rules: [
{ maxWidth: 375, mode: 'vw', options: [100, 750] },
{ minWidth: 376, maxWidth: 750, mode: 'vw', options: [100, 1500] },
],
// 更多 rule 配置访问 https://github.com/umijs/dumi/blob/1.x/packages/theme-mobile/src/typings/config.d.ts#L7
}
}
}

注:如果希望在启用移动端主题后,在某些页面仍采用默认模式展示组件 demo,可以在 Markdown 的 frontmatter 中设置 mobile: false 切换:

---
mobile: false
---
Markdown 正文

dumi-theme-tuya

虚位以待

如果你创建了不错的 dumi 主题、想分享给大家使用,请将你的主题信息通过 Pull Request 更新到此文档