{"_id":"@alifd/mobile-layout","_rev":"31-ffbebcc4d7f7a363860d84795a2bccbd","name":"@alifd/mobile-layout","dist-tags":{"beta":"1.0.6-beta.1","latest":"1.0.7"},"versions":{"1.0.0-beta.1":{"name":"@alifd/mobile-layout","version":"1.0.0-beta.1","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.0-beta.1","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"9a283da36de948dd64457f44fbf41120ab97f925","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.0-beta.1.tgz","fileCount":170,"integrity":"sha512-qCsIBu+2A+IE3iDzxuxutC3o9dXEKMrk4kfXK2K9DgEcSSo3QdnmXWzYX3rRDbjEFtiAR8qimyUcI42+MmWbJg==","signatures":[{"sig":"MEUCIQDyDFh3nfvvDxjo2oFv0b4TQ6ikqjw91brENi4aWcKmHwIgPjO18Ci5E5E5HrfUTgjEdtTXe0NTgVlnL2aM9P0jJwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUDBUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpL4Q//RFhvyU4B1FdRlJY66yHHQp+IPMT6zMT7jgaK/D3D+A/SPlx8\r\nW4GLEuzzvg+KzTRaSbha8xKUnd/QjjzAgE0LsrSum4yaGFp3Ii5fWVfGRI0+\r\nspEiJ9fsojRtMBfkl9yWBWIXPWX9SSZEztjTr9zWsTvvMsuuxFwRzH7Xu2gy\r\nI60sdCuQPNhOIjLzKOxPMiw6+ZwgjnRQmsimvbzWJKwaRl3NqQuXBJveOymR\r\nLAfPJtydhPEaZlGcKcikUBCNZHdiZMKGQs33QQd7C7rQg2skjwLO8ll7pKI6\r\nzVroqLtjsDhykq4q86JjEyzNhgzKRz0Xml24Vx7Sc00ghyiGdPP6cXiJh4h6\r\nbVovugw8sxsjWde+6oSZjbUC1t69ytRHshBf3EyLwnV67qWRvCM/g1HhRuFz\r\npz/MnCp4P4bCFHIhU4sxEGVAH0GF51hTJFQ1pi6Nmu2CYMI13+rQqq0TIDFS\r\n1b8uHJvjodJH7k6iSFmf7xKw9nPMDL1buExGcMQWhRw5BTAv4gsKsjqvlRin\r\nA3qP/Fl1TEEWL6x6kJwoBuGkw93F6j9T9NGudZtQDvU8oAZjakp9dGzd+I03\r\n5enJiP/5KPctGNXdzGnxdq7TgduO0+I0OAnf5umBlANcbHA44fH7OJRfAjcF\r\nJhjNLch6WvKS42v5eTemL+fY7GE3jawPPxI=\r\n=hgyp\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","gitHead":"ae4abd764d7130e209f3e54d955a5dd508550616","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"},"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"]},"_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,"componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.0-beta.1/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.4","@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.4","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.0-beta.1_1649422420357_0.701852530380124","host":"s3://npm-registry-packages"}},"1.0.0-beta.2":{"name":"@alifd/mobile-layout","version":"1.0.0-beta.2","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.0-beta.2","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"65631335a58315c13955ea88afe68e90277621e3","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.0-beta.2.tgz","fileCount":177,"integrity":"sha512-re+lMp0XoH3qrNLDon8ti48JyNqK5z52NqnBWrqMJv8EakpUR2dBmWQBDg0JBJRSj9wRE2T8bNCs4VwH9IEl2g==","signatures":[{"sig":"MEUCIQDV3e+wVwqek62YeQW/6l4g1WRaGfzJ3/Z7LGiaL0FiwQIgX1njLzDqErZB3GZQSBJe7poMkWWmaBPXFAE0QTdT1fM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4785494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVBfLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+9w/+J8oSxw5BHHUWdu5ClmQwY7MuJVfNUZ6BhTmebXFVW72FI5DW\r\nw2ZlsXasJw9bJ0E0GujMfC3NBwZsi6VHT8Hg6wy0U26ERQr1NypDHXnhDNKP\r\ni39++TScjsoUUUhexUVaYwIV2oxeUnSTxeISIUdeOsV9PzQ3wM5O7hZ9vqSF\r\nVrRilWZIYictdFBuvA8Sr/1D8layE3bnrMUBukUbomk81jcJ5uW9p+lXY60M\r\nGzSGEDZpahv+IXaG7HEqJvG/wVNhMeLR5y55km1XLsapPDzgFFBfTdB94QJI\r\nju4rwxqSpbgYwZq35xzSiGdYmfhFAgvhcpws5r+b1rxt8+JtXBsYOnRKt3J3\r\nU3jcCDQSGQeCOsmXwA8iiDFTePf1OmPk87HPr5yGECGMQIoaLmjPmGW6FgBT\r\n5SuU1O2u0KRuotSPD9vRmdWa4KoaOmqTf5GPjpMCWph2oVIQVm8u+gJ3OfZx\r\nx8aWUlImxwbKWl95dxVXq5IoG8RNXDkdyKplW4+1EQNbe1XskCLA78omIq95\r\nYtydBP4SnoO7hEPBDn1iB9CwuZKW6iSeiTvAbAybl5bmFmWU/y6c4p75Mzlw\r\n1s+haxydFyLrYAuAn9yxPTFusUZcJOqGRq6ToRoXMnO/6mk3oUFczgaFE6yv\r\nMXmyPwFZHiVUE4cZBiI0AUEWBIrrxxOKWTI=\r\n=omez\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","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":"b679ff2f785d9a6f42269708ba23124175497778","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"},"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"]},"_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.2/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.4","@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.2_1649678283463_0.03919954766425149","host":"s3://npm-registry-packages"}},"1.0.0-beta.3":{"name":"@alifd/mobile-layout","version":"1.0.0-beta.3","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.0-beta.3","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"b9dd0202f44a4cf960159b7b2bba3ce8254862db","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.0-beta.3.tgz","fileCount":177,"integrity":"sha512-U28YFugn/nle59uvEsdT8e3DV7A12B4x5Xklzv3OxB+2Y0Bwk6pnKkWcAI6bUruQyWsDHS4dm/NUi8FwR8yj9g==","signatures":[{"sig":"MEUCIQDWrBk7u8I6MN9omGEPOr2qrORIGMF2Cit8Bqm3w2saxwIgYBRsEEBm5Mv+Bo09GLELvwsPJtHZ08myUZaNV7qnAdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4784671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVBrxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTwQ//QWrTmHSolQtS7PCUdu+ctzmZffluyqbMYwADzT2tQMmWIxG1\r\nH9bcGUxXqLLbtTM2O+HBU0wFZtqJ8SdUHttmmTXgyxG0jtdS4bsWxuGc2d0t\r\nxxmLp8m+2C3YEJiwPEE7ewLff4Tw0e4eldk8p/JPpbm+NPN1kgzCX3e1dUJK\r\nuLJry7LdaALMy7dtIZe3WfbZ0jkhCGvICW0X1VHQp4Fg6zM8LM7uc2iEu0kR\r\nJxChUGGL8FN1FD7SctIKmWHT7F4frWfSLSSrU2tIFLBfnVT883ggE1nrE36O\r\nHl/K8ADaniQNNXNVkb659eALe5njorjs+Xc3l5ZheKuBJjJ2qQ4+wxoUPjPG\r\nx98tyvvJqBqgrTvH119T/NMbXWix2/MiIUgPOfzhcDMQOODrZgKDI2axJnj8\r\n4CsEZGe3QPxuyOBKgxiaWfM0izpTYfMi98b2X8yGvew5tCZ13hZFO4+GdDMJ\r\nnapH9RlaZc7Ym+v+H1sHWxFTiYHbfHEKjbDj8t21LhW9pinGM1MUIOvke6ya\r\nNna6UKrqLxdm8MC+xVsMS3JBfLdRHFlLLonSQmuuUb7cAm9gnh/B/j7w2Mja\r\nuo46aRDciM+c7E5nMe2IluL0XtZi1KKqpgAGpm6A1DNrJkmZXOO2F76XZDfE\r\nhFQXBOwi4SrzsUdVK7ZNq2L9mZ4x3A4o9HM=\r\n=ec61\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","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":"7744bb76cb00e186a00938f39e31c39138ca4805","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"},"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"]},"_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.3/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.4","@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.3_1649679089283_0.3608591591501582","host":"s3://npm-registry-packages"}},"1.0.0-beta.4":{"name":"@alifd/mobile-layout","version":"1.0.0-beta.4","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.0-beta.4","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"b74352dded0d4b74aea12358db518dd9ffc99e54","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.0-beta.4.tgz","fileCount":177,"integrity":"sha512-mpRu/uSOABUWqeep7ntcOAp/kTRdODWywdpRfIHSdjkF47sHGZQYDWAgYnDIdG9/1b0vRPOrgKpmX+ZcRDe0QA==","signatures":[{"sig":"MEYCIQDKo20ckjQVnLmnCl8q1kRkWEb7+oJ86lfGfcovSV0VIAIhAOk/gQoNXJXzEK4p4K0xznFueXI/UWmu/s2xJcYs/3tX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4787090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVT8aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2ahAAnTgNVym7WJQyKTJiA06RbJ9hqY+i7/XC7tEm71SzDCKpWxLV\r\nQY3GLNqD7weEud+Xxl2ThW5H2Ci51ofe47k1dvEuwO0L9E6rYwdqJh7shSKM\r\nY6Hysyv6E8NwoD5BTir0iK7tIXYvtRUS4zN5wLJk1FgdmhdlUXSAfq4cBCig\r\nZtVzqIBViw9mmIBojHNhJDvLzVF1/axaXa9M6k3idh4lDCzLWyAQ4EJcgg0T\r\nVncG8FGpJCtz8neNle1DOuy0y8zB4iiy+FQgGdXd8HV6obmzMhtY0VnDIH4M\r\nwolCJztHiyfyyp7lhRqpxwSYKM6BqWm6QD9cH2lnyAXWwhzkorDZeyARpJ2d\r\n1wKS1qHbq3uoI/WgycKDR30A+JcPyCc3jYE6u87CULeiVYkK1tmusubPyxwO\r\njWazM2rNW2n6zTCQ5V9SpsC0y4K9H20KSF3JsBcLOVG+Ou3Seg19HzmKVSHi\r\nO99RgiQhx1ruFut69levLKwIv7rxFtbgvXk27wEUvyxqvY7/kP1J/EAamXgn\r\nZNdCvaCllE7zluuEuwLF3kv3F38CueUrX8OeDSwEH7RBomDvQmyH0FxvSB31\r\nzMEKIhpdHuGpRY8V4yUl6f22lNjfuEzmmITGq0y24S2xrhWLh5XRrsBXi8sP\r\nKOvNunNwcYIPJfSdRuW25tq3uRbm6p4i4B4=\r\n=uBNK\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","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":"2d2bda488d70e122fd6b98d6be4f08de5066228e","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"},"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"]},"_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.4/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.4_1649753881866_0.05848428706172415","host":"s3://npm-registry-packages"}},"1.0.0-beta.5":{"name":"@alifd/mobile-layout","version":"1.0.0-beta.5","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.0-beta.5","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","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","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"},"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"]},"_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"}},"1.0.0-beta.6":{"name":"@alifd/mobile-layout","version":"1.0.0-beta.6","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.0-beta.6","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"cf1cdaafec75f2aa990c3e93b49540c5f200957f","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.0-beta.6.tgz","fileCount":177,"integrity":"sha512-dS21UBYZ00Fj665VdL48evV7Fv4btsDUma+Rooh8H5GFGIFGla6Md0P/AYqSA7PtLGkE57jMvgC7T1GfzzA0Mg==","signatures":[{"sig":"MEYCIQCtHiGcfacCb5nHzjf6zSQoJzRz4e6eo77MRDVHgVvOsgIhAMkOwDwz/fIgKt6A2sKeZ5jAspfsFnLYEWn4d3Gr9GpP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4794514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWRziACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEohAAkatWyYxJEGHSuNZU5tYy0EwJGg3Z2yRZneVDedt1B9yCwUgJ\r\np1VkRF6H3zzXJkQYPoAf5RPhRCq/BhdOiOJ/jVTPkqcpv4qOOQalfaHc4AGx\r\nw4HK+6LS918TcwpqXTOZfqV3ELC172sQknKXpxOGhB7eG0cFlyKYmJuC5uVg\r\nciVtQveYkps7YkMYexfKqiuoYH6UoQtDcTR/G779wv59RAKpm/zEJSXP9Bao\r\nLyfy8nTnCAEM6kIMXrS9EHerWzJ/Aa/FokuLqC24mxud/OqDmYbXtyCkTZrw\r\nfbqYyHTGZxj2lDQDopf5CTcDSSYLnIQhuWtXUkEMyx1DzsI7Qeabt3+78cQT\r\nmrezRtmSVg+isSLjrpP2BG4app//bWQx4CWpzX31IZ9qEjbRYS1raz/MA2i6\r\n/E0vlrm6VwqWXaD1rnnS7A01dsiokNi7+OoStxeBJTamq5HwU34rHvfEcACq\r\ndCPSPRldSBRGBE7pXOj2v0qO6wYEbfsPZGL09wy5dExmA12QkGtKSX+gFwJL\r\n8PuArCHzQrJ4+Eb/KeCXbwclz2u8j3FtodKNW9Hn8+NL1q3v3vHd+gdhaSP6\r\ndgfDhj1msP8zreFfJko3eNJmDkbLN3MeIWk2H8TdCZEs0wqWn1esdMyJhyLH\r\nu7uEKXnKwE533w2wUAj+XmvYefn/xRId7lw=\r\n=rAbb\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","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| noPadding   | 禁用页面内边距,包括 Header， Content, Footer | 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> 区别：\n>\n> - `<Cell>` 设置 gap 时，每一行的高度是自适应的\n> - `<Col>` 设置 gap 时，默认每一行的高度是 `1fr`\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-block-padding-content`    | 区块标题与内容部分的间隙 | `var(--s-2)`           |\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":"033edfe03f969eca48b1e0df23bc1a4b043ef70d","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"},"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"]},"_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.6/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.6_1650007266282_0.21700169808169645","host":"s3://npm-registry-packages"}},"1.0.0-beta.7":{"name":"@alifd/mobile-layout","version":"1.0.0-beta.7","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.0-beta.7","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"8eebcb24fa22fd9753de678dbaec1a19a15abd28","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.0-beta.7.tgz","fileCount":177,"integrity":"sha512-LB3h5ef2i0EZscf+alul42eEZWU/6hCTVtoXpAtYavNw9jorb8zNN7yeKkWJ/r/1gHuLSQuhlrvyUMZ2pk6nuw==","signatures":[{"sig":"MEYCIQCX2lLZtZzi4ynuv4ODMxknKkmPqLFlMgtNnME6uNvIbgIhAIAT3q03/KnqkpXdQMXGKJjkJnylithiQOYNE6hAVPxq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4793534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXR3lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrL/g//WLYJH6kk3e30jdWbGTl3W0VPVvYLWeAAEuTU+QeEdDjIqhcz\r\nIL46MEV5W9FaghSOFZqXdX2KFv8lYWDMEtcYefITSk/8v49RJ96Vxzq3o2WP\r\nfVwgUG0W5TTwGz3IVPYCUHEA7OUN1BvIifKIIB6wdz/U/n94xig8PWPaI/jn\r\nMKkNm1y4Im1NaaRo/kjL48AaFsKWIpZktQAjl4FPgjyGPCCno9zfXmtynuZJ\r\nuCbnfwufy77CBrQ/wlckT/2Ea/YXLceFG+IDrXkxe6gq0VNCzKY+8e9D0Afs\r\nhzy0oAVrhuHDsEQdvsY9X/RE2ZAvrSjHQR1A52qyEHtUJzdY5MwUE30XLMHr\r\nBT9wO4puWLDjgZHL3/wTdqlkeEBxkVp3duVob3wiiV3v9ctHv/VnSFfmPnyE\r\n3KmtFk4/AJXlysftrXatQYFb9QRdMmiGfsRy1EIMX0aaUAQChU+wGkZZ0Z+8\r\ndFfzBjDuOVhZxdzz1embyr2PjSoiJfW/avKls1iIQhpsa3MYjlRhlye8d00X\r\n33kUQXACyicFR8kH5ayEBWGgBiYRE3Qz/ePwOV9F4SCgc2VHqedRwV9tkyW9\r\nbM4Zsc2prm8KgI1I6C311i1Hn3m2i3eAzIzYe5TIAKFKaYsmh7Jj5xtEbBkd\r\ntpcfMah2oN5+Fa3WlSpGfc5KLyyFx3jX694=\r\n=7Tfy\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","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| noPadding   | 禁用页面内边距,包括 Header， Content, Footer | 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> 区别：\n>\n> - `<Cell>` 设置 gap 时，每一行的高度是自适应的\n> - `<Col>` 设置 gap 时，默认每一行的高度是 `1fr`\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-block-padding-content`    | 区块标题与内容部分的间隙 | `var(--s-2)`           |\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":"1ab59581cafde65f2937d7d90c992d2d42eca789","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"},"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"]},"_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.7/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.7_1650269669411_0.6837772463646814","host":"s3://npm-registry-packages"}},"1.0.0-beta.8":{"name":"@alifd/mobile-layout","version":"1.0.0-beta.8","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.0-beta.8","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"7217120ceb524ffec273e60fa2e4a5288085c756","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.0-beta.8.tgz","fileCount":184,"integrity":"sha512-z8/qam7d+cUcfinNLsNfcjLm+QogZ9yn1yiKCK/ujkqLQprVPG534o8CAnNY4BOc+9Lo7Fqgf9N1S5T1LPARRQ==","signatures":[{"sig":"MEUCIBtENHcUlqpOs7y05oSBxitu/dBtLBL9dhgG+QruhTbiAiEA24zx3Xy4WPjgF1qfHJbnmxuB60fPPP4VY+xa9pcarkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5641689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZlKTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo++A//Vwg5AgYhLxIgrhkxFxV88NchJQ1dzGuARz9WEhWuKtaZtZa0\r\n2ycMb1NAumMCukh+7XKTsE31thnhxi5M11bArtjT9InAbFRqJbjJc4Ppj9zj\r\neYugN56Wz8GUS5ATT0SmioW1NnGygLxXKxPSg+whAPU/Z7t/FTbScALiDfek\r\n6ToHmSNzv9XAIotb7fk9olTBpu6d0C10nyPXPLhVGNQHN/AFAnGzcOoay1Az\r\nrgNEVVLSX4/C2C99G2sBCbg6CGsNhrmbGH9M3+KHv6elvbU5SdkwnguDrSYb\r\nBIlzIWweaExKo8WxP/LZKllCHa1wRv7GvXVJyRv8qQ4PVx4WqOJbdSzc24l8\r\nVVy92F5fl0rcqsW6h6Hb2KtmT45n3GCRXja1ZFyi08FICCS9rHKOUD3LfP4c\r\nHmb6mqY01TrqoVbThhuNSMgO49UH7BAzoCz9JS/oQDRexQ0lA8uKl2/+Dp0i\r\nulcxvPwlloefJjEc5T75lUwg47bop5EiwKmaR9edDSwMror6MDfBltxy7iNr\r\nHxnhD9fqLYokKj8glQYh5otRHyn1UQQ8ecR07NJnadOYoxC+daSKu4AQs2H2\r\n2bkca89yeeE5ppfW3zhxTmROnY5Q8W13X7Aq+o3+oww7kuP8nqpMkhB2H2pr\r\npYRWJwCIDBkoeIZCpJYcZO6hsb+eA5S7tL4=\r\n=w/pW\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","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### 3. 注意事项\n\n1. 请尽可能保证 Page 占有整个页面, 所有的内容都渲染在自然布局内部\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| noPadding   | 禁用页面内边距,包括 Header， Content, Footer | 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| fixed           | 固定在底部                                  | 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> 区别：\n>\n> - `<Cell>` 设置 gap 时，每一行的高度是自适应的\n> - `<Col>` 设置 gap 时，默认每一行的高度是 `1fr`\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| spacingSize  | 子元素间水平间距尺寸, 可选： small/medium/large                            | Enum    | 'medium'   |\n| margin       | 子元素间保持垂直间距                                                       | Boolean | true       |\n| beforeMargin | 段前内间距（第一个子元素无效）                                             | Number  | 0          |\n| afterMargin  | 段尾内间距（最后一个子元素无效）                                           | 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-block-padding-content`    | 区块标题与内容部分的间隙 | `var(--s-2)`           |\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-small-spacing`          | 段落子元素的水平小间距   | `var(--s-1)`           |\n| `--page-p-medium-spacing`         | 段落子元素的水平中间距   | `var(--s-2)`           |\n| `--page-p-large-spacing`          | 段落子元素的水平大间距   | `var(--s-4)`           |\n| `--page-p-el-margin`              | 段落子元素的上下间距     | `var(--s-1)`           |\n| `--page-p-font-color`             | 段落默认字体色           | `var(--color-text1-4)` |\n\n> 在大布局模式下，如果需要支持较大屏幕， 则间距单位需要视情况决定采用 `rpx` 或 `px` 单位\n","gitHead":"56245dc9f26b89be9ca5528395e59ed70adcf364","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"},"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"]},"_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.8/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.7.0-beta.3","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","@alifd/mobile-field-container":"^1.0.0--beta.1","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.0-beta.8_1650872978723_0.23387037991316206","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@alifd/mobile-layout","version":"1.0.0","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.0","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"2b4a7bd0d14896aac5c3bc5a05f58ba1889d2d18","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.0.tgz","fileCount":184,"integrity":"sha512-Kd6f0Xt/mUJ6noOiOFK47lqtll9mnKpxneSILKP2WdSQozbA1RE9KaPMLA2zzecWipShMOhU70i9cyTsgwPw1w==","signatures":[{"sig":"MEQCIFx8NVf8gnhPnrMIDjXgKPHK3SiOK7sIhT10aqgwqf1hAiADXbnA5q5UEfNS4t1N+tMqoIJCYx58WaO51cDOvxHqPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5646413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZoj+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIOg//RSWPykGUPT03Cob9Z2bExCo8Fj2/zHfojdICHkKPmnm6D2KH\r\nL5v9p4ZTUKwut/GJbmLpQ4j7wuMFzVvW0X5TeVwzArkOVFwmYBD8vNQkkZuM\r\ncU2PnigboOmwlQsQ5CazO/GdEaPYtBZl348JrEsgfuXoiarap/FhnPjhke3U\r\nGRUtgmIgTDGeqqVvhUtvhcxWIYSibtCMzRPfEItbeLLMeUDMYLyA1VEbtaZW\r\nDAYofmTY07J1nvv2R9/z6mucsoGNIovDi8qpj4rFDs4h+OHQ/0Y1Nl/9qB8T\r\n9xiq8Na+vahtDkkCnjjZwkjPPTfkUASwYQqglbZLJokgiVALdWwC/nb2dceA\r\nW1+sp7xhc2G7svFzm1bcRAsF9XW9pwGZLl8VveNy7B3AcRuIMrRNBQq/gbWc\r\nFQo1b5SEe7FYqywgUJKhuSjD8S2X64aIkdOshg+DF6TKvmIDtBNMfMzC3u7C\r\npB9eqfDTbTj+vJOMMl/4/ti+Atzk9hF8onbYUj1ooG+BmU6REA9Q+OilSbMa\r\nNupXtW72xmomHpZxdh0QJkbMDeCP1avddfcbDJvikO2p5QbL59Pg3wTHBDR+\r\nlUIn5LBWSnEP23NORgWglxxPF8P7U6zOh/b8jn3OTuc9W7o8rtQ9qK1G7OUo\r\nnpZOTBR1lOJqlJiiZxfy7Do7lTgHx22ZL8c=\r\n=MG2s\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","gitHead":"3121973efecc5a0e7ca2ed040a4e441335f362fc","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"},"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"]},"_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,"componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.0/build/lowcode/assets-prod.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.7.0-beta.3","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","@alifd/mobile-field-container":"^1.0.0-beta.2","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.0_1650886910468_0.32836503091244884","host":"s3://npm-registry-packages"}},"1.0.1-beta.1":{"name":"@alifd/mobile-layout","version":"1.0.1-beta.1","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.1-beta.1","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"2d654da47593308bdb57539d7dde4075c3a698e1","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.1-beta.1.tgz","fileCount":185,"integrity":"sha512-wWo/4ZyLFgBgiq36KwnQw/NUm9BopMyjNHPwV06333uZklulUz6SAEBV6dPbFM489CKWv6PK4UC7PMBv1nEA/Q==","signatures":[{"sig":"MEYCIQCGkP/YCfCgdC/qWIazMl9Wl87M3G/UmosPv/GpIhODVgIhAIJ6iL6L3pUrwaE1m553qjb0OpMl+o1FDE/yQ5V4Yd9v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5647704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaPWcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiDBAAgTJR0YRraVcmNcaagrgHJOgrxwGN8Vt63mkil+itfBt/0weW\r\nUyfAlQFiyDuPZCJeCyLyzjFZoZ75yLzLPh8O1dGG0PulLOKWQRJxUSmlmiIm\r\n/ugxiDuS2ZBBSlHJhyi41dGQN9fy1afnMbqAoYcS1tL6MDbc147TCaNmnK94\r\nLrQcO+XvQJ72/v1kkaT/tyT1GJ1UL7HEhtBW09SprY2rw4NKSNsn4V690JWt\r\nV7la7I+/SS9NwbKuJEYyFoajPlxlgLGvaENbbgsLgIps+vKiUPS+i8V0IjxV\r\nIlrdsRhTtj4gDRF46neKkcYk4CBb51sftB+e9xv8LK/Pf1WbYNDz4pIzHrCd\r\nTsKFn1YDQLdlKpjP+PRpKfOFXWhvbEhz/pcbW+b3RkLYWh54Vd1hLxn0ZkU6\r\ndgoyGAjFBWyPl11eYHb8cSBbtn7epHtN6FVhl9YJuzKhFZfu9sUdAgfg1uZV\r\nbXMjao7JYOV/+fXIgy7hUQZsW6nSWdV0leC4721wWdk9zDN+jBStUA1m8Sr8\r\nQ6Za8INfpzbbOAVvBUXV3PYXOdLttpOblWkloiWoEHG7dGUY9rhBY6EZqNlV\r\nvFRrGUDz0fq4bP7CWsuIuTQ1w/2u15mak+oSlTOCgieyXBdTRslIahjcBK/O\r\nqI34OVAJAlr9fmj7DuwLImVzUOhVJqM9SNs=\r\n=Xjh9\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","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我们的目标：不再写布局 CSS 样式\n\n**特性：**\n\n- 支持栅栏布局，并可自定义 `BreakPoints`\n- 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）\n- 精细划分 大/小 布局，划分清晰，布局灵活\n\n<p style=\"text-align:left;width:600px;background:#fff;\">\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  - `<Page.Header>`: 序章\n  - `<Page.Content>`: 内容\n  - `<Page.Footer>`: 终章\n- `<Section>`: 章\n- `<Block>`: 区块\n\n**小布局**\n\n- `<Cell>`: 单元格，主轴默认为 垂直方向的 flex 排版\n- `<Row>`: 行\n- `<Col>`: 列\n- `<Grid>`: 网格\n- `<P>`: 段落\n- `<Text>`: 文本\n\n## 大布局模式\n\n用于页面主体框架的布局，可支持根据屏幕宽度自定义栅栏，并自动确定区块的列宽\n\n<p style=\"text-align:left;background:#fff; width:600px;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i2/O1CN01WPCHlp27xJ198jF25_!!6000000007863-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: 320,\n      maxContentWidth: 320,\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 列宽计算规则\n\n组件会根据页面宽度自动计算栅栏数量和 `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小布局指按照 `Row`、`Col` 和 `Grid` 相互嵌套的方式，将 Block 内部切割为多个内容区域的规范和操作方式。\n\n### 独立单元格\n\n<p style=\"text-align:left;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i2/O1CN01eDrtZc2855kfqGmmN_!!6000000007880-2-tps-1202-902.png\" width=\"320\" />\n</p>\n\n```js\n<Cell />\n```\n\n### 横向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01IAF6jE1HYFKFOvkP6_!!6000000000769-2-tps-640-308.png\" width=\"320\" />\n</p>\n\n```js\n<Row>\n  <Cell />\n  <Cell />\n</Row>\n```\n\n### 纵向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i3/O1CN01mjA0DE1kgbPWuhKrj_!!6000000004713-2-tps-656-256.png\" width=\"320\" />\n</p>\n\n```js\n<Col>\n  <Cell />\n  <Cell />\n</Col>\n```\n\n### 网格拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01f7RGoP1FZ2miEZqgP_!!6000000000500-2-tps-640-308.png\" width=\"320\" />\n</p>\n\n```js\n<Grid cols={2}>\n  <Cell />\n  <Cell />\n  <Cell />\n  <Cell />\n</Grid>\n```\n\n### 段落&文本\n\n在单个 Cell 中对组件进行横向排版。如文本居中对齐：\n\n```js\n<P align=\"center\">\n  <Text type=\"h1\">文本</Text>\n  <Text type=\"body1\">文本</Text>\n</P>\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\n// 导入一套 Fusion 主题变量 (参见 Fusion 官网介绍)\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### 3. 注意事项\n\n请尽可能保证 Page 占有整个页面, 所有的内容都渲染支持的布局容器内部\n\n## API\n\n### Page\n\n页面\n\n| 参数               | 含义                                         | 类型                                              | 默认值        |\n| ------------------ | -------------------------------------------- | ------------------------------------------------- | ------------- |\n| prefix             | CSS 类名前缀，                               | string                                            | `pro-layout-` |\n| noPadding          | 禁用页面内边距,包括 Header， Content, Footer | Boolean                                           | `false`       |\n| sectionGap         | Header、Footer、Nav、Aside 和章节之间间隙    | Number                                            | -             |\n| blockGap           | Section 中栅栏布局间隙                       | Number                                            | -             |\n| gridGap            | 小布局间隙（包含行、列、网格布局）           | Number                                            | -             |\n| children           | 子元素                                       | RaxNode                                           | -             |\n| breakPoints        | 断点信息                                     | `BreakPoint[]`                                    | -             |\n| onBreakPointChange | 断点变更回调                                 | (curBreakPoint, oldBreakPoint, breakPoints)=>void |               |\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| fixed        | 固定在底部                                  | Boolean |           |\n| children     | 子元素                                      | RaxNode | -         |\n\n#### Page.Content\n\n内容\n\n| 参数     | 含义   | 类型    | 默认值 |\n| -------- | ------ | ------- | ------ |\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| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）        | Boolean | -      |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum    | -      |\n| gap      | 自定义元素间间距                                          | Number  | -      |\n| children | 子元素                                                    | RaxNode | -      |\n\n### Col\n\n列\n\n| 参数     | 含义                                               | 类型    | 默认值 |\n| -------- | -------------------------------------------------- | ------- | ------ |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | -      |\n| align    | 水平对齐方式， 可选值：left/center/right/stretch   | Enum    | -      |\n| gap      | 自定义元素间间距                                   | Number  | -      |\n| children | 子元素                                             | RaxNode | -      |\n\n### Cell\n\n单元格，其内容默认为 flex 纵向布局\n\n| 参数     | 含义                                                                                 | 类型    | 默认值 |\n| -------- | ------------------------------------------------------------------------------------ | ------- | ------ |\n| width    | 指定宽度                                                                             | Number  | -      |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）                                   | 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> 区别：\n>\n> - `<Cell>` 设置 gap 时，每一行的高度是自适应的\n> - `<Col>` 设置 gap 时，默认每一行的高度是等分的\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      | 子元素间保持水平间距, 可选： small/medium/large/false                      | Enum    | medium     |\n| verMargin    | 除 Text 节点外子元素间保持垂直外间距                                       | Boolean | true       |\n| beforeMargin | 段前内间距（第一个子元素无效）                                             | Number  | 0          |\n| afterMargin  | 段尾内间距（最后一个子元素无效）                                           | 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| 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-block-padding-content`    | 区块标题与内容部分的间隙 | `var(--s-2)`           |\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-small-spacing`          | 段落子元素的水平小间距   | `var(--s-1)`           |\n| `--page-p-medium-spacing`         | 段落子元素的水平中间距   | `var(--s-2)`           |\n| `--page-p-large-spacing`          | 段落子元素的水平大间距   | `var(--s-4)`           |\n| `--page-p-el-margin`              | 段落子元素的上下间距     | `var(--s-1)`           |\n| `--page-p-font-color`             | 段落默认字体色           | `var(--color-text1-4)` |\n\n> 在大布局模式下，如果需要支持较大屏幕， 则 CSS 单位需要视情况选择 `rpx` 或 `px`\n","gitHead":"c03e2f8fdb5baa24a1ed8f42c750ac75a8a8136c","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"},"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"]},"_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.1-beta.1/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.7.0-beta.3","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","@alifd/mobile-field-container":"^1.0.0-beta.2","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.1-beta.1_1651045787970_0.7490329342634934","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@alifd/mobile-layout","version":"1.0.1","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.1","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"33f25f8e52f2eacb882453a91f6f42a3ddb0a246","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.1.tgz","fileCount":185,"integrity":"sha512-GECKdeLYr/o8sdREl7a25x8Ry8SyalW5pmGfWz/68FHFi2S28VQpAC1BQB9G1ReaVaxiyfZSMI8ouNoQDTx/sg==","signatures":[{"sig":"MEQCIBSneSODP2bhQYrJislBR0mgAV7KjTep/H9jrPa7MyC4AiBHL2b3KSaT/KeJ0QrZscKs5+KJN2HVBdOEE9BhydZ7Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5656808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaS6NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriGg/+OqtrD1a/DFa6sErOjuvVnCYMU80+U4cvVjEUdlcrirQ5246G\r\nrw4bV3HPWRXW3vphs1RTq576Xqlvu4YKuhsPgWWiFYnaDlLeqhroo3rMG8q4\r\nzqs/V8QZEE5p60+2ncfF7KsnnMRk+4AXyPDORKFQwN9sbviZbevwE44R3wgz\r\nRIgiaWECtwyWqOmK7iDRJkuPHP0vwp5PqthBmTPRLqoMDF1S703+XY8RLQW3\r\n2OIE9PM56lZKKicOGA/47fQGFATVCK5Rw1SlSOzHVFF9KvILuJeRua4+28aO\r\nWp/n2qtc1nzKJfZHNUDDUbjbfagQYVKQEPkGLc4DOZalUAoeNu7sT7AdTGfN\r\nD88U5DqPHkEZvDB1MEEyePqo75f82yF0VqD2VyMSiugS/VvSxSBZIMsWau6P\r\nWHHSCghrCmPUM/YxckRbU74TV7dQ7vYkSfP+8VZ3Oc1hQ1I8y/Lni0G9PIyS\r\n2v4NBnSEV5f5Z4tCGS/ZbBWF3XSykd2ZQeZLzBAwbYNy//42FcE6afmqUHOQ\r\naf47/QNOb2kRBkqdZ7NZ6RBDrTQfXy5m2JdJVB5gu6DrsySlcYML3Q7mstrB\r\nwCG4swwLQLZxREvRIo0BIdDhWR4N6XBLBDDA/5jt4SJf/B7hAfZ2o1jKPgFQ\r\nhtyVQQj3qozPDmuuVy8e5u24t7hJZvwlclk=\r\n=iw5r\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","gitHead":"d8bacdc861ffeec11c7478f3e437f3186cbb3a7b","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"},"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"]},"_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,"componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.1/build/lowcode/assets-prod.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.7.0-beta.3","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","@alifd/mobile-field-container":"^1.0.0-beta.2","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.1_1651060365639_0.3608129459763607","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@alifd/mobile-layout","version":"1.0.2","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.2","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"69869f647893d0281e910e6152a55185674fc502","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.2.tgz","fileCount":185,"integrity":"sha512-fUKfkdUWvgQj55TB39YBYLSLeua7iN8JKde7rsOhX4vSR/EZZV4fOjz1HbpG8k8hmXO+4IaDKYojtUpFvHGr7w==","signatures":[{"sig":"MEUCIGnfZVuvOXP0YSbHdQqDCfSSCGCkrEwkJdApTWm+GxtcAiEAg102jpdA1corUfJL4I/HVMub93MJ7zUw2CoPGuAekNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5659898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia0iFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRbRAAoidsDoAhOWFtpk189Yj6FbSMEDR1i06D129A12WkvnAtAKx7\r\np1JnIQwKdyzNf//NhGdKIENj/nUjG4vOUAziPLV/cxACaF1VpfaneRlqRKFy\r\nNUYPHGGn6t5SnvAzQCxtb/Sy7FJgF7xAer249UOlHq6oa/2kEwd+f7ncHcvE\r\nsLEGhivlaAO3d5VUym9qOICvZwLT957oCCR+Gphf364HTQrSzOwGpYyT4Upp\r\nE0AjyQLdGUoB40tgHktLO7v0KYcH5a08b9HombENnx+7w+6/kH7Jyn39iTO6\r\nsN6m9BTd2svyB4YpG1p6bKxiVYY0Fj9CwOKUFDpw0s6sMoJjM7HNTcLBaG0K\r\n+Tt/QyiBwYxeK14NGmALf4s+OHwc3Q6u7HwAyI3tINyyXq6g1Vm5sWmqwUav\r\n0EK16HYjs/bBg+HiQmCrmkQ51bTUYZ6kCZ1GtkPqdcXZ6wsWUiWAQa+bo98T\r\nNTFAByeMb1w5TCUCVzDrzKv5V7EiGhpa5hNc8jmFKKXLf31XTT52Yfy8R0R1\r\nXasSEPs0vdtjo3xpQr+KsaM1G6qe40qe669EjtSAaBfsLCcSfQmQU0Kv63/N\r\nrrNXePvA/aJ+O9f+a73nKuukaTEkGPpdQz7GaZhRr/PWWvklsLKnmGEba5Xn\r\nM28Ryavx9rLoaAUio6HBumXcyhlEPwGKNzM=\r\n=ZrqP\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","gitHead":"41d1b1ee812e289c1fc627aaa570d995623687cb","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"},"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"]},"_nodeVersion":"14.15.1","dependencies":{"@uni/env":"^1.0.7","classnames":"^2.3.1","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.2/build/lowcode/assets-prod.json","isComponentLibrary":0},"devDependencies":{"rax":"^1.0.11","jest":"^24.8.0","execa":"^2.0.5","husky":"^3.0.1","tslib":"^2.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","rax-image":"^2.3.2","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.7.0-beta.3","lint-staged":"^9.4.2","@types/react":"^17.0.39","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","@ali/lowcode-rax-renderer":"^1.0.80","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","@alifd/mobile-field-container":"^1.0.0-beta.2","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.2_1651198085424_0.5783158348191306","host":"s3://npm-registry-packages"}},"1.0.3-beta.1":{"name":"@alifd/mobile-layout","version":"1.0.3-beta.1","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.3-beta.1","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"29e2e2c4f82ab795c329ab76f63e71bf5270c4a8","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.3-beta.1.tgz","fileCount":185,"integrity":"sha512-hP2geiKLaEhZejibR58qCFcYSSOv2ELBiqskexWeL8j5I6ieOD5gVyPJmfU8pvAdi3NcT1KyzD2f+GIyRLee3A==","signatures":[{"sig":"MEUCIET5Ltyc3Ca+zGOPzMvCLuqMUeHqIzxUL7HfCUovLgD8AiEAiMEWZ3OBbZLKDBgBU1ymjMefz6OnERRbPlKL/zGoSnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5195364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieMI3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzrQ//dTlr34Gi1cnW4bw9pxWkdtPhvA4GIsMfBXcus0xUEQkDQ58E\r\nB27ICKhgtxe0Z/Wwj/baU4prmD72f6TxOELbEvV+VPaODb1KbHOAfA2YEzJo\r\nAGYRut44mu00O145Y049E9AEgw76mI5i4Jl1Qx+0yAro0uP7nDPP8x+OXwbu\r\n0ditV9r+DWZUWRTNmy1R95G9m/QCBrwArZIFb5pe8MoonxKOdjc7E3ByGPcP\r\n/bZHg/ZMTdjTA4ghySYiCgfUETgqtQRYnGc/8zPzjE6bH1T0lKpIaOSH+jXh\r\nhagMK0U6c38uU2FktaYwCfUNv3CSQQjTPBuixCCZOG+PUKlXVJBt/V8q0vqS\r\nhAKLnq6BOilBG9ZCirJo4feiFSK8bFXSiclQoqM8xTgmuxmEluCqS/2SdE75\r\nmZzjMECFv3e2xfb3Z6Fqx8yoiuuMxspRjnTkxtrGBcwihqqDWBD/3WxiA4cU\r\nQFD22QEKsglCIWls1gCmAYzBO3srlgxz/o5hAVmfw3J6C9wUpots9CHXVD4D\r\n+g6ZbRilZmJ+Fr9gCqkehgazhAcF2DCjVKBbqmEwL/yAe/vHF9saojxgcKUI\r\nMce6ITbYXkRGqL0nKy5lfDts2I7dqJGeAWRFokG7perX83mlHHWO2qOZhgt6\r\nXA3qCiHzOfj7y9+MzGsiXklWf+p8XFYUwzQ=\r\n=076d\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","readme":"## 介绍\n\n一套面向移动端的布局解决方案。[🔗 源码使用介绍文档](https://yuque.antfin-inc.com/fusion-design-system/rzy6n5/fkz737)\n\n目标：不再写任何布局 `CSS` 代码\n\n**特性：**\n\n- 支持栅栏布局，并可自定义 `BreakPoints`\n- 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）\n- 大小布局模式拆分，逻辑清晰，布局灵活\n- 完美支持小程序\n\n<p style=\"text-align:left;width:600px;background:#fff;\">\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  - `<Page.Header>`: 序章\n  - `<Page.Content>`: 内容\n  - `<Page.Footer>`: 终章\n- `<Section>`: 章\n- `<Block>`: 区块\n\n**小布局**\n\n- `<Cell>`: 单元格，主轴默认为 垂直方向的 flex 排版\n- `<Row>`: 行\n- `<Col>`: 列\n- `<Grid>`: 网格\n- `<P>`: 段落\n- `<Text>`: 文本\n\n## 大布局模式\n\n用于在页面栅栏系统的上构建出整个页面的骨架，其最终产物的是一组响应式布局的空容器。\n\n<p style=\"text-align:left;background:#fff; width:600px;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i2/O1CN01WPCHlp27xJ198jF25_!!6000000007863-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: 320,\n      maxContentWidth: 320,\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 列宽计算规则\n\n组件会根据页面宽度自动计算栅栏数量和 `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小布局指按照 `Row`、`Col` 和 `Grid` 相互嵌套的方式，将 Block 内部切割为多个内容区域的规范和操作方式。\n\n### 独立单元格\n\n<p style=\"text-align:left;width:130px;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i2/O1CN01eDrtZc2855kfqGmmN_!!6000000007880-2-tps-1202-902.png\" width=\"320\" />\n</p>\n\n```js\n<Cell />\n```\n\n### 横向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01IAF6jE1HYFKFOvkP6_!!6000000000769-2-tps-640-308.png\" width=\"320\" />\n</p>\n\n```js\n<Row>\n  <Cell />\n  <Cell />\n</Row>\n```\n\n### 纵向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i3/O1CN01mjA0DE1kgbPWuhKrj_!!6000000004713-2-tps-656-256.png\" width=\"320\" />\n</p>\n\n```js\n<Col>\n  <Cell />\n  <Cell />\n</Col>\n```\n\n### 网格拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01f7RGoP1FZ2miEZqgP_!!6000000000500-2-tps-640-308.png\" width=\"320\" />\n</p>c\n\n```js\n<Grid cols={2}>\n  <Cell />\n  <Cell />\n  <Cell />\n  <Cell />\n</Grid>\n```\n\n### 复杂拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i1/O1CN01Mwy4nr1hwgTIGQmYM_!!6000000004342-2-tps-568-168.png\" width=\"320\" />\n</p>\n\n```js\n<Row>\n  <Cell />\n  <Col>\n    <Cell />\n    <Cell />\n  </Col>\n</Row>\n```\n\n### 段落&文本\n\n在单个 Cell 中对组件进行横向排版。如文本居中对齐：\n\n```js\n<P align=\"center\">\n  <Text type=\"h1\">文本</Text>\n  <Text type=\"body1\">文本</Text>\n</P>\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, Block, Row, Cell, P, Text } from '@alife/mobile-layout';\nimport { Button } from '@alifd/meet';\n\n// 导入一套 Fusion 主题变量 (参见 Fusion 官网介绍)\nimport '@alife/mobile-theme-default/index.css';\n\n<Page>\n  <Section>\n    <Block span={2}>\n      <Row>\n        <Cell>\n          <Button>按钮 1</Button>\n        </Cell>\n        <Cell>\n          <Button>按钮 2</Button>\n        </Cell>\n      </Row>\n    </Block>\n    <Block span={2}>\n      <Cell verAlign=\"middle\">\n        <P align=\"right\">\n          <Text>文本</Text>\n          <Text>文本</Text>\n        </P>\n      </Cell>\n    </Block>\n  </Section>\n</Page>;\n```\n\n### 3. 注意事项\n\n使用 “自然布局” 为整个页面布局，可以达到最优效果，所有的内容都渲染在支持的容器中\n\n## API\n\n### Page\n\n页面\n\n| 参数               | 含义                                         | 类型                                              | 默认值        |\n| ------------------ | -------------------------------------------- | ------------------------------------------------- | ------------- |\n| prefix             | CSS 类名前缀，                               | string                                            | `pro-layout-` |\n| noPadding          | 禁用页面内边距,包括 Header， Content, Footer | Boolean                                           | `false`       |\n| sectionGap         | Header、Footer、Nav、Aside 和章节之间间隙    | Number                                            | -             |\n| blockGap           | Section 中栅栏布局间隙                       | Number                                            | -             |\n| gridGap            | 小布局间隙（包含行、列、网格布局）           | Number                                            | -             |\n| children           | 子元素                                       | RaxNode                                           | -             |\n| breakPoints        | 断点信息                                     | `BreakPoint[]`                                    | -             |\n| onBreakPointChange | 断点变更回调                                 | (curBreakPoint, oldBreakPoint, breakPoints)=>void |               |\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| fixed        | 固定在底部                                  | Boolean |           |\n| children     | 子元素                                      | RaxNode | -         |\n\n#### Page.Content\n\n内容\n\n| 参数     | 含义   | 类型    | 默认值 |\n| -------- | ------ | ------- | ------ |\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| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）        | Boolean | -      |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum    | -      |\n| gap      | 自定义元素间间距                                          | Number  | -      |\n| children | 子元素                                                    | RaxNode | -      |\n\n### Col\n\n列\n\n| 参数     | 含义                                               | 类型    | 默认值 |\n| -------- | -------------------------------------------------- | ------- | ------ |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | -      |\n| align    | 水平对齐方式， 可选值：left/center/right/stretch   | Enum    | -      |\n| gap      | 自定义元素间间距                                   | Number  | -      |\n| children | 子元素                                             | RaxNode | -      |\n\n### Grid\n\n网格\n\n| 参数       | 含义                                          | 类型                         | 默认值 |\n| ---------- | --------------------------------------------- | ---------------------------- | ------ |\n| cols       | 指定列数                                      | number                       |        |\n| rows       | 指定行数                                      | number                       |        |\n| minWidth   | 单元格最小宽度                                | number                       |        |\n| maxWidth   | 单元格最大宽度                                | number                       |        |\n| rowGap     | 单元格行间距, 可选值: small/medium/large/数值 | Enum                         |        |\n| colGap     | 单元格列间距, 可选值: small/medium/large/数值 | Enum                         |        |\n| renderItem | 手动渲染单个单元格内容                        | (rowIndex,colIndex)=>RaxNode |        |\n| children   | 子元素，默认应为 `Cell`                       | RaxNode                      | -      |\n\n### Cell\n\n单元格，其内容默认为 flex 纵向布局\n\n| 参数     | 含义                                                                                 | 类型    | 默认值 |\n| -------- | ------------------------------------------------------------------------------------ | ------- | ------ |\n| width    | 指定宽度                                                                             | Number  | -      |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）                                   | 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> 区别：\n>\n> - `<Cell>` 设置 gap 时，每一行的高度是自适应的\n> - `<Col>` 设置 gap 时，默认每一行的高度是等分的\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      | 子元素间保持水平间距, 可选： small/medium/large/false                      | Enum    | medium     |\n| verMargin    | 除 Text 节点外子元素间保持垂直外间距                                       | Boolean | true       |\n| beforeMargin | 段前内间距（第一个子元素无效）                                             | Number  | 0          |\n| afterMargin  | 段尾内间距（最后一个子元素无效）                                           | 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| 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-small-spacing`          | 段落子元素的水平小间距 | `var(--s-1)`           |\n| `--page-p-medium-spacing`         | 段落子元素的水平中间距 | `var(--s-2)`           |\n| `--page-p-large-spacing`          | 段落子元素的水平大间距 | `var(--s-4)`           |\n| `--page-p-el-margin`              | 段落子元素的上下间距   | `var(--s-1)`           |\n| `--page-p-font-color`             | 段落默认字体色         | `var(--color-text1-4)` |\n\n> 在大布局模式下，如果需要支持较大屏幕， 则 CSS 单位需要视情况选择 `rpx` 或 `px`\n","gitHead":"9443c64fcbbd54da78642208c2edc14f401f7833","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"},"repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"一套面向移动端的布局解决方案。[🔗 源码使用介绍文档](https://yuque.antfin-inc.com/fusion-design-system/rzy6n5/fkz737)","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"]},"_nodeVersion":"14.15.1","dependencies":{"@uni/env":"^1.0.7","rax-view":"^2.3.0","classnames":"^2.3.1","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.3-beta.1/build/lowcode/assets-daily.json","isComponentLibrary":0},"devDependencies":{"rax":"^1.0.11","jest":"^24.8.0","execa":"^2.0.5","husky":"^3.0.1","tslib":"^2.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","rax-image":"^2.3.2","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.7.0-beta.3","lint-staged":"^9.4.2","@types/react":"^17.0.39","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","@ali/lowcode-rax-renderer":"^1.0.80","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","@alifd/mobile-field-container":"^1.0.0-beta.2","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.3-beta.1_1652081206714_0.5603649634693662","host":"s3://npm-registry-packages"}},"1.0.3-beta.2":{"name":"@alifd/mobile-layout","version":"1.0.3-beta.2","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.3-beta.2","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"6db475317a00b1821cb961e3e42484a99d598ea7","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.3-beta.2.tgz","fileCount":185,"integrity":"sha512-h8ifflcpLujuuQp7ppYwB25Rv+pYnMO/B2kRNnUXEPpmFAqHCdRIKLKtVXfiWVc+F6uGfTiXJz7dAAVbTGUoNQ==","signatures":[{"sig":"MEUCIGwuc0tfUMmpTsEf+0z5NrxRPC4eV1JQKxQZl+l5DZ/xAiEAmLVMxkda+6fa/tu06vdsM/hxJfnZYpWRQgorPZaOBbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5248138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieNALACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrF8w/+NFKvP6pUMQ82W+kMxJzRiokkOgoYrSG1IrFKMbs8aFuPPgZV\r\nZKKmQcD01KXpWs9rCU5ifVI9JVrSVhpGS9mhL2YRQJbAjY5mdMHnQvZHy9Tr\r\nHlfIKDasVAJP2htZ2e30bjkvhgpyVehlhTXypP+ikmCvKAc9BRejNOifa2eh\r\nb+4ffudL/diBcm86TmBsJbmamIQcqa/3Yv2yG3an/wMLPLrUKx9wrTu6tkCu\r\n+QaUEkLwO3Jnk+h0hgVxM1U9g/2Sq+u5mTRNvp0M6jgmDX/sH/13iSBhJWAx\r\nqlX7pISMxV1rGPRPL/lcPgRIKdHLnjHOAbq4cH7oJu5azKVzIhezbUrFeSzc\r\n1NWjnvweQN8D9P/afiUqhFTBO0myBUnS3AOBkha82NNRJaCL1py0JI5B7TwJ\r\nKf9hwuuvvHl7acKnypHbrhebEzTxGd3biMGGmZX/DLUJ+FbCiDK954VaCSck\r\nTXwcrC3LgKZ6TpX7yozy4pGViSfLjGgjgDoh3l1hmVIzI30D2SQVSACq9502\r\nJVHo3u6Bm+MMPLRVh3XkGdg6XEdrJfJCw9Yy8rPmMu1V8YWC9kd8RD7IHBMV\r\n6ZA7qcnSk9h+eJrTfOuKpBBJDqwc6vCEZ8kdqvo2JVkOLOJJKqS0ZmXztDio\r\nmtRMsm/5oGLUnwkZfyfG7FsvIrHEJNmY/2s=\r\n=FOP3\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","readme":"## 介绍\n\n一套面向移动端的布局解决方案。[🔗 使用文档](https://yuque.antfin-inc.com/fusion-design-system/rzy6n5/fkz737)\n\n目标：**不再写任何布局 `CSS` 代码**\n\n**特性：**\n\n- 支持栅栏布局，并可自定义 `BreakPoints`\n- 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）\n- 大小布局模式拆分，逻辑清晰，布局灵活\n- 完美支持小程序\n\n<p style=\"text-align:left;width:600px;background:#fff;\">\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  - `<Page.Header>`: 序章\n  - `<Page.Content>`: 内容\n  - `<Page.Footer>`: 终章\n- `<Section>`: 章\n- `<Block>`: 区块\n\n**小布局**\n\n- `<Cell>`: 单元格，主轴默认为 垂直方向的 flex 排版\n- `<Row>`: 行\n- `<Col>`: 列\n- `<Grid>`: 网格\n- `<P>`: 段落\n- `<Text>`: 文本\n\n## 大布局模式\n\n用于在页面栅栏系统的上构建出整个页面的骨架，其最终产物的是一组响应式布局的空容器。\n\n<p style=\"text-align:left;background:#fff; width:600px;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i2/O1CN01WPCHlp27xJ198jF25_!!6000000007863-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: 320,\n      maxContentWidth: 320,\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 列宽计算规则\n\n组件会根据页面宽度自动计算栅栏数量和 `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小布局指按照 `Row`、`Col` 和 `Grid` 相互嵌套的方式，将 Block 内部切割为多个内容区域的规范和操作方式。\n\n### 独立单元格\n\n<p style=\"text-align:left;width:130px;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i2/O1CN01eDrtZc2855kfqGmmN_!!6000000007880-2-tps-1202-902.png\" width=\"320\" />\n</p>\n\n```js\n<Cell />\n```\n\n### 横向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01IAF6jE1HYFKFOvkP6_!!6000000000769-2-tps-640-308.png\" width=\"320\" />\n</p>\n\n```js\n<Row>\n  <Cell />\n  <Cell />\n</Row>\n```\n\n### 纵向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i3/O1CN01mjA0DE1kgbPWuhKrj_!!6000000004713-2-tps-656-256.png\" width=\"320\" />\n</p>\n\n```js\n<Col>\n  <Cell />\n  <Cell />\n</Col>\n```\n\n### 网格拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01f7RGoP1FZ2miEZqgP_!!6000000000500-2-tps-640-308.png\" width=\"320\" />\n</p>c\n\n```js\n<Grid cols={2}>\n  <Cell />\n  <Cell />\n  <Cell />\n  <Cell />\n</Grid>\n```\n\n### 复杂拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i1/O1CN01Mwy4nr1hwgTIGQmYM_!!6000000004342-2-tps-568-168.png\" width=\"320\" />\n</p>\n\n```js\n<Row>\n  <Cell />\n  <Col>\n    <Cell />\n    <Cell />\n  </Col>\n</Row>\n```\n\n### 段落&文本\n\n在单个 Cell 中对组件进行横向排版。如文本居中对齐：\n\n```js\n<P align=\"center\">\n  <Text type=\"h1\">文本</Text>\n  <Text type=\"body1\">文本</Text>\n</P>\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, Block, Row, Cell, P, Text } from '@alife/mobile-layout';\nimport { Button } from '@alifd/meet';\n\n// 导入一套 Fusion 主题变量 (参见 Fusion 官网介绍)\nimport '@alife/mobile-theme-default/index.css';\n\n<Page>\n  <Section>\n    <Block span={2}>\n      <Row>\n        <Cell>\n          <Button>按钮 1</Button>\n        </Cell>\n        <Cell>\n          <Button>按钮 2</Button>\n        </Cell>\n      </Row>\n    </Block>\n    <Block span={2}>\n      <Cell verAlign=\"middle\">\n        <P align=\"right\">\n          <Text>文本</Text>\n          <Text>文本</Text>\n        </P>\n      </Cell>\n    </Block>\n  </Section>\n</Page>;\n```\n\n### 3. 注意事项\n\n使用 “自然布局” 为整个页面布局，可以达到最优效果，所有的内容都渲染在支持的容器中\n\n## API\n\n### Page\n\n页面\n\n| 参数               | 含义                                         | 类型                                              | 默认值        |\n| ------------------ | -------------------------------------------- | ------------------------------------------------- | ------------- |\n| prefix             | CSS 类名前缀，                               | string                                            | `pro-layout-` |\n| noPadding          | 禁用页面内边距,包括 Header， Content, Footer | Boolean                                           | `false`       |\n| sectionGap         | Header、Footer、Nav、Aside 和章节之间间隙    | Number                                            | -             |\n| blockGap           | Section 中栅栏布局间隙                       | Number                                            | -             |\n| gridGap            | 小布局间隙（包含行、列、网格布局）           | Number                                            | -             |\n| children           | 子元素                                       | RaxNode                                           | -             |\n| breakPoints        | 断点信息                                     | `BreakPoint[]`                                    | -             |\n| onBreakPointChange | 断点变更回调                                 | (curBreakPoint, oldBreakPoint, breakPoints)=>void |               |\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| fixed        | 固定在底部                                  | Boolean |           |\n| children     | 子元素                                      | RaxNode | -         |\n\n#### Page.Content\n\n内容\n\n| 参数     | 含义   | 类型    | 默认值 |\n| -------- | ------ | ------- | ------ |\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| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）        | Boolean | -      |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum    | -      |\n| gap      | 自定义元素间间距                                          | Number  | -      |\n| children | 子元素                                                    | RaxNode | -      |\n\n### Col\n\n列\n\n| 参数     | 含义                                               | 类型    | 默认值 |\n| -------- | -------------------------------------------------- | ------- | ------ |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | -      |\n| align    | 水平对齐方式， 可选值：left/center/right/stretch   | Enum    | -      |\n| gap      | 自定义元素间间距                                   | Number  | -      |\n| children | 子元素                                             | RaxNode | -      |\n\n### Grid\n\n网格\n\n| 参数       | 含义                                          | 类型                         | 默认值 |\n| ---------- | --------------------------------------------- | ---------------------------- | ------ |\n| cols       | 指定列数                                      | number                       |        |\n| rows       | 指定行数                                      | number                       |        |\n| minWidth   | 单元格最小宽度                                | number                       |        |\n| maxWidth   | 单元格最大宽度                                | number                       |        |\n| rowGap     | 单元格行间距, 可选值: small/medium/large/数值 | Enum                         |        |\n| colGap     | 单元格列间距, 可选值: small/medium/large/数值 | Enum                         |        |\n| renderItem | 手动渲染单个单元格内容                        | (rowIndex,colIndex)=>RaxNode |        |\n| children   | 子元素，默认应为 `Cell`                       | RaxNode                      | -      |\n\n### Cell\n\n单元格，其内容默认为 flex 纵向布局\n\n| 参数     | 含义                                                                                 | 类型    | 默认值 |\n| -------- | ------------------------------------------------------------------------------------ | ------- | ------ |\n| width    | 指定宽度                                                                             | Number  | -      |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）                                   | 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> 区别：\n>\n> - `<Cell>` 设置 gap 时，每一行的高度是自适应的\n> - `<Col>` 设置 gap 时，默认每一行的高度是等分的\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      | 子元素间保持水平间距, 可选： small/medium/large/false                      | Enum    | medium     |\n| verMargin    | 除 Text 节点外子元素间保持垂直外间距                                       | Boolean | true       |\n| beforeMargin | 段前内间距（第一个子元素无效）                                             | Number  | 0          |\n| afterMargin  | 段尾内间距（最后一个子元素无效）                                           | 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| 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-small-spacing`          | 段落子元素的水平小间距 | `var(--s-1)`           |\n| `--page-p-medium-spacing`         | 段落子元素的水平中间距 | `var(--s-2)`           |\n| `--page-p-large-spacing`          | 段落子元素的水平大间距 | `var(--s-4)`           |\n| `--page-p-el-margin`              | 段落子元素的上下间距   | `var(--s-1)`           |\n| `--page-p-font-color`             | 段落默认字体色         | `var(--color-text1-4)` |\n\n> 在大布局模式下，如果需要支持较大屏幕， 则 CSS 单位需要视情况选择 `rpx` 或 `px`\n","gitHead":"75a800e5d7ca715c8f933b72785bcda3de1aa4a3","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"},"repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"一套面向移动端的布局解决方案。[🔗 使用文档](https://yuque.antfin-inc.com/fusion-design-system/rzy6n5/fkz737)","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"]},"_nodeVersion":"14.15.1","dependencies":{"@uni/env":"^1.0.7","rax-view":"^2.3.0","classnames":"^2.3.1","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.3-beta.2/build/lowcode/assets-daily.json","isComponentLibrary":0},"devDependencies":{"rax":"^1.0.11","jest":"^24.8.0","execa":"^2.0.5","husky":"^3.0.1","tslib":"^2.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","rax-image":"^2.3.2","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.7.0-beta.3","lint-staged":"^9.4.2","@types/react":"^17.0.39","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","@ali/lowcode-rax-renderer":"^1.0.80","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","@alifd/mobile-field-container":"^1.0.0-beta.2","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.3-beta.2_1652084747129_0.5790740526397378","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@alifd/mobile-layout","version":"1.0.3","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.3","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"bf613e210f29bf68d880b77d59d3d2780ae4636c","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.3.tgz","fileCount":185,"integrity":"sha512-K3Smbk4xQyo+hx3B6+nRr2LtPManYiaHZQ4ASu10EGem8cnQGZRzx3M6wnH3QQsglNtqi2rH/9Xs5nfBU8iviA==","signatures":[{"sig":"MEQCIC3iOsk+7Vc5QkunMNs6j7l4Cp1BRlfy65x12wwYpXtaAiBO1uwsJSRtdm8Ala+xxczJCWKIUwePf/cogSuD++nvxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5250078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieOj4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmplgg//fLD5FOQXDjSpvxseo38ADz1HK//Vx9gNKpTTxv+eU9nwSzrb\r\nHyZsbb9ubAPLfqYMH1HoduKPopHCjt7nSKRVFxga0JFvHVcYKnF+dlFIbkfO\r\neF09aKGQF5wmMqIZEKY16RjT+ZXONwjbojdt3SD4V4eMUNNClhQT/uGSpvM6\r\n9na1y1ufFIzAmubZQps+aar1rx6kTpRya6Nm3rhMADxwxAG3KKye5HDGUl2H\r\nuJMqhz4Sx1HkXZl44RRkmOnKfUI8Yl3FGkvz2QQhDNvRP4ecpLEHOR+kdEqj\r\nXi1Wg/DzAaGKsPd2R8Ggd1JN3mWOAvy+EHUdbPlHMP7/Phg71ubo7RW/KBIt\r\nV5l2wgp4fGTLvJWP7x2Pcr12Tl9O3buzSpiw1TWa7/bFFCnucCcp/IqVIHSV\r\nwtZ8clQxM8KnQUSFqvIk62kTxg9fmhl7lbQh1lm89ngaqal4Y9Gx9zARXiXO\r\nyt3AOp1dfczqGdN11xJQyfFs/2QbzojdhcRJfuxBpnYHnQNpti1VCqzIQVH7\r\n0+nVIsnotj0SPRx7RSeso87xiLA8NsDhAdaKHTL0PHiWsFoHGJ303vstcJUE\r\n8wo33rv5s3NHP89blYourWygzgcIZ1Gh3BU5nHRODx7DPMQOZ0sk9l7pMYdr\r\nbuB8e3np9tzpcDkvac4GvljuQj75kpOwICQ=\r\n=qje0\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","gitHead":"6740d0a3cafd932ca174bd742f08058bab5571f4","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"},"repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"一套面向移动端的布局解决方案。[🔗 使用文档](https://yuque.antfin-inc.com/fusion-design-system/rzy6n5/fkz737)","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"]},"_nodeVersion":"14.15.1","dependencies":{"@uni/env":"^1.0.7","classnames":"^2.3.1","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.3/build/lowcode/assets-prod.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","rax-view":"^2.3.0","ts-mocha":"^8.0.0","expect.js":"^0.3.1","node-sass":"^4.0.0","rax-image":"^2.3.2","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.7.1","lint-staged":"^9.4.2","@types/react":"^17.0.39","driver-universal":"^3.1.0","@alifd/meet-react":"^2.7.1","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","@ali/lowcode-rax-renderer":"^1.0.80","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","@alifd/mobile-field-container":"^1.0.1","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.3_1652091128196_0.8847169520001752","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@alifd/mobile-layout","version":"1.0.4","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.4","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"251b54aafe2ca19b0e9a59094a1f8cf5b732c429","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.4.tgz","fileCount":185,"integrity":"sha512-kz3TsydDZ2/Ng3L2VJtWCmc/ceePYb2NoyICByZ4RfkxmLuuM6nAmjtUvW1rVNl7CX4Hi//ARuwtj5JmJuQJNw==","signatures":[{"sig":"MEQCIC6w+seRel33s1aOnDOkmCHflnjBV7oBwMbrWruvJR0BAiBtHYfCTs6s3m0yi5xXHPBO0xNIMuaA5i1qEed5ngiSZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5252637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiezQlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTvA/+LFjzNgV3y3X+jLzX+/i0xm3wj3OGTJ3frt7sU4qYChH6AoOZ\r\n6LhOXx9uYy5E+8loQFoj1Kd5WvYXJ3D3Cmp8ea39+uVlH6p5zOOvq1jZ6G1y\r\n31ZToYssfn4aHQNFbUIWr4bYQnvIpY/sPFqBhAR9f3+HlvE6mozwdwp2RyII\r\njXnDifwVRbhrWlHTSntpgpB+AHbBCCdpH65fKUfoNQIJ4UgXHUSM2G1Zyu+G\r\n/amdPzLUZ49yqqwZYCYi0hf8tOqFqpXz0VdUhq890+TxY5R/uoatSuiN00dk\r\nSKZQH1nSzn373WRG+SZKiApnIbFOKv6DDsN9UbOH2bTOZQ7cu8RVe4ZiczB+\r\nMYlfwuDAFocCQr8XyAm7+xpWX2GZfkA2K/++l0L9gq51Mtpng67aOjw4ryo0\r\n0sa4LFcnlSlsIgwgadLML9f+zofIOyHG2IgneNR8CpVNp55RQkmLYk8CIY86\r\nfijeGyHHEtDnfnmWEO1tuRUjfxHKp0bsZ4P26F0pN4paL8uOuowUpFbPD7zj\r\nctgFVeV7Mt+jEI7ONNcob4cokmGCMGx6dQAE/fWko0ly7IValuay5p168oHL\r\nSbUU7kBMd7lbo0JFgV2vtbryEk1jbyXflv24efQbq0D3/3EWVKHOGNUkdyUi\r\nj3AWODtRkL+6z7ljztHQdMJFmDmY3D1Z6VM=\r\n=YB9r\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","gitHead":"d5809e705356abe9e83f6298d3c4d3b0ea792c66","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"},"repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"一套面向移动端的布局解决方案。[🔗 使用文档](https://yuque.antfin-inc.com/fusion-design-system/rzy6n5/fkz737)","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"]},"_nodeVersion":"14.15.1","dependencies":{"@uni/env":"^1.0.7","classnames":"^2.3.1","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.4/build/lowcode/assets-prod.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","rax-view":"^2.3.0","ts-mocha":"^8.0.0","expect.js":"^0.3.1","node-sass":"^4.0.0","rax-image":"^2.3.2","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.7.1","lint-staged":"^9.4.2","@types/react":"^17.0.39","driver-universal":"^3.1.0","@alifd/meet-react":"^2.7.1","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","@ali/lowcode-rax-renderer":"^1.0.80","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","@alifd/mobile-field-container":"^1.0.1","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.4_1652241445275_0.8796309401375506","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@alifd/mobile-layout","version":"1.0.5","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.5","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"5715bd2b86edec55439e89126a50365d67cc9a27","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.5.tgz","fileCount":185,"integrity":"sha512-lBI0rKto/N/KP22HW2RG7GRXZijhGrqjVCxs4cCsxP4xeUTKGux7h4KyvyQYsP/j8Od4erc1brSljpvxA6emtg==","signatures":[{"sig":"MEUCIQCOG2K6IfhN8P6+8Xg3TtJaUFTgwzxGH1zrY9Pk0Jfz9gIgXU3OVZ7SD9ZihNlZi+VlLQGTjgn4IKqBluXh58eyt9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5254634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie1WmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRfw//WPdcKthc5e1ruuuuKqvb4OYdVIey5W/gYZTcPqt3OIjAMiHP\r\nNc8YAmzMinW6B7ubJXVMElPS/HjrfEj1DOniCCVfuRIaAp+sRAY9oWKw6yj+\r\nXgzjc1BV1lQnwu9BsTGGHcdevvI+ZVv+3gBGzlQSVVRbg9TjWw3faLkMzbHP\r\np77DOGdqp6Za2z3xfBRIn2pDgykFUCutXoTrJRJWsClATpPw2ALm/yQazD1X\r\nwoVTVy2fBh2W9A0lIpGB/E8CcwJA02sYdVic8P0Q6TPK5gDJlXL93KlOZ8u9\r\nPQ0rAgTPtiJgnuyQ31ZtUMp6Xk8UXh4iH1BiWZXbNPIqHC2EMUxj5XFk+FK0\r\ngLLjkzohE4NR9LvRimdlwc6OmVul/ecdmNIzlbLJm2FRlPmD12NJpjN9AnUG\r\n7/ueHMmn3qMuVKrlEk16HP3TnB5YOnBxuI4Js0TOnqOef6CWvPl9cdvwuagS\r\nCX25gGp6u+e42xgaba2eG7pXWhBjqCG0IDPel258uJxSJdZ9sx5i3xTjwrQ2\r\nUUstDeAjXLQNQkv3kqyozGM59wKxwpkbvBxDxgHX3Xw0KQ2xi5lWUhFUd99C\r\nDfaBoEyM36p1+jiary7fVGqFOTuRc7OvubG83729CW8bjy3B/2+YbIKDvuUJ\r\nZDe/ppdOfbY4FHnAgFncA5OohUtsd/y6LEo=\r\n=8bQ4\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","gitHead":"7fb19abb2adbf7a9c80a6de4b1f9ec2cbd9b20e2","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"},"repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"一套面向移动端的布局解决方案。[🔗 使用文档](https://yuque.antfin-inc.com/fusion-design-system/rzy6n5/fkz737)","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"]},"_nodeVersion":"14.15.1","dependencies":{"@uni/env":"^1.0.7","classnames":"^2.3.1","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.5/build/lowcode/assets-prod.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","rax-view":"^2.3.0","ts-mocha":"^8.0.0","expect.js":"^0.3.1","node-sass":"^4.0.0","rax-image":"^2.3.2","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.7.1","lint-staged":"^9.4.2","@types/react":"^17.0.39","driver-universal":"^3.1.0","@alifd/meet-react":"^2.7.1","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","@ali/lowcode-rax-renderer":"^1.0.80","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","@alifd/mobile-field-container":"^1.0.1","build-plugin-component-multiple":"^1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.5_1652250022522_0.7827759630812599","host":"s3://npm-registry-packages"}},"1.0.6-beta.1":{"name":"@alifd/mobile-layout","version":"1.0.6-beta.1","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.6-beta.1","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"eb6db31ebbbb054f7b1972641cd8f960ac1815dc","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.6-beta.1.tgz","fileCount":140,"integrity":"sha512-Q10OSaRSD3RcrWr+y/Hl2b5nv0FmT5ikB1gLiuvawiUtSl2lz2W/1dQGKmntgUYGszfqjdbMbb23BLLMJHC3FA==","signatures":[{"sig":"MEQCIGDrbk37ATEBReKW+AuGxhB4ss6TwUl/2CPc6JqNFKO8AiB1bOLvRb6wE+u7ytPFDSkDrOtNUJTdNgqge3M0gmTiHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5315024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiv3rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPWxAAmWEjjsypid7EbU7aFa6uk1fO0Woc5enUoT//a10XVsDUgxIA\r\nHcTMgoUB5aSu7pxjZJzO6hXKtPrxmRmq8nLjygtm81lk2gYBhxaHDt8UTEEt\r\n7r7CmMN/3O45Or/NOSGGYzOEYDxDrb9QPlnveKyKBgs8xaeqSyREyREFcfGj\r\nj49UxIkSYfAJfL2kCtZK2A9KwyzfdqgANchB4uhmLTjN5RLLXeOfohWoW3sh\r\n/zAQXtVHyvIpz8dr/ZVnr03QvnUShnNmWY02GgOTWtTXQZBScjHODJldUUts\r\n+2CLIxyEFJNFeXouYCA7PtRV4uGwhQD6CsFx+KxxjMgAOuJdM5p3tSyyVIPh\r\n9qd7gKdIk5Ty18v6VLkWPEiZIipMVD3beO/fzPaXv5Ukq8/aDpnv3ou7lleV\r\nuZUyafhMkVi8SyNwXWoGvDIFYQIBqOQEZpzxqLtxXodDGZSga2sLsnv0M3xM\r\nm8lZTdPe0WkgdreJYXSbqT/m7jA+6H7yjCJBdtzLbBOLxoGLk+PWXOkpJQMw\r\nNcKA3dxJysfshpstQvKAnRH6KI4DPAkYy3r7xBi3lFS9GzvoGb6orwZbjAqQ\r\nBPoqiDWa+nMqGTjPVYqdqac91VxrUi0CfGojOCt912udI4BfGk0JfAaGQtLq\r\neOG3hqLtjBvpAUGHHgr2xC8LTAiw+iuXZow=\r\n=NHVY\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","readme":"## 介绍\n\n<p align=\"center\">\n  <a href=\"https://fusion.design/\" target=\"_blank\">\n    <img alt=\"Fusion\" src=\"https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg\" width=\"200\">\n  </a>\n</p>\n\n<p align=\"center\">\n  <img src=\"https://img.shields.io/npm/v/@alifd/mobile-layout.svg\">\n  <img src=\"https://img.shields.io/npm/dm/@alifd/mobile-layout.svg\">\n</p>\n\n一套面向移动端的布局解决方案。[🔗 使用文档](https://yuque.antfin-inc.com/fusion-design-system/rzy6n5/fkz737)\n\n目标：**不再写任何布局 `CSS` 代码**\n\n**特性：**\n\n- 支持栅栏布局，并可自定义 `BreakPoints`\n- 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）\n- 大小布局模式拆分，逻辑清晰，布局灵活\n- 完美支持小程序(微信、支付宝、钉钉)\n\n<p style=\"text-align:left;width:600px;background:#fff;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01rB1mV21anL51o4kAF_!!6000000003374-2-tps-1236-322.png\"/>\n</p>\n\n**大布局**\n\n- `<Page>`: 页\n  - `<Page.Header>`: 序章\n  - `<Page.Content>`: 内容\n  - `<Page.Footer>`: 终章\n- `<Section>`: 章\n- `<Block>`: 区块\n\n**小布局**\n\n- `<Cell>`: 单元格，主轴默认为 垂直方向的 flex 排版\n- `<Row>`: 行\n- `<Col>`: 列\n- `<Grid>`: 网格\n\n**段落&文本**\n\n- `<P>`: 段落\n- `<Text>`: 文本\n\n## 大布局模式\n\n用于在页面栅栏系统的上构建出整个页面的骨架，其最终产物的是一组响应式布局的空容器。\n\n<p style=\"text-align:left;background:#fff; width:600px;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i2/O1CN01WPCHlp27xJ198jF25_!!6000000007863-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: 320,\n      maxContentWidth: 320,\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 列宽计算规则\n\n组件会根据页面宽度自动计算栅栏数量和 `Block` 的列宽，计算逻辑为：\n\n<p style=\"text-align:left;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01aUg7js1PMLyMAYU9U_!!6000000001826-2-tps-2282-278.png\" />\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小布局指按照 `Row`、`Col` 和 `Grid` 相互嵌套的方式，将 Block 内部切割为多个内容区域的规范和操作方式。\n\n<p>\n<img src=\"https://img.alicdn.com/imgextra/i3/O1CN01JzXEQD1Q9MLnEExFA_!!6000000001933-2-tps-3156-1151.png\" style=\"max-width: 1400px; width: 100%\" />\n</p>\n\n### 独立单元格\n\n<p style=\"text-align:left;width:130px;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i2/O1CN01eDrtZc2855kfqGmmN_!!6000000007880-2-tps-1202-902.png\" width=\"130\" />\n</p>\n\n```html\n<Cell />\n```\n\n### 横向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01IAF6jE1HYFKFOvkP6_!!6000000000769-2-tps-640-308.png\" width=\"320\" />\n</p>\n\n```html\n<Row>\n  <Cell />\n  <Cell />\n</Row>\n```\n\n### 纵向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i3/O1CN01mjA0DE1kgbPWuhKrj_!!6000000004713-2-tps-656-256.png\" width=\"320\" />\n</p>\n\n```html\n<Col>\n  <Cell />\n  <Cell />\n</Col>\n```\n\n### 网格拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01f7RGoP1FZ2miEZqgP_!!6000000000500-2-tps-640-308.png\" width=\"320\" />\n</p>\n\n```html\n<Grid cols=\"{2}\">\n  <Cell />\n  <Cell />\n  <Cell />\n  <Cell />\n</Grid>\n```\n\n### 复合拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i1/O1CN01Mwy4nr1hwgTIGQmYM_!!6000000004342-2-tps-568-168.png\" width=\"320\" />\n</p>\n\n```html\n<Row>\n  <Cell />\n  <Col>\n    <Cell />\n    <Cell />\n  </Col>\n</Row>\n```\n\n### 段落&文本\n\n在单个 Cell 中对组件进行横向排版。如文本居中对齐：\n\n```html\n<p align=\"center\">\n  <Text type=\"h1\">文本</Text>\n  <Text type=\"body1\">文本</Text>\n  <button>button</button>\n</p>\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, Block, Row, Cell, P, Text } from '@alife/mobile-layout';\nimport { Button } from '@alifd/meet';\n\n// 导入一套 Fusion 移动端主题 (参见 Fusion 官网介绍)\nimport '@alifd/meet/es/core/index.css';\n\n<Page>\n  <Section>\n    <Block span={2}>\n      <Row>\n        <Cell>\n          <Button>按钮 1</Button>\n        </Cell>\n        <Cell>\n          <Button>按钮 2</Button>\n        </Cell>\n      </Row>\n    </Block>\n    <Block span={2}>\n      <Cell verAlign=\"middle\">\n        <P align=\"right\">\n          <Text>文本</Text>\n          <Text>文本</Text>\n        </P>\n      </Cell>\n    </Block>\n  </Section>\n</Page>;\n```\n\n### 3. 注意事项\n\n建议使用 “自然布局” 为整个页面布局，以达到最优效果，所有的内容都渲染在支持的容器中\n\n## API\n\n### Page\n\n页面\n\n| 参数               | 含义                                         | 类型                                              | 默认值        |\n| ------------------ | -------------------------------------------- | ------------------------------------------------- | ------------- |\n| prefix             | CSS 类名前缀，                               | string                                            | `pro-layout-` |\n| noPadding          | 禁用页面内边距,包括 Header， Content, Footer | Boolean                                           | `false`       |\n| noBlockCorner      | 禁用区块的边角（通常在无页面内容间隙时使用） | Boolean                                           | `false`       |\n| sectionGap         | Header、Footer、Nav、Aside 和章节之间间隙    | Number                                            | -             |\n| blockGap           | Section 中栅栏布局间隙                       | Number                                            | -             |\n| gridGap            | 小布局间隙（包含行、列、网格布局）           | Number                                            | -             |\n| children           | 子元素                                       | RaxNode                                           | -             |\n| breakPoints        | 断点信息                                     | `BreakPoint[]`                                    | -             |\n| onBreakPointChange | 断点变更回调                                 | (curBreakPoint, oldBreakPoint, breakPoints)=>void |               |\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| fixed        | 固定在底部                                  | Boolean |           |\n| children     | 子元素                                      | RaxNode | -         |\n\n#### Page.Content\n\n内容\n\n| 参数     | 含义   | 类型    | 默认值 |\n| -------- | ------ | ------- | ------ |\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| noPadding        | 移除内边距                                                        | Boolean       | false  |\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| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）        | Boolean | -      |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum    | -      |\n| gap      | 自定义元素间间距                                          | Number  | -      |\n| children | 子元素                                                    | RaxNode | -      |\n\n### Col\n\n列\n\n| 参数     | 含义                                               | 类型    | 默认值 |\n| -------- | -------------------------------------------------- | ------- | ------ |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | -      |\n| align    | 水平对齐方式， 可选值：left/center/right/stretch   | Enum    | -      |\n| gap      | 自定义元素间间距                                   | Number  | -      |\n| children | 子元素                                             | RaxNode | -      |\n\n### Grid\n\n网格\n\n| 参数       | 含义                                          | 类型                         | 默认值 |\n| ---------- | --------------------------------------------- | ---------------------------- | ------ |\n| cols       | 指定列数                                      | number                       |        |\n| rows       | 指定行数                                      | number                       |        |\n| minWidth   | 单元格最小宽度                                | number                       |        |\n| maxWidth   | 单元格最大宽度                                | number                       |        |\n| rowGap     | 单元格行间距, 可选值: small/medium/large/数值 | Enum                         |        |\n| colGap     | 单元格列间距, 可选值: small/medium/large/数值 | Enum                         |        |\n| renderItem | 手动渲染单个单元格内容                        | (rowIndex,colIndex)=>RaxNode |        |\n| children   | 子元素，默认应为 `Cell`                       | RaxNode                      | -      |\n\n### Cell\n\n单元格，其内容默认为 flex 纵向布局\n\n| 参数     | 含义                                                                                 | 类型    | 默认值 |\n| -------- | ------------------------------------------------------------------------------------ | ------- | ------ |\n| width    | 指定宽度                                                                             | Number  | -      |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）                                   | 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> 区别：\n>\n> - `<Cell>` 设置 gap 时，每一行的高度是自适应的\n> - `<Col>` 设置 gap 时，默认每一行的高度是等分的\n\n#### Space\n\n空间间隙\n\n| 参数      | 说明                                     | 类型    | 默认值 |\n| --------- | ---------------------------------------- | ------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver`       | Enum    | hoz    |\n| size      | 尺寸， 可选: `small/medium/large/Number` | Enum    | medium |\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      | 子元素间保持水平间距, 可选： small/medium/large/false                      | Enum    | medium     |\n| verMargin    | 除 Text 节点外子元素间保持垂直外边距                                       | Boolean | true       |\n| beforeMargin | 段前外边距（第一个子元素无效）                                             | Number  | 0          |\n| afterMargin  | 段尾外边距（最后一个子元素无效）                                           | 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| 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-small-spacing`          | 段落子元素的水平小间距 | `var(--s-1)`           |\n| `--page-p-medium-spacing`         | 段落子元素的水平中间距 | `var(--s-2)`           |\n| `--page-p-large-spacing`          | 段落子元素的水平大间距 | `var(--s-4)`           |\n| `--page-p-el-margin`              | 段落子元素的上下间距   | `var(--s-1)`           |\n| `--page-p-font-color`             | 段落默认字体色         | `var(--color-text1-4)` |\n\n> 在大布局模式下，如果需要支持较大屏幕， 则 CSS 单位需要视情况选择 `rpx` 或 `px`\n","gitHead":"00ecce2e94399b2f1c6573e52fcd61ab8bb48a32","scripts":{"lint":"fie lint","build":"fie 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"},"repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"<p align=\"center\">   <a href=\"https://fusion.design/\" target=\"_blank\">     <img alt=\"Fusion\" src=\"https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg\" width=\"200\">   </a> </p>","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"]},"resolutions":{"webpack":"4.x"},"_nodeVersion":"14.15.1","dependencies":{"@uni/env":"^1.0.7","classnames":"^2.3.1","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.6-beta.1/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","rax-view":"^2.3.0","ts-mocha":"^8.0.0","expect.js":"^0.3.1","node-sass":"^4.0.0","rax-image":"^2.3.2","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.7.1","lint-staged":"^9.4.2","@types/react":"^17.0.39","driver-universal":"^3.1.0","@alifd/meet-react":"^2.7.1","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","@ali/lowcode-rax-renderer":"^1.0.80","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","@alifd/mobile-field-container":"^1.0.1","build-plugin-component-multiple":"1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.6-beta.1_1653276139115_0.030840324856120427","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"@alifd/mobile-layout","version":"1.0.6","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.6","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"2f2f83874c12bd6ec7b3c0929df457a3630c92ea","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.6.tgz","fileCount":20,"integrity":"sha512-nXZqoDXPxz9DyWI1u5/X9E90gfknQPhYvwSktrdlCm1uv7B9o23rp1hKvYqHtvpBXoXOxdwycSShhTn1c+NSyQ==","signatures":[{"sig":"MEUCIQDIFqDkFJ0iU8hyH/TZApGLeAFrzeT3hWr+EMuG0a7b/wIgfwhVSHEAaIdLMemCSnOgWLCARGbznEYzuIokq0xkx14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1256389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikHoHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo86A//ed1YshWIABQ4SLKxPpkEMRvCuaRTnrMadbYqbF4ulEzsQcSp\r\nhQJedH5HAvpVfx0bCSlDHyNV8jaGMWYqQvrz4u680ne223sByBn2RqI/kAo7\r\nxoBTmVXGGZBq1vPwB1kcy6ZKNv8+ohPVPs9ddVenkn7PXY9/mc2RLu9wP4E0\r\niU00dmazjOPvRPKhNhciULCPAyqEMQy2EZaBjNd0hTC6pdYYRZFlljIg0e5Q\r\nd2FLS5d/VhV9Yi4UJxfetT1bX6/XTfee5MuJqQQUaoCoEz1MzsWA3tiq8hxd\r\nYVpu94MQZyoKmsDQPS2pMm1DP3aMLyqvFOE2WXn7QhnyGQxfLKkL9cWxggYd\r\n3o3/NFP5J8g79sRCFXBC8e/Df7Yb3FscToMKDTGypIxMucxEt6FqFpsGNCnw\r\nr9uqGNWCRszOtLecmsCtGrBFxRbTpm2pAUvR8pFQ/kyN1moxiJfat3BoWm2k\r\nQtOtr6XRctGk/4vkAszq2oVE7QWoempddr+RN2zImcZqRQr0k3/BboE9Alyy\r\nQ8ACiuGE7xJPYq6K7ibVH7XXqEy0ysZ45jSFc/Ji7uFuYrGN/ZiJrr053NIH\r\n7JX5xdJ1RebM2xtyyqNZMfU8br/Uf+u1sjaViR8ohXzGE1s4E6upEiEqoYl0\r\nEufBeidj4GddZjemNZ09D3XaAsiQr2fEwU0=\r\n=msup\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","gitHead":"00ecce2e94399b2f1c6573e52fcd61ab8bb48a32","scripts":{"lint":"fie lint","build":"fie 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"},"deprecated":"build error, please use 1.0.7+","repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"<p align=\"center\">   <a href=\"https://fusion.design/\" target=\"_blank\">     <img alt=\"Fusion\" src=\"https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg\" width=\"200\">   </a> </p>","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"]},"resolutions":{"webpack":"4.x"},"_nodeVersion":"14.15.1","dependencies":{"@uni/env":"^1.0.7","classnames":"^2.3.1","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.6/build/lowcode/assets-prod.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","rax-view":"^2.3.0","ts-mocha":"^8.0.0","expect.js":"^0.3.1","node-sass":"^4.0.0","rax-image":"^2.3.2","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.7.1","lint-staged":"^9.4.2","@types/react":"^17.0.39","driver-universal":"^3.1.0","@alifd/meet-react":"^2.7.1","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","@ali/lowcode-rax-renderer":"^1.0.80","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","@alifd/mobile-field-container":"^1.0.1","build-plugin-component-multiple":"1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.6_1653635590837_0.2658463377175424","host":"s3://npm-registry-packages"}},"1.0.7":{"name":"@alifd/mobile-layout","version":"1.0.7","keywords":["Rax"],"_id":"@alifd/mobile-layout@1.0.7","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"}],"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","nyc":{"include":"src"},"dist":{"shasum":"a1e49f12addb307321e6fad58503e491823a25e4","tarball":"https://registry.npmjs.org/@alifd/mobile-layout/-/mobile-layout-1.0.7.tgz","fileCount":140,"integrity":"sha512-4BVR+NXwOFtl9Afh7fHdCg5gbOAKGlJvD+LODRlRcHzRheYVEkuUrzF+PvPdoRLCJWgLMzmZkmL+dE1CzfdlvA==","signatures":[{"sig":"MEMCIDtw3HJXmm1FRKHthoxZNozWyw3TzY9RPohTiSNvR3qRAh8C00C01Htn4DzEIT7K4lSEkrrhG55Z1z+sdgqhpf97","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5317906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikKR4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolJA//XOM7KSgeSiUxCa5F6KD8IVa/vNhxiTK3vBGEtSrzRse0enzU\r\n7N9dEREgthKJfojP0NZXT6bx/K9gdVWWskkOlFL28hn0KTD55MMIVvjzmNzu\r\nqo5oRZl2vf6mwdZX6kZubO+WI8oOXufTUSe8A9O3nz1if6bS0hQtsI1KgDcE\r\nfOzfeVXR1vAm4K5jbgddwtQftUHiUWXOyGywuigTLRzuPbyYJ2cm7mt9j6BE\r\nxpguijXZqi8237i980JJF6vtPwcP0r4sQjUzes7Fg4jW976kVEyHqPY6Zd+O\r\nK4XFSyKhMOhiED1cEpcHWU9bs4mueSSIuGppFPr0J+43ISKzI5Cml9506XXU\r\ndpnE0/wWviOK6mGBoDRi4duGV7REBBG7kNSp12ZgRy5kKZIYh3/MjzJxF2gq\r\nkT0kDbqOB3+sjKTmjEXwf1W4PGpERuKzEz5XKqqxUmUYYe9L38SM21qyWGBM\r\nqTjy07GHkjAdCCgOnXI0FwAMXPj9Xmjf4pNbylfFMFpembKwsCMCRSJvob5n\r\nUqZtEEDq7crMJrdT5dSHGAYeQBIW+9rVsYK8wvWdfrRzYFC5llwV7NWQJPgp\r\nt2kS16lOaHdxqH4M9We+nUAj35lhb3gVuk7a/xIdC4Vrui+57kddI+RMvlLa\r\nJsCSzM0HnnbUUIX4WzpYKhJGXwiAiK1tVkE=\r\n=b2G5\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","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","gitHead":"594ed0f899c485480bfd43f4b9f55a457913a298","scripts":{"lint":"fie lint","build":"fie 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"},"repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"<p align=\"center\">   <a href=\"https://fusion.design/\" target=\"_blank\">     <img alt=\"Fusion\" src=\"https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg\" width=\"200\">   </a> </p>","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"]},"resolutions":{"webpack":"4.x"},"_nodeVersion":"14.15.1","dependencies":{"@uni/env":"^1.0.7","classnames":"^2.3.1","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.7/build/lowcode/assets-prod.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","rax-view":"^2.3.0","ts-mocha":"^8.0.0","expect.js":"^0.3.1","node-sass":"^4.0.0","rax-image":"^2.3.2","ts-loader":"^6.0.4","@types/rax":"^1.0.5","typescript":"^3.5.3","@alifd/meet":"^2.7.1","lint-staged":"^9.4.2","@types/react":"^17.0.39","driver-universal":"^3.1.0","@alifd/meet-react":"^2.7.1","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","@ali/lowcode-rax-renderer":"^1.0.80","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","@alifd/mobile-field-container":"^1.0.1","build-plugin-component-multiple":"1.0.0-beta.13"},"peerDependencies":{"rax":"^1.0.11"},"_npmOperationalInternal":{"tmp":"tmp/mobile-layout_1.0.7_1653646455818_0.8166788504613367","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-04-08T12:53:40.281Z","modified":"2025-12-25T06:45:05.926Z","1.0.0-beta.1":"2022-04-08T12:53:40.840Z","1.0.0-beta.2":"2022-04-11T11:58:03.645Z","1.0.0-beta.3":"2022-04-11T12:11:29.531Z","1.0.0-beta.4":"2022-04-12T08:58:02.146Z","1.0.0-beta.5":"2022-04-12T11:05:06.621Z","1.0.0-beta.6":"2022-04-15T07:21:06.643Z","1.0.0-beta.7":"2022-04-18T08:14:29.750Z","1.0.0-beta.8":"2022-04-25T07:49:38.980Z","1.0.0":"2022-04-25T11:41:50.727Z","1.0.1-beta.1":"2022-04-27T07:49:48.155Z","1.0.1":"2022-04-27T11:52:45.889Z","1.0.2":"2022-04-29T02:08:05.699Z","1.0.3-beta.1":"2022-05-09T07:26:47.051Z","1.0.3-beta.2":"2022-05-09T08:25:47.366Z","1.0.3":"2022-05-09T10:12:08.441Z","1.0.4":"2022-05-11T03:57:25.504Z","1.0.5":"2022-05-11T06:20:22.817Z","1.0.6-beta.1":"2022-05-23T03:22:19.435Z","1.0.6":"2022-05-27T07:13:11.050Z","1.0.7":"2022-05-27T10:14:16.031Z"},"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","keywords":["Rax"],"repository":{"url":"","type":"git"},"description":"<p align=\"center\">   <a href=\"https://fusion.design/\" target=\"_blank\">     <img alt=\"Fusion\" src=\"https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg\" width=\"200\">   </a> </p>","maintainers":[{"email":"chenpeng.mini@gmail.com","name":"no-repeat"},{"email":"ww.sun@outlook.com","name":"wwsun"},{"email":"njuzhaoguoyan@foxmail.com","name":"aboutblank"},{"email":"bindoon@sina.com","name":"bindoon"},{"email":"tao360907796@gmail.com","name":"tao1991123"},{"email":"1060455478@qq.com","name":"vicerwang"},{"email":"710411486@qq.com","name":"soberz"},{"email":"myronliu347@gmail.com","name":"myronliu347"},{"email":"justindavidkahn@gmail.com","name":"jdkahn"},{"email":"fusion-bot@alibaba-inc.com","name":"fusion-bot"},{"email":"yanyanwang93@gmail.com","name":"kopiluwaky"},{"email":"sobear.me@gmail.com","name":"sobear"},{"email":"lianmin.slm@qq.com","name":"lianmin"},{"email":"xiawenwu41@gmail.com","name":"clarkxia"},{"email":"898617222@163.com","name":"quanyin"},{"email":"1193486072@qq.com","name":"jerryyxu"},{"email":"779509411@qq.com","name":"yellow2dong"},{"email":"alvin.hui@qq.com","name":"alvinhui"},{"email":"hit.wpeng@gmail.com","name":"andevery"},{"email":"luhengchang228@126.com","name":"luhengchang228"},{"email":"879249235@qq.com","name":"yuysmile"},{"email":"galo.gm.work@gmail.com","name":"fd.xy"},{"email":"rax-public@alibaba-inc.com","name":"rax-publisher"},{"email":"lakerswgq@gmail.com","name":"lakerswgq"},{"email":"muscle.mark.cheng@gmail.com","name":"mark-ck"},{"email":"btyzzyl@163.com","name":"zyliang96"},{"email":"wsj7552715@hotmail.com","name":"eternalsky"},{"email":"wangjiarui1924@gmail.com","name":"john-watson"},{"email":"sy294746869@gmail.com","name":"sunyuan20"},{"email":"kbbqbb@gmail.com","name":"jiaqiu_chen"},{"email":"whatever6g@gmail.com","name":"whatever_lll"},{"email":"Slimeria37@gmail.com","name":"slimeria"},{"email":"1052228950@qq.com","name":"liujuping123"}],"readme":"## 介绍\n\n<p align=\"center\">\n  <a href=\"https://fusion.design/\" target=\"_blank\">\n    <img alt=\"Fusion\" src=\"https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg\" width=\"200\">\n  </a>\n</p>\n\n<p align=\"center\">\n  <img src=\"https://img.shields.io/npm/v/@alifd/mobile-layout.svg\">\n  <img src=\"https://img.shields.io/npm/dm/@alifd/mobile-layout.svg\">\n</p>\n\n一套面向移动端的布局解决方案。[🔗 使用文档](https://yuque.antfin-inc.com/fusion-design-system/rzy6n5/fkz737)\n\n目标：**不再写任何布局 `CSS` 代码**\n\n**特性：**\n\n- 支持栅栏布局，并可自定义 `BreakPoints`\n- 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）\n- 大小布局模式拆分，逻辑清晰，布局灵活\n- 完美支持小程序(微信、支付宝、钉钉)\n\n<p style=\"text-align:left;width:600px;background:#fff;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01rB1mV21anL51o4kAF_!!6000000003374-2-tps-1236-322.png\"/>\n</p>\n\n**大布局**\n\n- `<Page>`: 页\n  - `<Page.Header>`: 序章\n  - `<Page.Content>`: 内容\n  - `<Page.Footer>`: 终章\n- `<Section>`: 章\n- `<Block>`: 区块\n\n**小布局**\n\n- `<Cell>`: 单元格，主轴默认为 垂直方向的 flex 排版\n- `<Row>`: 行\n- `<Col>`: 列\n- `<Grid>`: 网格\n\n**段落&文本**\n\n- `<P>`: 段落\n- `<Text>`: 文本\n\n## 大布局模式\n\n用于在页面栅栏系统的上构建出整个页面的骨架，其最终产物的是一组响应式布局的空容器。\n\n<p style=\"text-align:left;background:#fff; width:600px;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i2/O1CN01WPCHlp27xJ198jF25_!!6000000007863-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: 320,\n      maxContentWidth: 320,\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 列宽计算规则\n\n组件会根据页面宽度自动计算栅栏数量和 `Block` 的列宽，计算逻辑为：\n\n<p style=\"text-align:left;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01aUg7js1PMLyMAYU9U_!!6000000001826-2-tps-2282-278.png\" />\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小布局指按照 `Row`、`Col` 和 `Grid` 相互嵌套的方式，将 Block 内部切割为多个内容区域的规范和操作方式。\n\n<p>\n<img src=\"https://img.alicdn.com/imgextra/i3/O1CN01JzXEQD1Q9MLnEExFA_!!6000000001933-2-tps-3156-1151.png\" style=\"max-width: 1400px; width: 100%\" />\n</p>\n\n### 独立单元格\n\n<p style=\"text-align:left;width:130px;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i2/O1CN01eDrtZc2855kfqGmmN_!!6000000007880-2-tps-1202-902.png\" width=\"130\" />\n</p>\n\n```html\n<Cell />\n```\n\n### 横向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01IAF6jE1HYFKFOvkP6_!!6000000000769-2-tps-640-308.png\" width=\"320\" />\n</p>\n\n```html\n<Row>\n  <Cell />\n  <Cell />\n</Row>\n```\n\n### 纵向拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://gw.alicdn.com/imgextra/i3/O1CN01mjA0DE1kgbPWuhKrj_!!6000000004713-2-tps-656-256.png\" width=\"320\" />\n</p>\n\n```html\n<Col>\n  <Cell />\n  <Cell />\n</Col>\n```\n\n### 网格拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i2/O1CN01f7RGoP1FZ2miEZqgP_!!6000000000500-2-tps-640-308.png\" width=\"320\" />\n</p>\n\n```html\n<Grid cols=\"{2}\">\n  <Cell />\n  <Cell />\n  <Cell />\n  <Cell />\n</Grid>\n```\n\n### 复合拆分\n\n<p style=\"text-align:left;\">\n  <img src=\"https://img.alicdn.com/imgextra/i1/O1CN01Mwy4nr1hwgTIGQmYM_!!6000000004342-2-tps-568-168.png\" width=\"320\" />\n</p>\n\n```html\n<Row>\n  <Cell />\n  <Col>\n    <Cell />\n    <Cell />\n  </Col>\n</Row>\n```\n\n### 段落&文本\n\n在单个 Cell 中对组件进行横向排版。如文本居中对齐：\n\n```html\n<p align=\"center\">\n  <Text type=\"h1\">文本</Text>\n  <Text type=\"body1\">文本</Text>\n  <button>button</button>\n</p>\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, Block, Row, Cell, P, Text } from '@alife/mobile-layout';\nimport { Button } from '@alifd/meet';\n\n// 导入一套 Fusion 移动端主题 (参见 Fusion 官网介绍)\nimport '@alifd/meet/es/core/index.css';\n\n<Page>\n  <Section>\n    <Block span={2}>\n      <Row>\n        <Cell>\n          <Button>按钮 1</Button>\n        </Cell>\n        <Cell>\n          <Button>按钮 2</Button>\n        </Cell>\n      </Row>\n    </Block>\n    <Block span={2}>\n      <Cell verAlign=\"middle\">\n        <P align=\"right\">\n          <Text>文本</Text>\n          <Text>文本</Text>\n        </P>\n      </Cell>\n    </Block>\n  </Section>\n</Page>;\n```\n\n### 3. 注意事项\n\n建议使用 “自然布局” 为整个页面布局，以达到最优效果，所有的内容都渲染在支持的容器中\n\n## API\n\n### Page\n\n页面\n\n| 参数               | 含义                                         | 类型                                              | 默认值        |\n| ------------------ | -------------------------------------------- | ------------------------------------------------- | ------------- |\n| prefix             | CSS 类名前缀，                               | string                                            | `pro-layout-` |\n| noPadding          | 禁用页面内边距,包括 Header， Content, Footer | Boolean                                           | `false`       |\n| noBlockCorner      | 禁用区块的边角（通常在无页面内容间隙时使用） | Boolean                                           | `false`       |\n| sectionGap         | Header、Footer、Nav、Aside 和章节之间间隙    | Number                                            | -             |\n| blockGap           | Section 中栅栏布局间隙                       | Number                                            | -             |\n| gridGap            | 小布局间隙（包含行、列、网格布局）           | Number                                            | -             |\n| children           | 子元素                                       | RaxNode                                           | -             |\n| breakPoints        | 断点信息                                     | `BreakPoint[]`                                    | -             |\n| onBreakPointChange | 断点变更回调                                 | (curBreakPoint, oldBreakPoint, breakPoints)=>void |               |\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| fixed        | 固定在底部                                  | Boolean |           |\n| children     | 子元素                                      | RaxNode | -         |\n\n#### Page.Content\n\n内容\n\n| 参数     | 含义   | 类型    | 默认值 |\n| -------- | ------ | ------- | ------ |\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| noPadding        | 移除内边距                                                        | Boolean       | false  |\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| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）        | Boolean | -      |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum    | -      |\n| gap      | 自定义元素间间距                                          | Number  | -      |\n| children | 子元素                                                    | RaxNode | -      |\n\n### Col\n\n列\n\n| 参数     | 含义                                               | 类型    | 默认值 |\n| -------- | -------------------------------------------------- | ------- | ------ |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | -      |\n| align    | 水平对齐方式， 可选值：left/center/right/stretch   | Enum    | -      |\n| gap      | 自定义元素间间距                                   | Number  | -      |\n| children | 子元素                                             | RaxNode | -      |\n\n### Grid\n\n网格\n\n| 参数       | 含义                                          | 类型                         | 默认值 |\n| ---------- | --------------------------------------------- | ---------------------------- | ------ |\n| cols       | 指定列数                                      | number                       |        |\n| rows       | 指定行数                                      | number                       |        |\n| minWidth   | 单元格最小宽度                                | number                       |        |\n| maxWidth   | 单元格最大宽度                                | number                       |        |\n| rowGap     | 单元格行间距, 可选值: small/medium/large/数值 | Enum                         |        |\n| colGap     | 单元格列间距, 可选值: small/medium/large/数值 | Enum                         |        |\n| renderItem | 手动渲染单个单元格内容                        | (rowIndex,colIndex)=>RaxNode |        |\n| children   | 子元素，默认应为 `Cell`                       | RaxNode                      | -      |\n\n### Cell\n\n单元格，其内容默认为 flex 纵向布局\n\n| 参数     | 含义                                                                                 | 类型    | 默认值 |\n| -------- | ------------------------------------------------------------------------------------ | ------- | ------ |\n| width    | 指定宽度                                                                             | Number  | -      |\n| autoFit  | 根据内容自适应宽度（当作为行列布局的子元素时生效）                                   | 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> 区别：\n>\n> - `<Cell>` 设置 gap 时，每一行的高度是自适应的\n> - `<Col>` 设置 gap 时，默认每一行的高度是等分的\n\n#### Space\n\n空间间隙\n\n| 参数      | 说明                                     | 类型    | 默认值 |\n| --------- | ---------------------------------------- | ------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver`       | Enum    | hoz    |\n| size      | 尺寸， 可选: `small/medium/large/Number` | Enum    | medium |\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      | 子元素间保持水平间距, 可选： small/medium/large/false                      | Enum    | medium     |\n| verMargin    | 除 Text 节点外子元素间保持垂直外边距                                       | Boolean | true       |\n| beforeMargin | 段前外边距（第一个子元素无效）                                             | Number  | 0          |\n| afterMargin  | 段尾外边距（最后一个子元素无效）                                           | 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| 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-small-spacing`          | 段落子元素的水平小间距 | `var(--s-1)`           |\n| `--page-p-medium-spacing`         | 段落子元素的水平中间距 | `var(--s-2)`           |\n| `--page-p-large-spacing`          | 段落子元素的水平大间距 | `var(--s-4)`           |\n| `--page-p-el-margin`              | 段落子元素的上下间距   | `var(--s-1)`           |\n| `--page-p-font-color`             | 段落默认字体色         | `var(--color-text1-4)` |\n\n> 在大布局模式下，如果需要支持较大屏幕， 则 CSS 单位需要视情况选择 `rpx` 或 `px`\n","readmeFilename":"README.md"}