@alifd/mobile-layout v1.0.7

介绍

一套面向移动端的布局解决方案。🔗 使用文档

目标：不再写任何布局 CSS 代码

特性：

• 支持栅栏布局，并可自定义 BreakPoints
• 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）
• 大小布局模式拆分，逻辑清晰，布局灵活
• 完美支持小程序(微信、支付宝、钉钉)

大布局

• <Page>: 页
  • <Page.Header>: 序章
  • <Page.Content>: 内容
  • <Page.Footer>: 终章
• <Section>: 章
• <Block>: 区块

小布局

• <Cell>: 单元格，主轴默认为 垂直方向的 flex 排版
• <Row>: 行
• <Col>: 列
• <Grid>: 网格

段落&文本

• <P>: 段落
• <Text>: 文本

大布局模式

用于在页面栅栏系统的上构建出整个页面的骨架，其最终产物的是一组响应式布局的空容器。

代码：

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

Block 列宽计算规则

组件会根据页面宽度自动计算栅栏数量和 Block 的列宽，计算逻辑为：

以屏幕宽度从 12 列模式收缩到 8 列为例， 6,4,2,4 布局, 子元素的列宽会经历如下调整:

小布局模式

小布局指按照 Row、Col 和 Grid 相互嵌套的方式，将 Block 内部切割为多个内容区域的规范和操作方式。

独立单元格

<Cell />

横向拆分

<Row>
  <Cell />
  <Cell />
</Row>

纵向拆分

<Col>
  <Cell />
  <Cell />
</Col>

网格拆分

<Grid cols="{2}">
  <Cell />
  <Cell />
  <Cell />
  <Cell />
</Grid>

复合拆分

<Row>
  <Cell />
  <Col>
    <Cell />
    <Cell />
  </Col>
</Row>

段落&文本

在单个 Cell 中对组件进行横向排版。如文本居中对齐：

<p align="center">
  <Text type="h1">文本</Text>
  <Text type="body1">文本</Text>
  <button>button</button>
</p>

使用

1. 安装

npm install @alifd/mobile-layout --save

2. 导入 Fusion Mobile 主题

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

import { Page, Section, Block, Row, Cell, P, Text } from '@alife/mobile-layout';
import { Button } from '@alifd/meet';

// 导入一套 Fusion 移动端主题 (参见 Fusion 官网介绍)
import '@alifd/meet/es/core/index.css';

<Page>
  <Section>
    <Block span={2}>
      <Row>
        <Cell>
          <Button>按钮 1</Button>
        </Cell>
        <Cell>
          <Button>按钮 2</Button>
        </Cell>
      </Row>
    </Block>
    <Block span={2}>
      <Cell verAlign="middle">
        <P align="right">
          <Text>文本</Text>
          <Text>文本</Text>
        </P>
      </Cell>
    </Block>
  </Section>
</Page>;

3. 注意事项

建议使用 “自然布局” 为整个页面布局，以达到最优效果，所有的内容都渲染在支持的容器中

API

Page

页面

BreakPoint

断点配置信息，通过传入一组断点信息，来配置页面在不同页面尺寸下的展示模式（栅栏列数 + 内容区域最大宽）。

Page.Header

序章

Page.Footer

终章

Page.Content

内容

Section

章

Block

区块（节）

Row

行

Col

列

Grid

网格

Cell

单元格，其内容默认为 flex 纵向布局

区别：

• <Cell> 设置 gap 时，每一行的高度是自适应的
• <Col> 设置 gap 时，默认每一行的高度是等分的

Space

空间间隙

P

段落

Text

文本

CSS 变量

在大布局模式下，如果需要支持较大屏幕， 则 CSS 单位需要视情况选择 rpx 或 px