mip-fixed floating layout

Support the overall usage plan of floating elements in mip

Example

Top suspension

Rule: width default screen 100%, height up to 85 pixels

<mip-fixed type="top">
    自定义内容，可以嵌套其他组件
</mip-fixed>

Bottom floating

Rules: Width defaults to 100% of the screen, height up to 85 pixels

<mip-fixed type="bottom">
    自定义内容，可以嵌套其他组件
</mip-fixed>

Left floating

Rules: the width does not exceed 10% of the screen, the height does not exceed 25% of the screen, the attribute bottom or top must have a

<mip-fixed type="left" bottom="50px">
    自定义内容，可以嵌套其他组件
</mip-fixed>

suspended on the right

Rules: the width does not exceed 10% of the screen, the height does not Exceeding 25% of the screen, the attribute bottom or top must have a

<mip-fixed type="right" top="50px">
    自定义内容，可以嵌套其他组件
</mip-fixed>

Support mip-gototop

<mip-fixed type="gototop">
    <mip-gototop></mip-gototop>
</mip-fixed>

Method to close suspended elements

1. Add a mip-fixed tag Customized id: customid

2. Add the attribute on="tap:customid.close"

<mip-fixed type="top" id="customid">
  <div>我是顶部的fixed</div>
  <div on="tap:customid.close">我是关闭按钮</div>
</mip-fixed>

attribute

type## to the tag that needs to be clicked to close the floating element.

#Description: Suspension type

Required option: Yes
Type: String
Value range: top/bottom/right/left

top

Description : Distance from the top of the screen

Required option: No
Type: String
Value range: value + unit, for example: 50(px|em|rem|vh|vw|vmin|vmax|cm| mm|q|in|pc|pt)
Default value: auto

bottom

Description: Distance from the bottom of the screen

Required option: No
Value range: Value + unit, for example: 50(px|em|rem|vh|vw|vmin|vmax|cm|mm|q|in|pc|pt)
Default value: auto

Note

Suspension type

• type is top, bottom category does not need to add attributes: top/bottom;

• type is left, The right category needs to add at least one top/bottom attribute, and bottom is preferred.

• type type gototop Categories do not require any attributes.

fixed Element number limit

• top <= 1

• bottom <= 1

• left + right <= 1

• gototop <= 1