{"nyc":{"include":"src"},"dist":{"shasum":"443a883641deac5352b9f19a602b77c7719fcf57","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.0-beta.5.tgz","fileCount":177,"integrity":"sha512-MeNw9An3RztD+3uKjDOgrHwLKkmw3ffcPY5WygQPdaLEQynindFM6Q2+/uOcKO+G+K3OcPLg18WyEu5JD5bKHw==","signatures":[{"sig":"MEQCIB2js8TbfE2s5/wi6oZ/xMAXRyyNd3a9yRc3iZlTXx5SAiBU8JOBuT6PmKBWABuE58+8YeL66iHalUsuP5Elp3nCcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4786839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVVziACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpH2hAAkttkVciw3WCGs5n5QwRmG4uDcpM6y497/M43319ZjB1Dffnf\r\nNEQ15Ih2DJ2MqxxKBONqUxhcukwHDqoEIp6AsvLnZF+ldr51a2p7aPElbW3C\r\nMYTvSoel3/x8OdHPEWMEY+EL9hDM/RGrqgMDsehdaUHTtt0teJ9+IcZqsu2Z\r\ncUnTlJAd8uhjBXNM+YkZCzVJ+m8T/epn7dsJWxLSCAWZ7weW/Rlir4yDRgQk\r\nZtgB8y/PdEu3dy1Ax0W9WR9eXl0oNnKC7fvsTEKgJrcOYs85F7CzsLQJvJhD\r\n+fyAJVxqtTU733f/Xei5RoepzOoI5R07Z6z3jj91kMl0Guz51RqHBr4LZoxC\r\n930pcVZHSS7g7WFPhB5kH/9EP9XlBmT3iEAndmk+zwUksNWZuh9t+kqPKUbz\r\nVKDscRbL7vTHmNUn31FhbIk1xzhAuMQXyknJ1qP+FE5YwIyZFoIfUIV37rok\r\nOtsvli0d4qX6hDXHVMClT8GbEfkNmRdZmqUGbmKd63eySCLQ+pNNNiRFE/k3\r\nevjCheDX8qcNN4xmmTaW0Od7jaAbaFBxtmesWVtzPH2qBft7Q/L97MIkodZv\r\ngHHyOpmFJQmzeAF2gRh7YSt0/os/+smtnqvaISXC1AQ4rL9GL8DScz0dNclT\r\n930i0eUroT4Rvb1h+4DxusdtoW/eXiQ3ytg=\r\n=E99h\r\n-----END PGP SIGNATURE-----\r\n"},"logo":"https://gw.alicdn.com/imgextra/i2/O1CN01XA2RsI1fjjzUmc2kh_!!6000000004043-2-tps-243-240.png","main":"lib/index.js","name":"@alifd/mobile-layout","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","readme":"---\ntitle: 移动端自然布局\ncategory: General\n---\n\n## 介绍\n\n一套面向移动端的自然布局组件。\n\n**特性：**\n\n- 多栅格布局，支持自定义 `BreakPoints`\n- 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）\n- 细化大/小布局，兼容各种移动端布局场景\n\n布局细分为两种模式：\n\n<p style=\"text-align:left;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i3/O1CN015fyWei29J7U6tTJ2b_!!6000000008046-2-tps-1236-370.png\"/>\n</p>\n\n##### 大布局\n\n- `<Page>`: 页\n- `<Section>`: 章\n- `<Block>`: 区块\n- `<Header>`: 序章\n- `<Footer>`: 终章\n\n##### 小布局\n\n- `Row`: 行\n- `Col`: 列\n- `Cell`: 单元格，主轴默认为 垂直方向的 flex 排版\n- `P`: 段落\n\n### 大布局模式\n\n用于页面主体框架的布局，可支持根据屏幕宽度自定义栅格，并自动确定区块的列宽\n\n<p style=\"text-align:left;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01CqRHgx1n6pIv51UYz_!!6000000005041-2-tps-2404-1032.png\"/>\n</p>\n\n代码：\n\n```js\n<Page\n  breakPoints={[\n    {\n      width: 200,\n      maxContentWidth: 200,\n      numberOfColumns: 1,\n    },\n    {\n      width: 375,\n      maxContentWidth: 375,\n      numberOfColumns: 2,\n    },\n    {\n      width: 750,\n      maxContentWidth: 750,\n      numberOfColumns: 4,\n    },\n    {\n      width: 1125,\n      maxContentWidth: 1125,\n      numberOfColumns: 8,\n    },\n    {\n      width: Infinity,\n      maxContentWidth: Infinity,\n      numberOfColumns: 12,\n    },\n  ]}\n>\n  <Section>\n    <Block span={6}>...</Block>\n    <Block span={6}>...</Block>\n  </Section>\n</Page>\n```\n\n组件会根据页面宽度自动计算栅格数量和单个 `Block` 的列宽。单个 Block 的列宽计算逻辑为：\n\n<p style=\"text-align:left;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01wQws881UF5knznGq6_!!6000000002487-2-tps-2296-296.png\" align=\"center\" />\n</p>\n\n以屏幕宽度从 `12` 列模式收缩到 `8` 列为例，\n`6,4,2,4` 布局, 子元素的列宽会经历如下调整:\n\n<p style=\"text-align:left;\">\n  <img width=\"800\" src=\"https://img.alicdn.com/imgextra/i2/O1CN01TAJkVt1XbTxmn9K66_!!6000000002942-2-tps-3860-1200.png\"/>\n</p>\n\n### 小布局\n\n用于对单个容器内部填充内容（如业务组件）进行行列精细化布局，实现等比、定宽等排列。\n\n## 使用\n\n### 1. 安装\n\n```bash\nnpm install @alifd/mobile-layout --save\n```\n\n### 2. 导入 Fusion Mobile 主题\n\n引入 Fusion Mobile 的主题，此主题可以通过 Fusion 站点定制生成，或者使用默认主题：\n\n```js\nimport { Page, Section } from '@alife/mobile-theme-default';\n// 导入一套默认主题变量\nimport '@alife/mobile-theme-default/index.css';\n\n<Page>\n  <Section>\n    <Block>...</Block>\n    <Block>...</Block>\n    <Block>...</Block>\n  </Section>\n</Page>;\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数             | 含义                                      | 类型           | 默认值        |\n| ---------------- | ----------------------------------------- | -------------- | ------------- |\n| prefix           | CSS 类名前缀，                            | string         | `pro-layout-` |\n| minHeight        | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String  | -             |\n| noContentPadding | 禁用页面内边距                            | Boolean        | `false`       |\n| isTab            | 是否开启分页布局                          | Boolean        | `false`       |\n| tabProps         | 放到 Tab 组件上的一些默认值               | Object         | -             |\n| sectionGap       | Header、Footer、Nav、Aside 和章节之间间隙 | Number         | -             |\n| blockGap         | Section 中栅格布局间隙                    | Number         | -             |\n| gridGap          | 小布局间隙（包含行、列、网格布局）        | Number         | -             |\n| breakPoints      | 断点信息                                  | `BreakPoint[]` | -             |\n| children         | 子元素                                    | RaxNode        | -             |\n\n##### BreakPoint\n\n断点配置信息，通过传入一组断点信息，来配置页面在不同页面尺寸下的展示模式（栅栏列数 + 内容区域最大宽）。\n\n| 参数            | 含义                   | 类型   | 默认值 |\n| --------------- | ---------------------- | ------ | ------ |\n| width           | 适配屏幕最大宽度       | Number | -      |\n| maxContentWidth | 适配屏幕下最大内容宽度 | Number | -      |\n| numberOfColumns | 栅格列数               | Number | -      |\n\n#### Page.Header\n\n序章\n\n| 参数            | 含义                                        | 类型    | 默认值    |\n| --------------- | ------------------------------------------- | ------- | --------- |\n| mode            | 背景色 'lining' / 'surface' / 'transparent' | Enum    | `surface` |\n| noBottomPadding | 隐藏默认底部内边距                          | Boolean | -         |\n| divider         | 展示分割线                                  | Boolean | -         |\n| children        | 子元素                                      | RaxNode | -         |\n\n#### Page.Footer\n\n终章\n\n| 参数         | 含义                                        | 类型    | 默认值    |\n| ------------ | ------------------------------------------- | ------- | --------- |\n| mode         | 背景色 'lining' / 'surface' / 'transparent' | Enum    | `surface` |\n| noTopPadding | 隐藏默认顶部内边距                          | Boolean | -         |\n| divider      | 展示分割线                                  | Boolean | -         |\n| children     | 子元素                                      | RaxNode | -         |\n\n#### Page.Content\n\n内容\n\n| 参数      | 含义                                             | 类型          | 默认值 |\n| --------- | ------------------------------------------------ | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px)          | Number/String | -      |\n| title     | 开启分页布局后生效，作为子页面(Tab.Item)的 title | String        | -      |\n| key       | 开启分页布局后生效，作为子页面(Tab.Item)的 key   | String        | -      |\n| children  | 子元素                                           | RaxNode       | -      |\n\n### Section\n\n章\n\n| 参数       | 含义                          | 类型    | 默认值 |\n| ---------- | ----------------------------- | ------- | ------ |\n| title      | 标题                          | RaxNode | -      |\n| titleAlign | 标题位置，可选值 left/center  | Enum    | -      |\n| extra      | 附加区域（标题右侧）          | RaxNode | -      |\n| gap        | 自定义内部区域（Block）的间隙 | Number  | -      |\n| children   | 子元素                        | RaxNode | -      |\n\n### Block\n\n区块（节）\n\n| 参数             | 含义                                        | 类型          | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode             | 背景模式，可选值 transparent/surface/lining | Enum          | -      |\n| title            | 标题                                        | RaxNode       | -      |\n| titleAlign       | 标题位置，可选值 left/center                | Enum          | -      |\n| extra            | 附加区域（标题右侧）                        | RaxNode       | -      |\n| divider          | 展示标题与内容之间的分割线                  | Boolean       | -      |\n| bordered         | 展示边框                                    | Boolean       | -      |\n| span             | 列宽                                        | Number        | -      |\n| width            | 指定宽度                                    | Number        | -      |\n| contentClassName | 有标题时，内容区域的样式名                  | string        | -      |\n| contentStyle     | 有标题时，内容区域的自定义样式              | CSSProperties | -      |\n| children         | 子元素                                      | RaxNode       | -      |\n\n### Row\n\n行\n\n| 参数     | 含义                                                      | 类型    | 默认值 |\n| -------- | --------------------------------------------------------- | ------- | ------ |\n| width    | 指定宽度                                                  | Number  | -      |\n| autFit   | 根据内容自适应宽度（当作为行列布局的子元素时生效）        | Boolean | -      |\n| gap      | 自定义元素间间距                                          | Number  | -      |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum    | -      |\n| children | 子元素                                                    | RaxNode | -      |\n\n### Col\n\n列\n\n| 参数     | 含义                                               | 类型    | 默认值 |\n| -------- | -------------------------------------------------- | ------- | ------ |\n| autFit   | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | -      |\n| gap      | 自定义元素间间距                                   | Number  | -      |\n| align    | 水平对齐方式， 可选值：left/center/right/stretch   | Enum    | -      |\n| children | 子元素                                             | RaxNode | -      |\n\n### Cell\n\n单元格，其内容默认为 flex 纵向布局\n\n| 参数     | 含义                                                                                 | 类型    | 默认值 |\n| -------- | ------------------------------------------------------------------------------------ | ------- | ------ |\n| width    | 指定宽度                                                                             | Number  | -      |\n| autFit   | 根据内容自适应宽度（当作为行列布局的子元素时生效）                                   | Boolean | -      |\n| gap      | 自定义内部元素的行解析                                                               | Number  | 0      |\n| align    | 内容水平对齐方式， 可选值: left/center/right                                         | Enum    | -      |\n| verAlign | 内容垂直对齐方式， 可选值: top/middle/bottom/space-between/space-around/space-evenly | Enum    | -      |\n| block    | 使用 `block` 布局                                                                    | Boolean | -      |\n| children | 子元素                                                                               | RaxNode | -      |\n\n### P\n\n段落\n\n| 参数          | 说明                                                                       | 类型    | 默认值     |\n| ------------- | -------------------------------------------------------------------------- | ------- | ---------- |\n| align         | 水平方向对齐模式 left/center/right/space-between/space-around/space-evenly | Enum    | 'left'     |\n| verAlign      | 垂直方向对齐模式 top/middle/bottom/baseline                                | Enum    | 'baseline' |\n| spacing       | 子元素间保持水平间距                                                       | Boolean | true       |\n| margin        | 子元素间保持垂直间距                                                       | Boolean | true       |\n| beforePadding | 段前内间距（第一个子元素无效）                                             | Number  | 0          |\n| afterPadding  | 段尾内间距（最后一个子元素无效）                                           | Number  | 0          |\n| children      | 子元素                                                                     | RaxNode | -          |\n\n#### Text\n\n文本\n\n| 参数      | 说明                                                              | 类型    | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type      | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum    |        |\n| delete    | 添加删除线样式                                                    | Boolean | false  |\n| mark      | 添加标记样式                                                      | Boolean | false  |\n| underline | 添加下划线样式                                                    | Boolean | false  |\n| strong    | 是否加粗                                                          | Boolean | false  |\n| code      | 添加代码样式                                                      | Boolean | false  |\n| component | 设置标签类型                                                      | custom  | 'span' |\n| color     | 颜色                                                              | String  | -      |\n\n## CSS 变量\n\n| 变量名                            | 说明                 | 默认值                 |\n| --------------------------------- | -------------------- | ---------------------- |\n| `--color-transparent`             | 前景色               | `transparent`          |\n| `--color-surface`                 | 前景色               | `#fff`                 |\n| `--color-lining`                  | 衬色                 | `#f0f0f0`              |\n| `--page-padding-lr`               | 页面左右内间距       | `var(--s-3)`           |\n| `--page-padding-tb`               | 页面上下内间距       | `var(--s-3)`           |\n| `--page-header-divider-color`     | header 分割线颜色    | `var(--color-line1-1)` |\n| `--page-block-corner`             | 区块圆角尺寸         | `var(--corner-0)`      |\n| `--page-block-padding-lr`         | 区块左右内间距       | `var(--s-3)`           |\n| `--page-block-padding-tb`         | 区块上下内间距       | `var(--s-3)`           |\n| `--page-section-title-font-color` | 章节标题颜色         | `var(--color-text1-4)` |\n| `--page-section-extra-font-color` | 章节附加内容文本颜色 | `var(--color-text1-2)` |\n| `--page-block-title-font-color`   | 区块标题颜色         | `var(--color-text1-4)` |\n| `--page-block-extra-font-color`   | 区块附加内容文本颜色 | `var(--color-text1-2)` |\n| `--page-section-gap`              | 章间隙               | `var(--s-3)`           |\n| `--page-block-gap`                | 区块间隙             | `var(--s-2)`           |\n| `--page-block-border-width`       | 区块边框宽度         | `var(--line-1)`        |\n| `--page-block-border-color`       | 区块边框颜色         | `var(--color-line1-1)` |\n| `--page-grid-gap`                 | 小布局间隙           | `var(--s-1)`           |\n| `--page-p-spacing`                | 段落元素的左右间距   | `var(--s-1)`           |\n| `--page-p-el-margin`              | 段落元素的上下间距   | `var(--s-1)`           |\n| `--page-p-font-color`             | 段落默认字体色       | `var(--color-text1-4)` |\n\n> 在大布局模式下，如果需要支持较大屏幕， 则间距单位需要视情况决定采用 `rpx` 或 `px` 单位\n","gitHead":"48a95d41c65a8e3c662b20046eddf0ce665847ce","scripts":{"lint":"fie lint","build":"build-scripts build","start":"fie start","build:react":"build-scripts build --config build.react.json","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","start:react":"build-scripts start --config build.react.json","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"typings":"types/index.d.ts","_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","keywords":["Rax"],"repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"--- title: 移动端自然布局 category: General ---","directories":{},"lint-staged":{"docs/**/*.md":["prettier --write","git add"],"src/**/*.(ts|tsx)":["tslint --fix","prettier --write","git add"],"@(docs|src)/**/*.@(js|jsx|ts|tsx)":["eslint --fix","prettier --write","git add"]},"maintainers":[{"name":"mark-ck","email":"muscle.mark.cheng@gmail.com"},{"name":"lakerswgq","email":"lakerswgq@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"wwsun","email":"ww.sun@outlook.com"},{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"jdkahn","email":"justindavidkahn@gmail.com"},{"name":"fusion-bot","email":"fusion-bot@alibaba-inc.com"},{"name":"sobear","email":"sobear.me@gmail.com"},{"name":"lianmin","email":"lianmin.slm@qq.com"},{"name":"clarkxia","email":"xiawenwu41@gmail.com"},{"name":"quanyin","email":"898617222@163.com"},{"name":"jerryyxu","email":"1193486072@qq.com"},{"name":"yellow2dong","email":"779509411@qq.com"},{"name":"alvinhui","email":"alvin.hui@qq.com"},{"name":"andevery","email":"hit.wpeng@gmail.com"},{"name":"luhengchang228","email":"luhengchang228@126.com"},{"name":"yuysmile","email":"879249235@qq.com"},{"name":"fd.xy","email":"galo.gm.work@gmail.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"_nodeVersion":"14.15.1","dependencies":{"tslib":"^2.0.1","@uni/env":"^1.0.7","rax-text":"^2.1.2","rax-view":"^2.3.0","rax-image":"^2.3.2","classnames":"^2.3.1","@types/react":"^17.0.39","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0","resize-observer-polyfill":"^1.5.1","@ali/lowcode-rax-renderer":"^1.0.80"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.0-beta.5/build/lowcode/assets-daily.json","isComponentLibrary":0},"devDependencies":{"rax":"^1.0.11","jest":"^24.8.0","execa":"^2.0.5","husky":"^3.0.1","tslint":"^5.18.0","f2elint":"^1.2.0","ts-node":"^9.1.1","iceworks":"^3.4.5","jest-cli":"^24.8.0","prettier":"^1.19.1","ts-mocha":"^8.0.0","expect.js":"^0.3.1","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.6.7","lint-staged":"^9.4.2","driver-universal":"^3.1.0","@alifd/meet-react":"^2.6.7","tslint-config-ali":"^0.2.4","@alifd/mobile-tile":"^0.1.5","@alib/build-scripts":"^0.1.20","conventional-changelog":"^3.1.24","eslint-plugin-jsx-plus":"^0.1.0","tslint-config-prettier":"^1.18.0","tslint-plugin-prettier":"^2.0.1","build-plugin-doc-multiple":"^1.0.0-beta.8","build-plugin-rax-to-react":"^1.1.5","@alifd/build-plugin-lowcode":"^0.1.13-beta.4","@alife/mobile-theme-default":"^0.2.7","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.0-beta.5_1649761506399_0.88368159103912","host":"s3://npm-registry-packages"},"_id":"@alifd/mobile-layout@1.0.0-beta.5","version":"1.0.0-beta.5"}