MIP 内置样式

MIP 为所有组件提供了一些常用的样式,避免开发者在编写组件时重复实现。这部分样式会在以后的迭代中逐步完善,敬请开发者们关注。

节点隐藏样式

MIP 设置了 [hidden] { display: none !immportant; } 样式来实现对节点的隐藏,因此对于需要隐藏的节点,只需要添加属性 hidden 即可:

1
<div id="example-node" hidden>看不见我</div>

这样做的好处是,可以通过 example-node.showexample-node.toggleVisibility 等方法控制节点的显示,也可以通过 m-bind:hidden 数据绑定机制进行控制。

一像素边框

针对移动端浏览器在高清屏幕显示中最常见的“一像素边框”问题,MIP 给出了通用的解决方案。开发者只需要引入固定的类名即可绘制出真实的一像素边框。

使用方法

给需要添加边框的元素添加特定的类,如下:

  • mip-border

    声明使用 MIP 提供的边框样式,必须添加

  • mip-border-top

    使用顶部边框。可以和其他方向的边框叠加使用

  • mip-border-bottom

    使用底部边框。可以和其他方向的边框叠加使用

  • mip-border-left

    使用左边边框。可以和其他方向的边框叠加使用

  • mip-border-right

    使用右边边框。可以和其他方向的边框叠加使用

  • mip-border-all

    使用所有方向的边框。

示例

1
2
3
4
5
<!-- 使用四个方向的边框 --> <mip-fixed class="mip-border mip-border-all" type="top"></mip-fixed> <!-- 使用上下方向的边框,可以和其他自定义类配合使用 --> <div class="wrapper mip-border mip-border-top mip-border-bottom"></div>

修改颜色和圆角

默认的边框颜色是 #e1e1e1,没有圆角。但根据业务需求可能会更改两者的属性。

虽然在 MIP 的源码中使用 less 把两者的修改包装成方法可以直接使用,但到开发者的环境中 less 已经变成了 css,因此自然也无法使用方法。我们可以使用 css 属性覆盖的方法解决这个问题。如果开发者使用了如 less, stylus 等 css 框架,也可根据对应框架的特点进行语法精简和改写。

我们以如下的 HTML 进行举例:

1
<div class="wrapper mip-border mip-border-top mip-border-bottom"></div>
  • 修改颜色

    1
    2
    3
    4
    5
    6
    7
    .wrapper { border-color: red; } .wrapper::after { border-color: red; }
  • 修改圆角

    1
    2
    3
    4
    5
    6
    7
    .wrapper { border-radius: 2px; } .wrapper::after { border-radius: 4px; }

    注意因为 scale 的关系,在设置 ::after 伪类时需要将圆角尺寸 乘以 2