组件布局

编辑

MIP 组件支持的各种布局,可以让图片屏幕自适应、定高等。用于预先给组件确定占位,防止组件内容加载后撑开页面,造成页面内容抖动,浏览器重排重绘,简称为 layout

支持的布局种类

类别强制 width强制 height详细说明
responsive能够根据 widthheight 的值,算出元素对应的比例,在不同屏幕宽度上做自适应,非常适合图片、视频等需要大小自适应的组件
fixed-height元素的高度固定,width 缺省或者取值为 auto ,比较适合 mip-carousel
fixed元素根据 widthheight 固定高宽,不随屏幕宽度变化
flex-item元素通过 flex 进行布局,需设置父元素为 display: flex
fill元素的大小根据父节点的大小自动撑开
container元素的高度由子节点高度决定,相当于 display: block
nodisplay元素不展现,即 display: none ,这种元素可由用户点击触发显示,也可以应用于统计组件

使用方法

MIP 元素添加属性 layout,取值参照上面的种类,如:

<mip-img
    layout="responsive"
    width="350"
    height="263"
    src="/doc/image/layout/img.jpg">
</mip-img>

layout 详解

1. responsive

  • 布局介绍:使用 layout="responsive" 的组件能够根据 widthheight 的值,算出元素对应的比例,在不同屏幕宽度上做自适应。
  • 适用场景:图片视频图片轮播等需要按比例自动缩放的元素。
  • 代码示例:

    <mip-img
      layout="responsive"
      width="350"
      height="263"
      src="/doc/image/layout/img.jpg">
    </mip-img>
  • 使用效果:

2. fixed-height

  • 布局介绍:使用 layout="fixed-height" 的组件高度固定,不随屏幕大小变化。width 缺省或者取值为 auto
  • 适用场景:高度固定的广告位音频播放组件mip-fixed悬浮组件
  • 代码示例:

    <mip-img
      layout="fixed-height"
      height="263"
      src="/doc/image/layout/img.jpg">
    </mip-img>
  • 使用效果:

3. fixed

  • 布局介绍:使用 layout="fixed" 的组件宽高固定,根据 widthheight 取值(px)固定宽高,元素尺寸不随屏幕大小变化。
  • 适用场景:头像图片表情GIF后退按钮 等有固定大小的元素。
  • 代码示例:

    <mip-img
      layout="fixed"
      width="350"
      height="263"
      src="/doc/image/layout/img.jpg">
    </mip-img>
  • 使用效果:

4. flex-item

  • 布局介绍:使用 layout="flex-item" 的组件通过 flex 进行布局,需设置父元素为 display: flex ,元素的大小根据父节点的大小自动撑开。
  • 适用场景:多图横向排列,左右内容对比布局。
  • 代码示例:

    <style>
      #container {
          display: flex;
          height: 200px;
      }
    </style>
    <section id="container">
      <mip-img layout="flex-item" src="/doc/image/layout/img.jpg"></mip-img>
      <mip-img layout="flex-item" src="/doc/image/layout/img.jpg"></mip-img>
      <mip-img layout="flex-item" src="/doc/image/layout/img.jpg"></mip-img>
    </section>
  • 使用效果:

5. fill

  • 布局介绍:使用 layout="fill" 的元素的大小根据父节点的大小自动撑开。
  • 适用场景:铺满父元素的背景图片。
  • 代码示例:

    <style>
      .container {
          position: relative;
          height: 300px;
          width: 80%;
      }
    </style>
    <section class="container">
      <mip-img
          layout="fill"
          src="img.jpg">
      </mip-img>
    </section>
  • 使用效果:

6. container

  • 布局介绍:使用 layout="container" 的元素的大小根据子节点的大小自动撑开,相当于 display: block
  • 适用场景:内容高度不固定的表单无限滚动组件。
  • 代码示例:

    <mip-history history="go, -1" layout="container">
      我说你是人间的四月天;笑声点亮了四面风;轻灵在春的光艳中交舞着变。你是四月早天里的云烟,黄昏吹着风的软,星子在无意中闪,细雨点洒在花前。那轻,那娉婷,你是,鲜妍百花的冠冕你戴着,你是天真,庄严,你是夜夜的月圆。
    </mip-history>
    <script src="https://c.mipcdn.com/static/v1/mip-history/mip-history.js"></script>
  • 使用效果:

7. nodisplay

  • 布局介绍:使用 layout="nodisplay" 的元素不展现,即 display: none 。隐藏元素可由用户点击触发显示,也可以应用于统计组件。
  • 适用场景:不需要显示在页面上的mip-pix统计mip-analytics统计百度统计组件,由用户点击触发的mip-lightbox弹框组件。
  • 代码示例:

    <button on="tap:L1.toggle" id="btn-open" class="lightbox-btn">
      打开弹层
    </button>
    <mip-lightbox layout="nodisplay" class="mip-hidden" id="L1">
      <div class="lightbox">
          <span on="tap:L1.toggle" class="lightbox-btn">关闭弹层</span>
      </div>
    </mip-lightbox>
  • 使用效果:

layout 属性缺省规则

widthheight其他属性默认布局
fixed
存在 sizes 参数responsive
无或取值为 autofixed-height
container

layout 默认值

所有 MIP 元素都会有 layout 。移动端的设计大部分是块状的,默认的 layoutcontainer 。如果有其它的样式需求,如 inlineinline-block。可通过 CSS 样式覆盖的方式修改元素 display 属性。