{"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","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":"## 介绍\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

\n \n

\n\n**大布局**\n\n- ``: 页\n - ``: 序章\n - ``: 内容\n - ``: 终章\n- `
`: 章\n- ``: 区块\n\n**小布局**\n\n- ``: 单元格，主轴默认为 垂直方向的 flex 排版\n- ``: 行\n- ``: 列\n- ``: 网格\n- `

`: 段落\n- ``: 文本\n\n## 大布局模式\n\n用于在页面栅栏系统的上构建出整个页面的骨架，其最终产物的是一组响应式布局的空容器。\n\n

\n \n

\n\n代码：\n\n```js\n\n
\n ...\n ...\n
\n\n```\n\n### Block 列宽计算规则\n\n组件会根据页面宽度自动计算栅栏数量和 `Block` 的列宽，计算逻辑为：\n\n

\n \n

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

\n \n

\n\n## 小布局模式\n\n小布局指按照 `Row`、`Col` 和 `Grid` 相互嵌套的方式，将 Block 内部切割为多个内容区域的规范和操作方式。\n\n### 独立单元格\n\n

\n \n

\n\n```js\n\n```\n\n### 横向拆分\n\n

\n \n

\n\n```js\n\n \n \n\n```\n\n### 纵向拆分\n\n

\n \n

\n\n```js\n\n \n \n\n```\n\n### 网格拆分\n\n

\n \n

c\n\n```js\n\n \n \n \n \n\n```\n\n### 复杂拆分\n\n

\n \n

\n\n```js\n\n \n \n \n \n \n\n```\n\n### 段落&文本\n\n在单个 Cell 中对组件进行横向排版。如文本居中对齐：\n\n```js\n

\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, 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\n
\n \n \n \n \n \n \n \n \n \n \n \n \n

\n 文本\n 文本\n

\n \n \n
\n;\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> - `` 设置 gap 时，每一行的高度是自适应的\n> - `` 设置 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"},"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":"一套面向移动端的布局解决方案。[🔗 源码使用介绍文档](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"]},"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":{"@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"},"_id":"@alifd/mobile-layout@1.0.3-beta.1","version":"1.0.3-beta.1"}