@alifd/mobile-layout

小布局

- : 单元格，主轴默认为 垂直方向的 flex 排版
- : 行
- : 列
- : 网格

段落&文本

-

: 段落
- : 文本

大布局模式

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

代码：

``js
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,
},
]}
>


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

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

小布局模式

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

$3

`html

`

$3

`html




`

$3

`html




`

$3

`html






`

$3

`html







`

$3

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

`html



文本
文本
button


`bash
npm install @alifd/mobile-layout --save
`

$3

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

`js
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';

| 参数 | 含义 | 类型 | 默认值 |
| ------------------ | -------------------------------------------- | ------------------------------------------------- | ------------- |
| prefix | CSS 类名前缀， | string | pro-layout- |
| noPadding | 禁用页面内边距,包括 Header， Content, Footer | Boolean | false |
| noBlockCorner | 禁用区块的边角（通常在无页面内容间隙时使用） | Boolean | false |
| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |
| blockGap | Section 中栅栏布局间隙 | Number | - |
| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |
| children | 子元素 | RaxNode | - |
| breakPoints | 断点信息 | BreakPoint[] | - |
| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |

##### BreakPoint

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

| 参数 | 含义 | 类型 | 默认值 |
| --------------- | ---------------------- | ------ | ------ |
| width | 断点适配的最大屏幕宽度 | Number | - |
| maxContentWidth | 适配屏幕下最大内容宽度 | Number | - |
| numberOfColumns | 栅栏列数 | Number | - |

#### Page.Header

序章

| 参数 | 含义 | 类型 | 默认值 |
| --------------- | ------------------------------------------- | ------- | --------- |
| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | surface |
| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |
| divider | 展示分割线 | Boolean | - |
| children | 子元素 | RaxNode | - |

#### Page.Footer

终章

| 参数 | 含义 | 类型 | 默认值 |
| ------------ | ------------------------------------------- | ------- | --------- |
| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | surface |
| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |
| divider | 展示分割线 | Boolean | - |
| fixed | 固定在底部 | Boolean | |
| children | 子元素 | RaxNode | - |

#### Page.Content

内容

| 参数 | 含义 | 类型 | 默认值 |
| -------- | ------ | ------- | ------ |
| children | 子元素 | RaxNode | - |

$3

章

| 参数 | 含义 | 类型 | 默认值 |
| ---------- | ----------------------------- | ------- | ------ |
| title | 标题 | RaxNode | - |
| titleAlign | 标题位置，可选值 left/center | Enum | - |
| extra | 附加区域（标题右侧） | RaxNode | - |
| gap | 自定义内部区块（Block）的间隙 | Number | - |
| children | 子元素 | RaxNode | - |

$3

区块（节）

| 参数 | 含义 | 类型 | 默认值 |
| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |
| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |
| title | 标题 | RaxNode | - |
| titleAlign | 标题位置，可选值 left/center | Enum | - |
| extra | 附加区域（标题右侧） | RaxNode | - |
| divider | 展示标题与内容之间的分割线 | Boolean | - |
| bordered | 展示边框 | Boolean | - |
| noPadding | 移除内边距 | Boolean | false |
| span | 列宽 | Number | - |
| width | 指定宽度 | Number | - |
| contentClassName | 有标题时，内容区域的样式名 | string | - |
| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |
| children | 子元素 | RaxNode | - |

$3

行

| 参数 | 含义 | 类型 | 默认值 |
| -------- | --------------------------------------------------------- | ------- | ------ |
| width | 指定宽度 | Number | - |
| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |
| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |
| gap | 自定义元素间间距 | Number | - |
| children | 子元素 | RaxNode | - |

$3

列

| 参数 | 含义 | 类型 | 默认值 |
| -------- | -------------------------------------------------- | ------- | ------ |
| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |
| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |
| gap | 自定义元素间间距 | Number | - |
| children | 子元素 | RaxNode | - |

$3

网格

| 参数 | 含义 | 类型 | 默认值 |
| ---------- | --------------------------------------------- | ---------------------------- | ------ |
| cols | 指定列数 | number | |
| rows | 指定行数 | number | |
| minWidth | 单元格最小宽度 | number | |
| maxWidth | 单元格最大宽度 | number | |
| rowGap | 单元格行间距, 可选值: small/medium/large/数值 | Enum | |
| colGap | 单元格列间距, 可选值: small/medium/large/数值 | Enum | |
| renderItem | 手动渲染单个单元格内容 | (rowIndex,colIndex)=>RaxNode | |
| children | 子元素，默认应为 Cell | RaxNode | - |

$3

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

| 参数 | 含义 | 类型 | 默认值 |
| -------- | ------------------------------------------------------------------------------------ | ------- | ------ |
| width | 指定宽度 | Number | - |
| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |
| gap | 自定义内部元素的行解析 | Number | 0 |
| align | 内容水平对齐方式， 可选值: left/center/right | Enum | - |
| verAlign | 内容垂直对齐方式， 可选值: top/middle/bottom/space-between/space-around/space-evenly | Enum | - |
| block | 使用 block 布局 | Boolean | - |
| children | 子元素 | RaxNode | - |

> 区别：
>
> - 设置 gap 时，每一行的高度是自适应的
> - 设置 gap 时，默认每一行的高度是等分的

#### Space

空间间隙

| 参数 | 说明 | 类型 | 默认值 |
| --------- | ---------------------------------------- | ------- | ------ |
| direction | 组件自身布局模式，可选： hoz/ver | Enum | hoz |
| size | 尺寸， 可选: small/medium/large/Number | Enum | medium |
| children | 子元素 | RaxNode | |

$3

段落

| 参数 | 说明 | 类型 | 默认值 |
| ------------ | -------------------------------------------------------------------------- | ------- | ---------- |
| align | 水平方向对齐模式 left/center/right/space-between/space-around/space-evenly | Enum | 'left' |
| verAlign | 垂直方向对齐模式 top/middle/bottom/baseline | Enum | 'baseline' |
| spacing | 子元素间保持水平间距, 可选： small/medium/large/false | Enum | medium |
| verMargin | 除 Text 节点外子元素间保持垂直外边距 | Boolean | true |
| beforeMargin | 段前外边距（第一个子元素无效） | Number | 0 |
| afterMargin | 段尾外边距（最后一个子元素无效） | Number | 0 |
| children | 子元素 | RaxNode | - |

#### Text

文本

| 参数 | 说明 | 类型 | 默认值 |
| --------- | ----------------------------------------------------------------- | ------- | ------ |
| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | |
| delete | 添加删除线样式 | Boolean | false |
| mark | 添加标记样式 | Boolean | false |
| underline | 添加下划线样式 | Boolean | false |
| strong | 是否加粗 | Boolean | false |
| code | 添加代码样式 | Boolean | false |
| color | 颜色 | String | - |

CSS 变量

| 变量名 | 说明 | 默认值 |
| --------------------------------- | ---------------------- | ---------------------- |
| --color-transparent | 前景色 | transparent |
| --color-surface | 前景色 | #fff |
| --color-lining | 衬色 | #f0f0f0 |
| --page-padding-lr | 页面左右内边距 | var(--s-3) |
| --page-padding-tb | 页面上下内边距 | var(--s-3) |
| --page-header-divider-color | header 分割线颜色 | var(--color-line1-1) |
| --page-block-corner | 区块圆角尺寸 | var(--corner-0) |
| --page-block-padding-lr | 区块左右内边距 | var(--s-3) |
| --page-block-padding-tb | 区块上下内边距 | var(--s-3) |
| --page-section-title-font-color | 章节标题颜色 | var(--color-text1-4) |
| --page-section-extra-font-color | 章节附加内容文本颜色 | var(--color-text1-2) |
| --page-block-title-font-color | 区块标题颜色 | var(--color-text1-4) |
| --page-block-extra-font-color | 区块附加内容文本颜色 | var(--color-text1-2) |
| --page-section-gap | 章间隙 | var(--s-3) |
| --page-block-gap | 区块间隙 | var(--s-2) |
| --page-block-border-width | 区块边框宽度 | var(--line-1) |
| --page-block-border-color | 区块边框颜色 | var(--color-line1-1) |
| --page-grid-gap | 小布局间隙 | var(--s-1) |
| --page-p-small-spacing | 段落子元素的水平小间距 | var(--s-1) |
| --page-p-medium-spacing | 段落子元素的水平中间距 | var(--s-2) |
| --page-p-large-spacing | 段落子元素的水平大间距 | var(--s-4) |
| --page-p-el-margin | 段落子元素的上下间距 | var(--s-1) |
| --page-p-font-color | 段落默认字体色 | var(--color-text1-4) |

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