npm:@alifd/mobile-pro-layout

README

title: 移动端自然布局 category: General

介绍

一套面向移动端的自然布局组件。

特性：

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

布局细分为两种模式：

大布局

<Page>: 页
<Section>: 章
<Block>: 区块
<Header>: 序章
<Footer>: 终章

小布局

Row: 行
Col: 列
Cell: 单元格，主轴默认为垂直方向的 flex 排版
P: 段落

大布局模式

用于页面主体框架的布局，可支持根据屏幕宽度自定义栅格，并自动确定区块的列宽

代码：

<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,
    },
  ]}
>
  <Section>
    <Block span={6}>...</Block>
    <Block span={6}>...</Block>
  </Section>
</Page>

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

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

小布局

用于对单个容器内部填充内容（如业务组件）进行行列精细化布局，实现等比、定宽等排列。

使用

1. 安装

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

2. 导入 Fusion Mobile 主题

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

import { Page, Section } from '@alife/mobile-theme-default';
// 导入一套默认主题变量
import '@alife/mobile-theme-default/index.css';

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

CSS 变量

名称	说明	默认值
`--layout-block-corner`	block 圆角尺寸	`--corner-0`
`--layout-page-padding`	页面内间距	`20px`
`--layout-page-gutter`	页面元素间隙	`20px`
`--layout-section-gutter`	section 子元素间隙	`16px`
`--layout-block-gutter`	block 子元素间隙	`12px`
`--layout-grid-small-gutter`	小布局小尺寸间隙	`--s-1`
`--layout-grid-medium-gutter`	小布局中尺寸间隙	`--s-2`
`--layout-grid-large-gutter`	小布局大尺寸间隙	`--s-3`
`--layout-p-spacing`	段落子元素左右间隙	`--s-1`
`--layout-p-gap`	段落子元素上下间隙	`--s-2`

在大布局模式下，如果需要支持较大屏幕，则间隙单位需要视情况决定采用 rpx 或 px 单位

Usage no npm install needed!