ミップ固定フローティング レイアウト


mip でフローティング要素の全体的な使用計画をサポートします

QQ截图20170204114543.png

例

上部フローティング

ルール: 幅のデフォルトは画面の 100%、高さは最大 85 ピクセルです

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

下部フローティング

ルール:幅のデフォルトは画面の 100%、高さは最大 85 ピクセルです

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

左フローティング

ルール: 幅は画面の 10% を超えず、高さは画面の 25% を超えず、属性は一番下ですまたは、上部には 1 つが必要です

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

右フローティング

ルール: 幅は画面の 10% を超えてはならず、高さは画面の 25% を超えてはなりません。また、属性の Bottom または Top には 

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

Support が必要ですmip-gototop

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

中断された要素を閉じる方法

1. mip-fixed タグにカスタム ID を追加します:customid

2. 必要なラベルに属性 on="tap:customid.close" を追加します。クリックしてフローティング要素を閉じます

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

属性

type

説明: フローティングタイプ
必須オプション: はい
タイプ: string
値の範囲: top /bottom/right/left

top

説明: 上からの距離画面の
必須: いいえ
タイプ: String
値の範囲: 値 + 単位、例: 50(px|em|rem|vh|vw| vmin|vmax|cm|mm|q|in|pc|pt)
デフォルト値: auto

bottom

説明: 画面の下部からの距離
必須オプション: No
値の範囲: 値 + 単位、例: 50( px|em|rem|vh|vw|vmin|vmax |cm|mm|q|in|pc|pt)
デフォルト値: auto

注意事項

サスペンションタイプ

  • タイプは上部、下部カテゴリはありません。属性を追加する必要があります:上部/下部。 type は left、right です。カテゴリには少なくとも 1 つの top/bottom 属性を追加する必要があり、bottom が優先されます。

  • タイプ gototop カテゴリには属性は必要ありません。

  • 固定要素数制限

上 <= 1

  • 下 <= 1top <= 1

  • bottom <= 1

  • left + right <= 1

  • gototop <= 1

左 + 右<= 1
🎜🎜🎜gototop <= 1🎜🎜🎜🎜