{"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","name":"@alifd/mobile-layout","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"unpkg":"dist/index.umd.js","module":"es/index.js","readme":"---\ntitle: 移动端自然布局\ncategory: General\n---\n\n## 介绍\n\n一套面向移动端的自然布局组件。\n\n**特性：**\n\n- 多栅格布局，支持自定义 `BreakPoints`\n- 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）\n- 细化大/小布局，兼容各种移动端布局场景\n\n布局细分为两种模式：\n\n<p style=\"text-align:left;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i3/O1CN015fyWei29J7U6tTJ2b_!!6000000008046-2-tps-1236-370.png\"/>\n</p>\n\n##### 大布局\n\n- `<Page>`: 页\n- `<Section>`: 章\n- `<Block>`: 区块\n- `<Header>`: 序章\n- `<Footer>`: 终章\n\n##### 小布局\n\n- `Row`: 行\n- `Col`: 列\n- `Cell`: 单元格，主轴默认为 垂直方向的 flex 排版\n- `P`: 段落\n\n### 大布局模式\n\n用于页面主体框架的布局，可支持根据屏幕宽度自定义栅格，并自动确定区块的列宽\n\n<p style=\"text-align:left;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01CqRHgx1n6pIv51UYz_!!6000000005041-2-tps-2404-1032.png\"/>\n</p>\n\n代码：\n\n```js\n<Page\n  breakPoints={[\n    {\n      width: 200,\n      maxContentWidth: 200,\n      numberOfColumns: 1,\n    },\n    {\n      width: 375,\n      maxContentWidth: 375,\n      numberOfColumns: 2,\n    },\n    {\n      width: 750,\n      maxContentWidth: 750,\n      numberOfColumns: 4,\n    },\n    {\n      width: 1125,\n      maxContentWidth: 1125,\n      numberOfColumns: 8,\n    },\n    {\n      width: Infinity,\n      maxContentWidth: Infinity,\n      numberOfColumns: 12,\n    },\n  ]}\n>\n  <Section>\n    <Block span={6}>...</Block>\n    <Block span={6}>...</Block>\n  </Section>\n</Page>\n```\n\n组件会根据页面宽度自动计算栅格数量和单个 `Block` 的列宽。单个 Block 的列宽计算逻辑为：\n\n<p style=\"text-align:left;\">\n  <img width=\"600\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01wQws881UF5knznGq6_!!6000000002487-2-tps-2296-296.png\" align=\"center\" />\n</p>\n\n以屏幕宽度从 `12` 列模式收缩到 `8` 列为例，\n`6,4,2,4` 布局, 子元素的列宽会经历如下调整:\n\n<p style=\"text-align:left;\">\n  <img width=\"800\" src=\"https://img.alicdn.com/imgextra/i2/O1CN01TAJkVt1XbTxmn9K66_!!6000000002942-2-tps-3860-1200.png\"/>\n</p>\n\n### 小布局\n\n用于对单个容器内部填充内容（如业务组件）进行行列精细化布局，实现等比、定宽等排列。\n\n## 使用\n\n### 1. 安装\n\n```bash\nnpm install @alifd/mobile-layout --save\n```\n\n### 2. 导入 Fusion Mobile 主题\n\n引入 Fusion Mobile 的主题，此主题可以通过 Fusion 站点定制生成，或者使用默认主题：\n\n```js\nimport { Page, Section } from '@alife/mobile-theme-default';\n// 导入一套默认主题变量\nimport '@alife/mobile-theme-default/index.css';\n\n<Page>\n  <Section>\n    <Block>...</Block>\n    <Block>...</Block>\n    <Block>...</Block>\n  </Section>\n</Page>;\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数        | 含义                                         | 类型           | 默认值        |\n| ----------- | -------------------------------------------- | -------------- | ------------- |\n| prefix      | CSS 类名前缀，                               | string         | `pro-layout-` |\n| minHeight   | 页面的最小高度，例如 `calc(100vh - 52px)`    | Number/String  | -             |\n| 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"},"homepage":"https://mc-fusion.alibaba-inc.com/unpkg/@alifd/mobile-layout/build/index.html","keywords":["Rax"],"repository":{"url":"","type":"git"},"_npmVersion":"6.14.8","description":"--- title: 移动端自然布局 category: General ---","directories":{},"lint-staged":{"docs/**/*.md":["prettier --write","git add"],"src/**/*.(ts|tsx)":["tslint --fix","prettier --write","git add"],"@(docs|src)/**/*.@(js|jsx|ts|tsx)":["eslint --fix","prettier --write","git add"]},"maintainers":[{"name":"mark-ck","email":"muscle.mark.cheng@gmail.com"},{"name":"lakerswgq","email":"lakerswgq@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"wwsun","email":"ww.sun@outlook.com"},{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"jdkahn","email":"justindavidkahn@gmail.com"},{"name":"fusion-bot","email":"fusion-bot@alibaba-inc.com"},{"name":"sobear","email":"sobear.me@gmail.com"},{"name":"lianmin","email":"lianmin.slm@qq.com"},{"name":"clarkxia","email":"xiawenwu41@gmail.com"},{"name":"quanyin","email":"898617222@163.com"},{"name":"jerryyxu","email":"1193486072@qq.com"},{"name":"yellow2dong","email":"779509411@qq.com"},{"name":"alvinhui","email":"alvin.hui@qq.com"},{"name":"andevery","email":"hit.wpeng@gmail.com"},{"name":"luhengchang228","email":"luhengchang228@126.com"},{"name":"yuysmile","email":"879249235@qq.com"},{"name":"fd.xy","email":"galo.gm.work@gmail.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"_nodeVersion":"14.15.1","dependencies":{"tslib":"^2.0.1","@uni/env":"^1.0.7","rax-text":"^2.1.2","rax-view":"^2.3.0","rax-image":"^2.3.2","classnames":"^2.3.1","@types/react":"^17.0.39","rax-children":"^1.0.0","@uni/system-info":"^1.0.8","rax-clone-element":"^1.0.0","rax-is-valid-element":"^1.0.0","resize-observer-polyfill":"^1.5.1","@ali/lowcode-rax-renderer":"^1.0.80"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"materialSchema":"https://unpkg.alibaba-inc.com/@alifd/mobile-layout@1.0.0-beta.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"},"_id":"@alifd/mobile-layout@1.0.0-beta.6","version":"1.0.0-beta.6"}