@alifd/mobile-pro-layout v0.2.1-alpha.1

title: 移动端自然布局

category: General

一套面向 Fusion Mobile 的的自然布局组件

特性：

• 12 栅格布局，并支持自定义 BreakPoints
• 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）
• 细化大/小布局，兼容各种移动布局场景

使用准备

使用前，需要引入 Fusion Mobile 的主题，此主题可以通过 Fusion 站点定制生成，或者使用默认主题：

import { Page, Section } from '@alife/mobile-theme-default';
import '@alife/mobile-theme-default/index.css';

<Page>
  <Section>...</Section>
</Page>;

使用

1. 安装

npm install @alifd/mobile-pro-layout --save

2. 导入 Fusion Mobile 主题

 import '@alife/mobile-theme-default';

大布局模式介绍

代码：

<Page>
  <Section>
    <Block span={6}>6</Block>
    <Block span={4}>4</Block>
    <Block span={2}>2</Block>
    <Block span={4}>4</Block>
  </Section>
</Page>

在自然布局体系中， 我们将 span 处理成一个逻辑概念。以屏幕宽度从 12 列模式收缩到 8 列为例， 6,4,2,4 布局, 当子元素 span 值超过当前屏幕允许最大列时，做按先后遍历孩子节点：

1. 单个元素 span 值超过 8 时，直接按照 span=8 处理;
2. 单行 span 相加不超过 8， 如果超过，则执行换行操作，并重新计算;
3. 换行后根据每行所在的元素 span 值, 按比例缩放， 如单行为4,2, 则实际 span 值调整为 [4/(2+4)*8, 2/(2+4)*8] 就近取整
4. 单行只有一个元素的，按照 span=8 直接缩放

自定义 BreakPoints

<Page
  breakPoints={[
    {
      width: 200,
      maxContentWidth: 200,
      numberOfColumns: 1,
    },
    {
      width: 375,
      maxContentWidth: 375,
      numberOfColumns: 2,
    },
    {
      width: 750,
      maxContentWidth: 750,
      numberOfColumns: 4,
    },
    {
      width: 1125,
      maxContentWidth: 1125,
      numberOfColumns: 8,
    },
    {
      width: Infinity,
      maxContentWidth: Infinity,
      numberOfColumns: 12,
    },
  ]}
>
  ...
</Page>