mmdoc

Appearance

页面层级设计规范 ​

该规范用于规范页面元素的层级归属、层级顺序规范

层级 ​

我们规定页面层级为五层

PopOut ​

弹出层，作为内容层和导航层的补充，用于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的 Toast，表单报错提示等弹出内容。

z-index >= 500: 这个层级 z-index 级别最高。

例如: modal、toast、action-sheet 都是这个层级。一般情况下建议

Toast: 600

Modal: 550

ActionSheet: 500

Mask ​

蒙层，配合 Popout 层使用，用于锁定内容层和导航层操作，基本不单独使用。

z-index 499: 由于需要配合 popout 层使用。所以固定 499 即可。

Tooltip ​

提示层。一般用于鼠标或者事件触发后悬浮在内容上对内容做进一步解释说明。

z-index: 300: 使用固定 300 数值

导航层，位于内容层之上，在用户滑动内容层时可保持位置不动，通常用于承载导航栏等需要固定在页面的元素。

z-index: 200: 导航类使用 200 数值

Content ​

内容层，承载页面主要内容。

z-index: 0: 内容层一般情况下。不需要显式的进行声明。默认值为 'auto'

其他 ​

  • 层级在各自范围区域内如果有叠加需求。则在各自范围区域内进行累加。

比如有 AModal 中需要弹出另外一个 BModal.

html
<div class="modal-a">
  <button onClick="showModalB">弹出modalB</button>
</div>

<div class="modal-b">我是modalB</div>
css
.modal-a {
  position: absoulte;
  z-index: 550;
}

.modal-b {
  position: absoulte;
  z-index: 551;
}
  • 禁止出现 zIndex: 999 这样的超大数值