MIP 快捷样式

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

一像素边框

针对移动端浏览器在高清屏幕显示中最常见的“一像素边框”问题，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。