{"_id":"@alifd/layout","_rev":"130-02b46f0c0158d2ce1d787017bbc8e12b","name":"@alifd/layout","dist-tags":{"next":"2.0.4","beta":"2.1.1-beta.1","latest":"2.4.1"},"versions":{"0.1.1":{"name":"@alifd/layout","version":"0.1.1","keywords":["React","Layout","Fusion Design"],"author":{"name":"Fusion Design Team"},"license":"MIT","_id":"@alifd/layout@0.1.1","maintainers":[{"name":"myronliu347","email":"myronliu347@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"}],"homepage":"https://github.com/alibaba-fusion/layout#readme","bugs":{"url":"https://github.com/alibaba-fusion/layout/issues"},"dist":{"shasum":"2240bde91ff5ea88a2abcaf906b3e6ac08b80594","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.1.tgz","fileCount":76,"integrity":"sha512-vVgOf49YJP3ddOdQqy6oZE7r02mIo3NWPaLOb6gqbc7PLFaUOFUCjSlfFvOLO3XM3FwPznxrLlpdlqV2bKsMHg==","signatures":[{"sig":"MEQCIHXycvqbTRxNUYDJrjGrrHcACLzy8vRddD62xYcAceFmAiBUybBmmiafV8xfa5TupcKH9nVs4QVvYWIuHC/h98v6tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2pGmCRA9TVsSAnZWagAAntsP/j3rWmHOm+WBX74ewDSh\nrXSLSdRwjdLs0k3mIRjC3CagLcyorpnRf8rzmlvKLmeUm5qJFlRgqC3hdJ19\n7W139VD1Ts6tNWjwOhm6uBzVbpswFmIAzdx0yhpK8/8/a4GV3wBjboUAR5fX\nmdDoPyXdru0bDFl9bh40nQrXeVHOru0C4zRB/xZ+0HZZfLSV2MPsvib0ndqS\nxt489WzfcjCYJTFkxF0AJPElwl+mOibw4wHDpmhDq5OYChx1LnFfinf+/toH\neWwbk8JY00G3+EAJA4P7+Z2kdlgJm+zjSZ2I0amRlygvkuJ5hQ48Cvs/4KVi\nuGnSLpqfYlmIWBA/imfbF5xGdeoUKgdIacrs0a+KzZoi2tygDnB7kFxI4RBu\nRbx9GHaVJQsKU7KtbuvUL47rI8RKt/osGLs3f9Ww+ZlGSdHXNWn68JZiCGmz\nb/JZf99ZDXtUCHLS4Mys3yEEmblqnozeYLFzdHyts4p1Tmdxw6cx/NqY7y56\nRE/CMXKlAJaMzcDkRDq8wT7+9EOCznzbVr3JxjTDx0opVbCgon2C61p6yoFg\nlQWdP1pEZkZQIu4twD16xpZw1wnbsMlSZ1GuLz1srqrQz5OVQzUm8puCkmi+\n6qRNLsO+c55L72EXcq6XsRUGmllbh/Vytc6ogzDW8IKxaTjy7yM9QMSP7sL3\n6GXZ\r\n=5ipq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"3cc71634534ecb900aaafc87b71e57e4b7ea046a","scripts":{"lint":"eslint src/**/*.js --cache && echo \"eslint: no lint errors\"","test":"cross-env BABEL_ENV=test NODE_ENV=test jest -i --watch","build":"npm run build:es2015 && npm run build:es2015modules && npm run build:es && npm run build:umd","start":"node scripts/start.js","release":"node scripts/release.js","build:es":"cross-env NODE_ENV=production BABEL_ENV=es babel --config-file ./babel.config.js ./src --out-dir ./es --ignore __test__/**/* ","prebuild":"rimraf lib && rimraf umd && rimraf es","build:umd":"cross-env BABEL_ENV=production-umd rollup -c scripts/rollup.config.js","build:es2015":"cross-env NODE_ENV=production babel --config-file ./babel.config.js ./src --out-dir ./lib --ignore __test__/**/* ","test:coverage":"cross-env BABEL_ENV=coverage NODE_ENV=test jest -i --coverage","build:es2015modules":"cross-env NODE_ENV=production BABEL_ENV=modules babel --config-file ./babel.config.js ./src/index.js --out-file ./lib/index.es.js"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"5.6.0","description":"React layout components","directories":{},"lint-staged":{"*.@(js|jsx)":["eslint","git add"]},"_nodeVersion":"8.11.1","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"dependencies":{"prop-types":"^15.6.2","@babel/runtime":"^7.3.1","inline-style-prefixer":"^5.0.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"bfj":"^6.1.1","glob":"^7.1.3","jest":"^24.0.0","chalk":"^2.4.2","husky":"^1.3.1","react":"^16.8.3","sinon":"^7.2.6","dotenv":"^6.2.0","enzyme":"^3.8.0","eslint":"^5.12.0","lodash":"^4.17.11","moment":"^2.24.0","remark":"^10.0.1","rimraf":"^2.6.3","rollup":"^1.1.2","semver":"^5.6.0","esprima":"^4.0.1","request":"^2.88.0","resolve":"^1.10.0","warning":"^4.0.3","webpack":"^4.29.3","fs-extra":"^7.0.1","inquirer":"^6.2.2","jest-cli":"^24.0.0","minimist":"^1.2.0","cross-env":"^5.2.0","react-dom":"^16.7.0","@babel/cli":"^7.2.3","babel-jest":"^24.0.0","css-loader":"^2.1.0","url-loader":"^1.1.2","@alifd/next":"^1.13.13","@babel/core":"^7.2.2","@babel/node":"^7.2.2","file-loader":"^3.0.1","lint-staged":"^8.1.4","sass-loader":"^7.1.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","loader-utils":"^1.2.3","style-loader":"^0.23.1","@svgr/webpack":"^4.1.0","dotenv-expand":"^4.2.0","enzyme-to-json":"^3.3.5","postcss-loader":"^3.0.0","react-loadable":"^5.5.0","@commitlint/cli":"^7.5.2","react-dev-utils":"^7.0.3","scroll-behavior":"^0.9.10","react-router-dom":"^4.3.1","@babel/preset-env":"^7.2.3","eslint-plugin-html":"^5.0.0","identity-obj-proxy":"^3.0.0","pnp-webpack-plugin":"^1.2.1","postcss-preset-env":"^6.5.0","react-app-polyfill":"^0.2.1","webpack-dev-server":"^3.1.14","@babel/preset-react":"^7.0.0","babel-plugin-preval":"^3.0.1","eslint-plugin-react":"^7.12.3","html-webpack-plugin":"4.0.0-beta.5","postcss-safe-parser":"^4.0.1","rollup-plugin-babel":"^4.3.2","eslint-plugin-import":"^2.14.0","rollup-plugin-uglify":"^6.0.1","babel-plugin-istanbul":"^5.1.0","terser-webpack-plugin":"^1.2.2","conventional-changelog":"3.0.6","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-markdown":"^1.0.0","postcss-flexbugs-fixes":"^4.1.0","rollup-plugin-commonjs":"^9.2.0","workbox-webpack-plugin":"^3.6.3","enzyme-adapter-react-16":"^1.9.1","mini-css-extract-plugin":"^0.5.0","webpack-manifest-plugin":"^2.0.4","@alifd/eslint-config-next":"^2.0.0","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-size-snapshot":"^0.8.0","@alifd/stylelint-config-next":"^1.0.0","babel-plugin-module-resolver":"^3.2.0","@babel/plugin-transform-runtime":"^7.2.0","babel-plugin-transform-dev-warning":"^0.1.1","fork-ts-checker-webpack-plugin-alt":"^0.4.14","optimize-css-assets-webpack-plugin":"^5.0.1","@babel/plugin-syntax-dynamic-import":"^7.2.0","case-sensitive-paths-webpack-plugin":"^2.2.0","babel-plugin-react-remove-properties":"^0.3.0","@babel/plugin-transform-object-assign":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","babel-plugin-transform-react-constant-elements":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.21"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.1_1557828006112_0.45791467365588456","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@alifd/layout","version":"0.1.2","keywords":["React","Layout","Fusion Design"],"author":{"name":"Fusion Design Team"},"license":"MIT","_id":"@alifd/layout@0.1.2","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://github.com/alibaba-fusion/layout#readme","bugs":{"url":"https://github.com/alibaba-fusion/layout/issues"},"dist":{"shasum":"066875c2057e66bc6bd8b9df2873d33bbf449317","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.2.tgz","fileCount":75,"integrity":"sha512-bJ4OZUMdWXKrObxPKO7f3L48fQ2eOdY6HQ6zikChiBanei76A2j0EU7wEbTf9KMjgF6P0ulwKFOQEp36693rRA==","signatures":[{"sig":"MEUCIQC/BB9HZhZgLDEWkqZ8j4koDGSDvvogdTopVIw1Lu9tTwIgdgeBr/AQ88LVM6utOEWbmvHE75pmQ6BzcRQTcUZfI94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136266,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5PT3CRA9TVsSAnZWagAA7y0P/iAiHFIw5rQaL6/DCKTv\nSz+4dJipNWJboGpeKJR5hKr1yMO4OMvgzzhboCfjG6MBIhRZ4re3N4fnFzZD\nD+qFpIrK6citvUt8c9191VsRzX4yrKNAPGlYTc9JSi9wOaKaG12BqEnOGfa/\nYZWqtCo0EgaHl4CMUN+QAve4sOcnzLG6JoQi04XJg9ZbeWBIwk6VJ9WwnldQ\nqqj8H3bXIuU5j+ATHnuU0HGZoj0b5EZeBl69mEfoGPNqN/TQlBr9Y4cgeHNa\ng9ig4aoi8y5YgFocR93HTAa+QnWmW9UOCHmblzjloUHHFk1vmhu3PWh8eqo7\nH5BEhkmSQfo4qZuP999i7uPeRD8KXDwHzs86qHhxPTJCnXJki+GMsAEy0ACA\nrAktUiYax0tLZHHqaya+GlnXRIHcUB66E9CLMaedEN8Xu1j693iooD49hRW8\nDwQv6fz/clN379Ysd64/wBcDkQKdg45FCjUNlumnWoG+F5Kpb0uTtebEHb3W\neHtnq8LHXRwRCdLu/ZO/+B4Hk+4QNI3XUNdmzx/snoaZVYWSHSNPpTkXOWNX\nS/sw5MCUZ5/mE5YjnvgcI+86awuAEXTlU9WgruOOTiVh8wIo/35B/Zw5WeBq\npW7UFhHAmywhbtRGYsdwfFNFC/ovOlY+QPiYpLpRGv7fXHI3ZYLbR+4OtXED\n7jQI\r\n=HmRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"fce5372155e62c5f0094169b6d363e9ccfda9471","scripts":{"lint":"eslint src/**/*.js --cache && echo \"eslint: no lint errors\"","test":"cross-env BABEL_ENV=test NODE_ENV=test jest -i --watch","build":"npm run build:es2015 && npm run build:es2015modules && npm run build:es && npm run build:umd","start":"node scripts/start.js","release":"node scripts/release.js","build:es":"cross-env NODE_ENV=production BABEL_ENV=es babel --config-file ./babel.config.js ./src --out-dir ./es --ignore __test__/**/* ","prebuild":"rimraf lib && rimraf umd && rimraf es","build:umd":"cross-env BABEL_ENV=production-umd rollup -c scripts/rollup.config.js","build:es2015":"cross-env NODE_ENV=production babel --config-file ./babel.config.js ./src --out-dir ./lib --ignore __test__/**/* ","test:coverage":"cross-env BABEL_ENV=coverage NODE_ENV=test jest -i --coverage","build:es2015modules":"cross-env NODE_ENV=production BABEL_ENV=modules babel --config-file ./babel.config.js ./src/index.js --out-file ./lib/index.es.js"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"5.6.0","description":"React layout components","directories":{},"lint-staged":{"*.@(js|jsx)":["eslint","git add"]},"_nodeVersion":"8.11.1","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"dependencies":{"prop-types":"^15.6.2","@babel/runtime":"^7.3.1","inline-style-prefixer":"^5.0.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"bfj":"^6.1.1","glob":"^7.1.3","jest":"^24.0.0","chalk":"^2.4.2","husky":"^1.3.1","react":"^16.8.3","sinon":"^7.2.6","dotenv":"^6.2.0","enzyme":"^3.8.0","eslint":"^5.12.0","lodash":"^4.17.11","moment":"^2.24.0","remark":"^10.0.1","rimraf":"^2.6.3","rollup":"^1.1.2","semver":"^5.6.0","esprima":"^4.0.1","request":"^2.88.0","resolve":"^1.10.0","warning":"^4.0.3","webpack":"^4.29.3","fs-extra":"^7.0.1","inquirer":"^6.2.2","jest-cli":"^24.0.0","minimist":"^1.2.0","cross-env":"^5.2.0","react-dom":"^16.7.0","@babel/cli":"^7.2.3","babel-jest":"^24.0.0","css-loader":"^2.1.0","url-loader":"^1.1.2","@alifd/next":"^1.13.13","@babel/core":"^7.2.2","@babel/node":"^7.2.2","file-loader":"^3.0.1","lint-staged":"^8.1.4","sass-loader":"^7.1.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","loader-utils":"^1.2.3","style-loader":"^0.23.1","@svgr/webpack":"^4.1.0","dotenv-expand":"^4.2.0","enzyme-to-json":"^3.3.5","postcss-loader":"^3.0.0","react-loadable":"^5.5.0","@commitlint/cli":"^7.5.2","react-dev-utils":"^7.0.3","scroll-behavior":"^0.9.10","react-router-dom":"^4.3.1","@babel/preset-env":"^7.2.3","eslint-plugin-html":"^5.0.0","identity-obj-proxy":"^3.0.0","pnp-webpack-plugin":"^1.2.1","postcss-preset-env":"^6.5.0","react-app-polyfill":"^0.2.1","webpack-dev-server":"^3.1.14","@babel/preset-react":"^7.0.0","babel-plugin-preval":"^3.0.1","eslint-plugin-react":"^7.12.3","html-webpack-plugin":"4.0.0-beta.5","postcss-safe-parser":"^4.0.1","rollup-plugin-babel":"^4.3.2","eslint-plugin-import":"^2.14.0","rollup-plugin-uglify":"^6.0.1","babel-plugin-istanbul":"^5.1.0","terser-webpack-plugin":"^1.2.2","conventional-changelog":"3.0.6","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-markdown":"^1.0.0","postcss-flexbugs-fixes":"^4.1.0","rollup-plugin-commonjs":"^9.2.0","workbox-webpack-plugin":"^3.6.3","enzyme-adapter-react-16":"^1.9.1","mini-css-extract-plugin":"^0.5.0","webpack-manifest-plugin":"^2.0.4","@alifd/eslint-config-next":"^2.0.0","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-size-snapshot":"^0.8.0","@alifd/stylelint-config-next":"^1.0.0","babel-plugin-module-resolver":"^3.2.0","@babel/plugin-transform-runtime":"^7.2.0","babel-plugin-transform-dev-warning":"^0.1.1","fork-ts-checker-webpack-plugin-alt":"^0.4.14","optimize-css-assets-webpack-plugin":"^5.0.1","@babel/plugin-syntax-dynamic-import":"^7.2.0","case-sensitive-paths-webpack-plugin":"^2.2.0","babel-plugin-react-remove-properties":"^0.3.0","@babel/plugin-transform-object-assign":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","babel-plugin-transform-react-constant-elements":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.21"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.2_1558508790847_0.4659643973844432","host":"s3://npm-registry-packages"}},"0.1.3":{"name":"@alifd/layout","version":"0.1.3","keywords":["React","Layout","Fusion Design"],"author":{"name":"Fusion Design Team"},"license":"MIT","_id":"@alifd/layout@0.1.3","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://github.com/alibaba-fusion/layout#readme","bugs":{"url":"https://github.com/alibaba-fusion/layout/issues"},"dist":{"shasum":"53dbe4185c4de3e9a8b05541969b8ddfcbea42f5","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.3.tgz","fileCount":76,"integrity":"sha512-nSCBTP08j0i6b5Rfcs7E21lYNnrRj18CLmiNiiXGeTGpt8Jqv5oE8DeX/YHlw0atKagtLnxjzUokpcsz7IKcpw==","signatures":[{"sig":"MEUCIQCe/kXyTZGQMgT1Aocg5eulnjgw0xqjy9lcVZA9K/lH5QIgMnca+/DnchC+KPkcGgXMtjbhILOdndPDix7icvX15JI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":138679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9KOiCRA9TVsSAnZWagAAtDcQAJZy5atcPPMNsKKC2tKg\nCj2pvsBhjwzp6vx4ki+UNF8JrZT+LcuP10UxB7M5lEKTUEnMczyPO108C7c1\nR731DXrJSFUrKE4uY9C2Daw98ipRFoh5JiBtSD54afiYgvJQLraibPT4DMGs\nkXMh19qdd+Zs2hhjfSl9Y+HAZdK+py4+w+eIxb+vVcpbeatNvNAdwIdbrvNc\nq1RH+fje6R2gTc3vRg0fjySARR9cDehNqPtgT3I2IYU7Xuf+lRaNvGPm3ugM\nFd+wkeumwGXFmUalfbW+WIEIg74cDRloVOE6SqND9yFNYGcMRKFmoMZ7pwNI\nMT5uzHehDj+/HJWtvU7I3cxgxERAFTbo7nUBaH7yjtxmjCjRYuXapVC8Yyes\nhGdZtMz5kBXrDJDNjJYSGiq7RGUQpCTtpkA4rqKgMjRgt42A67GAxgU2x3Ax\n++0QWzknuOQBB5JmY14/w17Zz++0plI4/S/IBep/fclZIynKmZTK3Qe0deNP\noVMfPd9VLbLfrURftql5MO6U4z56zVQ0B9mta/hfuqRhLKQF7mlrvQlHQCna\nn+Sil7eodsfXi/X8X5MZqJMFuGP3rstOHbpiGLO9CuyoytfONDzyTchwhHMM\nGr3bdgSbDPpkwKv1m1vsP/OQpYWVa4f6if1tdcJY4x6iApTa1ZhT+4C44UK9\nA2sn\r\n=Teea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"fce5372155e62c5f0094169b6d363e9ccfda9471","scripts":{"lint":"eslint src/**/*.js --cache && echo \"eslint: no lint errors\"","test":"cross-env BABEL_ENV=test NODE_ENV=test jest -i --watch","build":"npm run build:es2015 && npm run build:es2015modules && npm run build:es && npm run build:umd","start":"node scripts/start.js","release":"node scripts/release.js","build:es":"cross-env NODE_ENV=production BABEL_ENV=es babel --config-file ./babel.config.js ./src --out-dir ./es --ignore __test__/**/* ","prebuild":"rimraf lib && rimraf umd && rimraf es","build:umd":"cross-env BABEL_ENV=production-umd rollup -c scripts/rollup.config.js","build:es2015":"cross-env NODE_ENV=production babel --config-file ./babel.config.js ./src --out-dir ./lib --ignore __test__/**/* ","test:coverage":"cross-env BABEL_ENV=coverage NODE_ENV=test jest -i --coverage","build:es2015modules":"cross-env NODE_ENV=production BABEL_ENV=modules babel --config-file ./babel.config.js ./src/index.js --out-file ./lib/index.es.js"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"5.6.0","description":"React layout components","directories":{},"lint-staged":{"*.@(js|jsx)":["eslint","git add"]},"_nodeVersion":"8.11.1","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"dependencies":{"prop-types":"^15.6.2","@babel/runtime":"^7.3.1","inline-style-prefixer":"^5.0.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"bfj":"^6.1.1","glob":"^7.1.3","jest":"^24.0.0","chalk":"^2.4.2","husky":"^1.3.1","react":"^16.8.3","sinon":"^7.2.6","dotenv":"^6.2.0","enzyme":"^3.8.0","eslint":"^5.12.0","lodash":"^4.17.11","moment":"^2.24.0","remark":"^10.0.1","rimraf":"^2.6.3","rollup":"^1.1.2","semver":"^5.6.0","esprima":"^4.0.1","request":"^2.88.0","resolve":"^1.10.0","warning":"^4.0.3","webpack":"^4.29.3","fs-extra":"^7.0.1","inquirer":"^6.2.2","jest-cli":"^24.0.0","minimist":"^1.2.0","cross-env":"^5.2.0","react-dom":"^16.7.0","@babel/cli":"^7.2.3","babel-jest":"^24.0.0","css-loader":"^2.1.0","url-loader":"^1.1.2","@alifd/next":"^1.13.13","@babel/core":"^7.2.2","@babel/node":"^7.2.2","file-loader":"^3.0.1","lint-staged":"^8.1.4","sass-loader":"^7.1.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","loader-utils":"^1.2.3","style-loader":"^0.23.1","@svgr/webpack":"^4.1.0","dotenv-expand":"^4.2.0","enzyme-to-json":"^3.3.5","postcss-loader":"^3.0.0","react-loadable":"^5.5.0","@commitlint/cli":"^7.5.2","react-dev-utils":"^7.0.3","scroll-behavior":"^0.9.10","react-router-dom":"^4.3.1","@babel/preset-env":"^7.2.3","eslint-plugin-html":"^5.0.0","identity-obj-proxy":"^3.0.0","pnp-webpack-plugin":"^1.2.1","postcss-preset-env":"^6.5.0","react-app-polyfill":"^0.2.1","webpack-dev-server":"^3.1.14","@babel/preset-react":"^7.0.0","babel-plugin-preval":"^3.0.1","eslint-plugin-react":"^7.12.3","html-webpack-plugin":"4.0.0-beta.5","postcss-safe-parser":"^4.0.1","rollup-plugin-babel":"^4.3.2","eslint-plugin-import":"^2.14.0","rollup-plugin-uglify":"^6.0.1","babel-plugin-istanbul":"^5.1.0","terser-webpack-plugin":"^1.2.2","conventional-changelog":"3.0.6","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-markdown":"^1.0.0","postcss-flexbugs-fixes":"^4.1.0","rollup-plugin-commonjs":"^9.2.0","workbox-webpack-plugin":"^3.6.3","enzyme-adapter-react-16":"^1.9.1","mini-css-extract-plugin":"^0.5.0","webpack-manifest-plugin":"^2.0.4","@alifd/eslint-config-next":"^2.0.0","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-size-snapshot":"^0.8.0","@alifd/stylelint-config-next":"^1.0.0","babel-plugin-module-resolver":"^3.2.0","@babel/plugin-transform-runtime":"^7.2.0","babel-plugin-transform-dev-warning":"^0.1.1","fork-ts-checker-webpack-plugin-alt":"^0.4.14","optimize-css-assets-webpack-plugin":"^5.0.1","@babel/plugin-syntax-dynamic-import":"^7.2.0","case-sensitive-paths-webpack-plugin":"^2.2.0","babel-plugin-react-remove-properties":"^0.3.0","@babel/plugin-transform-object-assign":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","babel-plugin-transform-react-constant-elements":"^6.23.0","babel-plugin-transform-react-remove-prop-types":"^0.4.21"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.3_1559536546098_0.3030051539854024","host":"s3://npm-registry-packages"}},"0.1.4":{"name":"@alifd/layout","version":"0.1.4","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.4","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.4/build/index.html","dist":{"shasum":"3917b6344a9c86f92fd620f0de9c0f183ca2f266","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.4.tgz","fileCount":23,"integrity":"sha512-3AkYFYgYUbOdzbBCaPgcflr2fVhViPAyHyxkDZIzkOBhei1LcqOKaaq4ERU9mEm38sr9VHPfbe6W8ps3gWWueA==","signatures":[{"sig":"MEUCIQDFzH9i9OjNHdDOwhrWyYioSJwqnRqj/hedaFaKEniIGAIgMlYdPBwy7Xd7+fyRT4EOPBwRwLgl5giUv4mYREVd5Tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9LwRCRA9TVsSAnZWagAAg+4QAJIFxWvmuLoNZ/Z8Hw4J\nHpH6F13iWW3/I+c6+Kr3T7tdbPwRKyiY9JhHd5lFlWVtlCPad67Q+xRCPhgz\nZlmtcv5eSqLb1JiuBnhFeLIrq/Dyd5XMgOI00R7m2mWfti0dlnwq05PuSDNn\n/sgaGkoaMIwI7ru83zgk/4DYAu1Rz4OQNms+pZHdTE2lL95xbvUOl6UApO+B\nv6X0lGWYbSk8lMYo7tx0f7ITw8MyedX/RL8ah4n4j3Xh+yQ1VJKnQtHjslTO\ne6HbQmqmVtI8oWJikW6EEoqDHa3ekdCZrglY5ZtVkY8tz+yDt8arC1rJTv/X\nt5rLdOn0otjPOWnaX62IHntFCd+h7o8rohvUUkczrbzy+bf4EAe3wMrvJVsW\n0NaWr3Z6Yfr/yEbJoCVpnhrSgBSx8awJSFyZxuQyuEfBTfQpzI2VCLm3rTbP\nM4Q+1MdCYP2TSsuBqAnYVQgHOs6k+bhzaEWkXL4nrJHNhLdJvCGlgpA+1ctG\n8/jieRmzplZ0LigwtxQez7DuQHyAkZzdKOLRK7vLDVNc4N8bPBGUdx39WkU5\n6/WmqXRp6es14ZWupGfbsmhtoFRBZWKqQBU6vOGVBuv+nWSlCXmc06q6+dFh\n8+/2nE4d5gVvz2A99v8QbUla/kNjhXe5bBQy1gzBND34ign1JsLw8qPoTDAm\n6Pgs\r\n=T7p7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.4_1559542800540_0.11692387322746112","host":"s3://npm-registry-packages"}},"0.1.5":{"name":"@alifd/layout","version":"0.1.5","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.5","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.5/build/index.html","dist":{"shasum":"40a1d41f4fdb6be0c39a79553f35e576f996ab4e","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.5.tgz","fileCount":22,"integrity":"sha512-8CN+dqfIxBGyjI97fvdb6ZtUdkStXeYEcxuC/On19jO5gXViU1taWbd/B4S/Ml7Gtlg1i4c4o0iNT2XeGje2jw==","signatures":[{"sig":"MEUCIQCvXJtdLVh1hpSNeiOlaDOZLP/Hkk3pFqomsCdTkwnVjAIgO5AeMSEfiiV6fRmbE8UCv5Pn0FjX0YYCnx/r8rpFhOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9NwcCRA9TVsSAnZWagAA2TAP/R0R/nmepMsGwYGh3nRN\nRaLoowdHsOckOkh6eFs0Lx8Zh7VMsjkZmJGF/mcZFyIYLLVhu2Vj0p2Va3kp\nh68Gr4G+iMCMlbxua/UJCsRZuP6fwXl4dqrP8kbMVePaw7Rm1H+0FnQSBTYH\nrcm0RekfWZSrselHSXItOgqMXCH6aoBMzgH2arvnSNTXpXpGIxHMnCLoGNEn\nw3w0kHMZkctplFy646KXr3s0OEsiy1ffyDNcnnon5xP5c4t9wpPcgUS7GeSl\nbATrtRwCCEefPaX3mRzGSJBVQ50rNdzYhHXj79WYHE3fvlFTpwNXJFgPw/l+\nbXL9nzHoqqlDhZ4sdDheRwb80gavme0SWmqobcGSvv8lOnvEJaNsNptGM7HZ\n+9x5qDOs2e1TvwyefkI8bNHU5DJ123yVfC+Fiwqja2md2jKISA99JpkRNIbU\n911JdDKj/CHkXLKbnVf5mJHwBxsduZ78SslG/TMC+FDoLzVGlbXlEsFgnSPq\n9U+665Kjw09luOwxn5/lBm2XFrg/oo02h6g224KILb4118yuVIFsC3SkOOuL\nwFUFxk4l1Ukb2X76JBMJJhEsOgS30U6S5fFg8RmdVLmTVtETQ/zECY/9HFAl\nVvTc6IU78kA94SIsUOr7xVhpuKbOJDbB1UsYFQvqM9U0nscqcexxmlGlmMOs\nMJsM\r\n=1i3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.5_1559551003996_0.49462754312322077","host":"s3://npm-registry-packages"}},"0.1.6":{"name":"@alifd/layout","version":"0.1.6","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.6","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.6/build/index.html","dist":{"shasum":"006498624be0dea188b4d5174a9056357f0dd3dd","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.6.tgz","fileCount":27,"integrity":"sha512-IMPjbHIBIY3wrKZNThDTs3g8d2jb+BfxFF3vs+FmgVASBXkNjgIPkovsdGv5tLUKFp7o5uBIoGUQx78Hk+sFGA==","signatures":[{"sig":"MEYCIQDhQV8XHLoRmTA761ZmGHI7Ukul6IZ77BDJ14Ep2OWCJAIhAKHO6o4esYupE+XEbI+G9ZRVXbq6MoF+H8xl8e91Wyaz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc95VWCRA9TVsSAnZWagAAZfUP/09vXZONekOjTPePudJ2\neb9FZUCzT+u6UwOxjasWD9LY051JoOfxXJWKWieJZTkF4PKNFdqOGPgo++Ck\nhBQjCwEgLDrnPfZBw8HRj1BT9stTsbaMoFQBVuw2GBBAXsPLtBbPeaBZ4CVl\n96n9+WFAPsffC2x6igBfg8fIMBjSjUEZOl4VwPUgmzSy/Mv8a3iYS/wkPx/l\nE51P9HEdrMZhymo3zzv9G0R54Xt+F1iklIRcKBdyuIRLomqpi/DTd7WXj7vc\ncE74qaz/djhgobNnCIrK4qNBRAYv66hVwBculcWJYZ/gdlgn35SnHNqUxrXX\n1KNSAdG0GZnCQF8fB9KkxwGH2yC77B9qlAF8QgpY0l/d6HCXZEXUOFN33uNV\ntpkytqPnV5E60w9+Mrj1WvG+BxVu/qyE0Ee1KCsTfGVNYbCBQ3C2FwAzfqEC\n6Pc/AxR3TfHOJc1rgHZhjDwEKguHhPaSxSvIHW0fYjuGg1urwi5XKQZqDWqh\nRDsEzu/gma+QUXaFQh3oZwwVIRmROOf6ajtc16CYGf8/GV4UNRnEfnNIvoew\nP7ybDUOWsR3hLnqGwAntGBvvgLy4UtJ4DQyz7UfPa6/Gaol92qJQa2ePZBfv\nVWQfq0zr83L8dC5GLuGbvp3kAd2ygl6aEiTFRrZJNnpUJ8UoGxjiz6i09mlk\nEKGn\r\n=hWxN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.6_1559729494104_0.9003648841974208","host":"s3://npm-registry-packages"}},"0.1.7":{"name":"@alifd/layout","version":"0.1.7","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.7","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.7/build/index.html","dist":{"shasum":"8b4b86d97f745e3447c866dfa8ba54b357efb272","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.7.tgz","fileCount":29,"integrity":"sha512-35T42PEZBf8yYXFqDETSIqw4Y4A86yKG7HD4Wu8aFrm2Uw1fG8vrwYtp2B0aJGEaoKDhq3+xKVrfXQwtpLH4ZQ==","signatures":[{"sig":"MEUCIQCTAKN+TT3JhbNfRfuUFLXhP809t2cru4AcAKG4KEZB6wIgU+0VVykJT+WuO0shsB+UdEvABkJyHDs1dHQtxiVSw9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdASC1CRA9TVsSAnZWagAA1KcP/3q/UFj0km/UrNolGrfU\n2Z/PvO/wpJJkH5JxwnfNCSipUHR7VQca7E3yi8gQ0KHArXl010OZVL7yVoy5\nEc92ZFQ9Ou7H7B5emiADnnCzB0w55uBpFCVj5zSKKYRSMq7sxfPZ41xgg/nX\nmxjzM5WLol88iUsJIA0qrdf9P+pxOGUZpLbKwI9Jj1taB03b5337QkmNxACq\n3GnKbMJNt0VjG3lIxaP0BpY69kM6IxtrTRW/QqFBUqKrC4425ZejXMA9gB5g\nN6LJ7bnZt7mMHk9kYjfdO9T0+1ZEcS5fcwh446fjvsTN+8bvUw0JdLqZCodJ\nAGfc+HKotKQpkf/iM2TES+P2UHdLGJg/sdOIm3Jlo8/dkRWtJAKmVYo1ydWt\nvnmspG3aCOzc7XZvIr+IKcsHhTZfa4clFwhXbdjtyqzNhhuMbbhYIFAe0A5m\nstDnJgR+2di8xP0pZPtvZapaSY76v0mvrK2EXlE+4ZKUdBTc6oRVfeBkeX3k\nkyAifAyXKVSXCn4pIJR5GmOvaPL5mSc5zLlb6zHz+qJIJh/4/X1f3E8XJbDC\nFuku7cIP2uDKzgR/3IcRPWhxi10rM1r9EjEWTbrXHvUazeqMrTZNnNs5176M\nuH+1XA3c9UlLBhiW8ZFpD9jsUkTeX+LUHN4C60aNYH2KE7COHXYTEC2SIUJ9\nsqST\r\n=iQrl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"5dcea0f409bbe2e107ac471d91f7a15dcce0a298","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.7_1560354996119_0.038324953805693784","host":"s3://npm-registry-packages"}},"0.1.8":{"name":"@alifd/layout","version":"0.1.8","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.8","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.8/build/index.html","dist":{"shasum":"0e839cbda43095ff70a35eaae6817dc557a6689f","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.8.tgz","fileCount":29,"integrity":"sha512-KyY4UzYesQWa5vKHVvC5dCu48GbktotjuSEG1ZWo4I5i3cHKhHPrh9gBTOftrpPbQZGwUzDtP7o+5NaQELF1Og==","signatures":[{"sig":"MEYCIQDHurgzcbjfTH2AJZLfclJ7nWsEyz2GpAUkZfLtoJtl3QIhANemo8n9Ye1ai5si6BMA35LCX81vOPwEUTjMgNOVJEr8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAehfCRA9TVsSAnZWagAA71sP/RN31xUewsRXlgcKPMtC\nrBZwmPvc0Ty7tEHFjLc8WwRNQ36eSKNQ7jrXE9dtLTp8nAjQfIzWxJEVmKCW\nxc27kTj1mKZzhENL4gigwJXn5YMLseGwMfha7wr4f5N5chP4PkzpZvH/Fp0K\nqO0/QvG7MisFiqM0wjX9oX3TQxNY2d5eetz14OPrgqCE68Lblqh0iB/fhaUo\nGsVUEzxAn3YTFheOpTIfq1aA1AvHIyxK6sJjJGkjXefsIiCXKnv1gaNe+YAw\nyFZA3Xti75NSqdQ4Lu5uIzePhRut4CIYhTfLBWjOGa6H/d0cnZ/gx46RCZyj\n0mHii1Jlci6DJs2ctWOp917Y6P6SZ+5iIG9Y66WP2EW0UBrlC7bqW0NsozZp\nmFaQ0cRpWPQeeOIa52r0ljiVFQtuv8zt9iYj1gmzt6FKfwifJ0vaenyCph0t\n4/uMLt0Ba8x9D0KKnZi+Ox0MVAMuKUoS+3YttcCJCveawhXeEZUyHzVI5kxD\n7+i4iCYQ+bsGsuuCSURQ/0mwmQzjKl4GmiaFjuZKw2a0dwTkti/sWcSHYEsD\nmyfv+qsSsLUl6Fi2IaRHR/576+wm87oL/GJHfNFvOyVlt8yD1PYHU8vPk/wR\n0rIfcurBEk5C335eI9e0LMsmzdPKC9kfseag638DNpbSIHEp8w/HdFbm38/Y\nl8Si\r\n=ywT0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"5dcea0f409bbe2e107ac471d91f7a15dcce0a298","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.8_1560406110508_0.19343532692958232","host":"s3://npm-registry-packages"}},"0.1.9":{"name":"@alifd/layout","version":"0.1.9","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.9","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.9/build/index.html","dist":{"shasum":"e780b1b63fdbd0b716fcc2736b6a40900808cbe6","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.9.tgz","fileCount":29,"integrity":"sha512-9DXRVX21XmmwED/M1wMdXmpNLD5NcOugYVoOnbygEdGGu1yLZS3sGUSXyFoAaEZkBL5ZPScrNcBM/+McxawE8g==","signatures":[{"sig":"MEUCIFm2OKt0J2Xu0yslhkh1wfCEEqInZvl+U7PjewmlMlbGAiEAyG6y7RmxsQrwr7BB3dmJdr398fN2lpH15DeUJkQbN9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAggQCRA9TVsSAnZWagAAJ/4QAJgZ3xeicgzspYXcO7R2\ncHJ8Xu7FAbz/lYEhVrFCWIKTpyuRGeJ+Tz//oDP2JG43Tw6wdwUyD8DVfbE/\nfEj3ivNc2RewzkFvGjVJTBScAm/84EjaxKMITKa0KcnOftgGDPYT2RBmJr4u\n1ysDQDjN87Axzv8pGSoi+FV7BtHer3XE7qgXJROnbs2otLiHfz9S6/8Vcr7z\nl6RYlgNHfa1SbUJ5c8SZJnBISa755+B901vCRrzR4T9dBCj2cn3YXwOKVVOC\nYOwLI9OkAgOmhtQvDa7MpAdY1F5tN7bVx2T6HOtJlu3dJH/3kcA4gYa4DsRB\nPAwaAOGzNDvrzA2VgjCYtaw7GK4j5TJ9CCSMYGHPtW4GqbCGUTvEcSQ1YgBW\nWycgmtwMprrbJkmrhbOmNbAxaBxkJ4DyDlCWX+0MavqRkEc0juxomDrkP22V\n61OvVV6kHq6EBc78Fyt/eiV6t/BG5Ih5+DdGVheGybu53U3f54EOTTOIcKBb\nGjV1zfuLK+WZDYV7X5z6VDlUWphHB9I3TWlLBORKz205saxMFbU7SRqaI/PA\nd5htD/FHPwKOCVuMFdQq9KHvdpPM+ToDvlRX9sk3v0yHekKr4f9OPjPZpCsE\nQpiODqA+Xt4d0hGIXNqqwO0jn12sma/AHorHHnaW54Z8dGPogGLHbvGgLlPX\nZxYQ\r\n=giUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"cd92c18547037ed07ce8c7bdf04f9b783857eb38","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.9_1560414224004_0.3558652052775413","host":"s3://npm-registry-packages"}},"0.1.10":{"name":"@alifd/layout","version":"0.1.10","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.10","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.10/build/index.html","dist":{"shasum":"b294aaf6076f841b939f504f9283187a50130be7","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.10.tgz","fileCount":29,"integrity":"sha512-pf2nGn8JnII5lABxuSrNMpGv75iOAgbhfjxorlT+zLnUrjxXdA0RZlKOteC7gFrl2sHAw3fec1/fP5CslZNmnQ==","signatures":[{"sig":"MEUCIEIjOmSWHO2dyrVp8L7EFhPLlNFwTBIGcKDI1m+YUYUWAiEAtxsgHaJBlFVqsVbBkEpmZAiYz6+Zuyf8SM+5WfBSUWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAk47CRA9TVsSAnZWagAADbwP/1vEEUu2PnaRsy8r1RcK\naMUKLbTPzye7KyEPjAi0KdjSzDmWOjBm2irFdHc2teQEIUaThipNK+7kWViQ\nzSPo0Aij6MuOR1QBEU9A0hmKFQSpMj8Po8499Nl/0PfdL6out6r2k8K3Qylk\npQTTbWh2U+oopvaijV/84fd/7nN4YEX/b79WQ233fzL3YRI12XVItK4k5SZk\nYzbyGqgS554isETIOd7W6mpFljbo0hlOy1lGvioK/LnRYWvzAKmCDx3VIWW9\nYvqMUr8wufr8dZLwtUvmn4L4MhaLqoURVFNoxe2kDYC6NZIqLHyv+5HhiJ1H\nGDjG1B4XX6j128qxbZuwkhXfZHaxfZNa5OO7ijRPj4DvH6Q/BKJKwlQ0SV7M\nuKVPhL7NajKc2I1doBLZagz4zmZSMC/CN9SB5NsmBP7BC9nPwIuE3RPA1QRT\nO2lHI4Bi5VwG2grp0Cfj1zk/6SbDSvyT7w4p76CQVrEFwrPI8zmL4dlx7eu1\nZkdQCX0gk7lvoMI6sqP9P1yGhSpSz2p8PwT/bw1b1qPM1vvKJOu+xk7ShRJN\nX82CGlLx1Ahdrw3qGxs8kAT6+ZLZT5xDWM04afMVNXaXPA3/HP5bEUHUHV4G\nk6b5itj0QgHhIWm6GDqmGtLJAy7umcDKcR0KYs4q33mscJJQj3LUf/IL2ABU\nfFP8\r\n=BPee\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"266588c45046cba66c6cc24b7c88bac8774e2b45","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.10_1560432186122_0.9611583643913735","host":"s3://npm-registry-packages"}},"0.1.11":{"name":"@alifd/layout","version":"0.1.11","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.11","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.11/build/index.html","dist":{"shasum":"70e70077e4763dadccb494517adcb01d9c395be8","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.11.tgz","fileCount":29,"integrity":"sha512-7/plyRDtDBS4gtnnJwXj9J6uT2O2bD17ClZwnf7u3cEwObhBrpSuyCtwfPkdkP4mDbnoF1y9S9R7G5xIzao6Pg==","signatures":[{"sig":"MEUCIDLm9m2B9DSNptV5bNVi1w6ZJcVyi84/y9z4/neMslYxAiEA6J3m7FGKS+A+cdYw2gm0QI1kPZMEuyYBgh71RWQ2LXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAk8+CRA9TVsSAnZWagAA3vUP/0ryETrNBgOCzLEBa3mT\nvd6MbLf+QuFnP1FX3VsD3a7pal4TbP5aDH5G1Qst9ykxgzW5k9gS9RBlUKdi\nalaKawulFRECFir4C5I+ZYXMeOEViTuc09W4MHs3TxucSf86W8pPSpOsI7u+\nCf4rlObwGrweSTJjAGDeVTeTdE7GFcwjWaxYTE9Dhg7xecBePbzQ8UIGl0Co\nhiWW0Ak1HkVufNF2hsjq+n8iJztRLlPmeMDvebP5VuNp4/Ltnpfn6o5uq/le\nVvLJKsSfj9pcTFpnjpvhKe+PHo0g6QtEP6LY/N7ew/a0CW2naOoeI8BwHKuA\nNsVA8Y+lZIX2gHAECCuwNBu7rh9fPiLsCTsO+ubAxZFSqWmitTAWk1wG4cNb\n+/huk92qd7MKzKa9w4GDKmRMJL71OcRRX0t4SSfHk5tyqXUG9CZ8s6PKaJUt\n+IKlWiFW9jYdX6jH/4HOMMzPex9pobtsFk5l+izItAHbhTznweEAYnzyt72m\nNPQd6N/wysIZPmMHvufq5RkYZ2Rv90b/Dujqucaun+rIdxICuWkRa/boI9pK\n7BnKN1EXl6OjrHNk9rGOB7GE3t2CY4o0iM33MlLBr6DdJ9bJUbqWaWhvhciB\nUXkLRtdPdt/SYzsdrU1mXZxxwyt78LVTGRSyLOoTyYE7ZgZp5T268ng35cNW\nQShM\r\n=32E9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"2ba668cca649c22abe95c6d25aac32cf8939fda1","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.11_1560432445969_0.4540861949147399","host":"s3://npm-registry-packages"}},"0.1.12":{"name":"@alifd/layout","version":"0.1.12","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.12","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.12/build/index.html","dist":{"shasum":"750586f6d28d28b3aa306fccdf4f93c7299ab66a","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.12.tgz","fileCount":29,"integrity":"sha512-Xt9J7mTV/MabS7KqZQkCZmMN532mXiZi9ZDgDFzdBbYeAThmq0RDSk/3aZ7kRCav2BeEWHgFjoihZt2H7qbkHQ==","signatures":[{"sig":"MEUCIQDqEJQV20aVhXU071sHObSxAEniB8OKM2sZ5H687TXH7AIgK75RjPO/m55SV18W0blRYilnH1hIedDcx8n9ajUojeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA0ZFCRA9TVsSAnZWagAA3IQP/21+p6KTLmAL6KuW4Ezv\nts2Iyh0crosGsRRXIvk8hb/8Fr90HUZk6B3ADT71waiEeBzzS5zO+NmyFqkI\nJWTWzkYAoR7vWI2EkPNmP4jVwFIPBX/5zfIay/4aSUC/CBENDyRszxvRvsU4\n8zvZMzFRDkx11zHR/uXCU0GiSf03T/2lROkN2huvj19+WT8qa4NaUrS5oM2w\nNxA3JTCfvRaL+xxSQ/fPM1/0Sb0rdPJIJAWWRAAE+VSf0iB4clJ7btyHw5TN\n7xJLzKxqwDznZKqYDdaED8+YwWFUJ7MYfUO+QamjTUNQD9LAU0zGnNO9lKte\nOPLcj/RXgRXX/ekvecklcr/GTVP1uE93rSk143VUH3MiHQpHG1lVVx25knfB\nyfar8fEtvTXRewdwP9GzxbzfhM/Yilav1HlT0DaIEWoUbpP3b1nW0PYFuHXP\nDb/PYPF26He/cwCXvAjUw1258OuM86Ayk3uj8ZknC2r33tPc5CXM+R6rMWPh\n4YZQfOq5iDjQIFa/X4312h739WXGbY6+HqNJrCokimbvocn59QerMgGsRpXj\naSHIMlv4gioe4bD9VBUgrWy7sNrG7YZBa7wL+GTbiKNI/0sqWi8yvX/EMD3m\nsBPji3YSExB8mDTy6xKE5LNwGR2mIc2h60DHHxfyfNbVzUd/rVNSTbDZMpLI\nqrRi\r\n=vxgk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"2ba668cca649c22abe95c6d25aac32cf8939fda1","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.12_1560495684287_0.7754524666505704","host":"s3://npm-registry-packages"}},"0.1.13":{"name":"@alifd/layout","version":"0.1.13","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.13","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.13/build/index.html","dist":{"shasum":"6bcb0355e2b3cdfe1a69d99e04bfdcc1b07d84cc","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.13.tgz","fileCount":29,"integrity":"sha512-YofiVUEqd4spaTgTqR6x1VHs6INQ6ZQrUotiLyf47MXnNZ08XGKNJ1wW4izyhjk0O1MwPO3fLVTuuq47/bM5pg==","signatures":[{"sig":"MEQCIDHdqvVe0cMwfADeah5tYOrOT1HQsjaNrdqbsqcfFR77AiBQkvg7NX3vNNoZw0bHmbv6mNJcKnrCMMoEU9A/OfI/zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA0mTCRA9TVsSAnZWagAA5GMP/3Mm6UC7YxLnEsihEfSp\nCJoqmKmbCs4bZ5N/6PHsoMR+ZeUizxGMZcljrGOrV+Shp+9BgGgYnAjZ34n6\n3Uof1pxzlqq/2tRImvi8ny+QD6XiytfY4yyGy5kZ4h3jXM/FTyZCLMReuhjw\nuPwb9WtysdNO3T1ESNI5lvtfthoXiUIMko/sskuKVoouNj9nhbNlbcmIAaRu\noxB/2eKb2eLM7/S2B53C7VXyYewUVLUcp/0hZ66cM9FLpG1wzBdeqZH8EAXk\nhZvn7pQmAUW/H4Jn2p01wcwYZ+mDnaO443f7GnkAfN6GE2hR40khMLXDl403\nviG26i7g9P8NIGrO+Br9/RbOpxrWEYU9FqZzQrCl/amWsW9dbpr+R3LLXXHF\n4jFi7X4/ihevT5etee3hOEGMokr+EuKZFN0hY7/Q2YJWW8WoZOkbCNwLaSel\ngKezbguRcWL/qlQBCGwY83opcqpLWMLNZPjBuXcseRl3971BQROBougYXxaw\nWkTk74tFFGEyKUcEudCYnN1aG4Rtza2kxUT0m5cDjkTtcTY8loM3yvK9UKvB\nc/R+3leNREWm5eyyFllFILU1Hc0ZV91XBi0f8Kb63KSyPQeOUqUe0DFVolGn\nm9SpUWxdFS+gT5BPJFLDwEUTE9IaJkXnIpSHuZ56eZjJ3fJKnXrih32HSdiu\nKFhP\r\n=CVDX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"63aee0c197123e0640fb5cf3b0f3cc58b85c3e12","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.13_1560496530707_0.5193845894023503","host":"s3://npm-registry-packages"}},"0.1.14":{"name":"@alifd/layout","version":"0.1.14","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.14","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.14/build/index.html","dist":{"shasum":"ac127fc3e189d25de02c84e6bccd625679886d02","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.14.tgz","fileCount":29,"integrity":"sha512-QvoK9IelCX36iVxsGPtJv8xkIQYeL/erm6tx0nCd8SJhbv05pTxzLRkyajFOYi2m5/dJmev62nOPdIte9Gc46w==","signatures":[{"sig":"MEUCIQDv8rr52sboZ7aLrutlkOnwK37iSEjg3pcm6rj98mNajAIgbhaMMfQT5g+y6eUMIzjtLiY34OsoeOl808k1lKoz3hA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdBxSUCRA9TVsSAnZWagAAXaQQAJQxGtzJPObBy0mgfKVt\nsLSiJUDwQ18/RPlep2Q63YyGRGeK9H9ju+sXVAFz5rzZFUuIgHQOs1nzrFmr\nG1giE2joEd93Q9O6OtcsUTklQKfUOVlSUdcWsb85ZJx2JBfbrc4dJDjNlBOK\n+znnBhkbWgOMsY0cQM/JhiFN2QSX3UE9WrjgIV/0+3xSDHq97PsNBjKREyFt\n/yP3NPVS/PuqQmxMoRLb6r+RpEvhM3PQfQuwE/uq0sMIibC5+aVf1lqK2DU5\nO2sI9sLblfhzsWX2OMVD99fM8coSUWRqKY2ejYy+23+23NTCFAiwA08rMBdt\nZo1h7z81TurMURn2q7wMeyJ1teDxCIK0CvkeJo8V45OLa8iknUIZdiu7WVQP\njRHyVnbOLmbqcPP0Buy6f+5ZT9KAwanWk4Ew22SzVq0FFen3AI12xHjxdAsT\nezEsYkFu0iqaAbGd98YgRUXdKgtAhSLXuiWL6yHvIhuqQbQ+91H6bdliS3o7\n6u4NRqGNDsYFJdW9EJCSex1XT03P4lEgwfEaJq/I4bRc98TtpO/I0lQ3/tbv\nlZTbfd7PNkMscYp3UVbNABZJZ5Hk2+YSamlC1cwzoEIZqVSibZL4tAw/ZnQs\nPAsw//PWy5jHU2yaCqCKmhUjHiJ5rOp/Vbj4AX8iw33+q/VLC7FGPOQvPPwJ\nQBtK\r\n=eEpy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"c2f8a5eec8950d51cdbf10dd0372740a3db1fe9a","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.14_1560745107579_0.7239277405526923","host":"s3://npm-registry-packages"}},"0.1.15":{"name":"@alifd/layout","version":"0.1.15","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.15","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.15/build/index.html","dist":{"shasum":"1e45de1086600aeb615bd36fe2b073bb07a57b79","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.15.tgz","fileCount":29,"integrity":"sha512-V3XGbnqWGl8/7vGXJc6FS55aQZgVccETqBmD4WzJJJ3hiPSdlwKPq+pAEXxUIOQrUZdWFpNSIKOED0/uzf2TMg==","signatures":[{"sig":"MEUCIAWWVlDNkpj8rylDzY66l/uZgQyFTi0ezgIrmzUG5Iw5AiEA8D7oLBcxo/ijgkOjgxiP2PK4LxuFMqPBjBiSKIxuoZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdByo4CRA9TVsSAnZWagAAW50QAIMxu+wr/RXAFFHZ14Cr\nr7jDpUgIzTQluyut/bRX7zy349e/Hcoxzi4mjRouDkcbhG9oGcertoTCevJi\naoKyvpn0DZH+RtwZgYTdBjFY73ZRtp8f82HZPXBze/8YyiDhd/12c0bBo+7A\nALHEg0C/gNwWKUBTngB/Z4dP4BsEtuohkqGDPWwW5RcMaJHXvo8E/s4av75t\nkbGRq9ffbUAoIiad76WxXZlq+cg0waPvbBDUcnRJDeZLkxQFK32XqcrLixPY\nhbdxbSefmkaHwWTe5tmFVrrnYc+Kvsz9jaaNpuucutKLN+g2p15yfBlCagqN\n1lqNaP6UfUQYJLj3vykMjt8VSpy7sm18DjVtZhjpm30pipT0fImQWHQRgN0x\n6vHTIKauGT6Z2wY/E/M2JtjjzxtHUPV2i7xzoXV9Yavc+gDE20PpdYo5/DwH\nk9O/a4UVsEETdGUYjfOj+VauvUmbDnugG8aA72WnmqJM81NG4grO0wtgTN1D\n/7RN+BGkvcabFnv6sK3p9R7NX5AIF5JZ0+BDjACvWduhRWmzQeY51/REFs9n\nClW7E7B00/NOa4fQE+dlRHuaqJzGvU7dKnA/0WPko1DV+wfeZtTmooE4J8aJ\nCcLj16mWvjEd83WMZWIlVWPpDhXrCv7IMFFHNSHLgQxalqoR3dQBcl7VvmL7\nbUYP\r\n=VoMx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"c2f8a5eec8950d51cdbf10dd0372740a3db1fe9a","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.15_1560750647904_0.21525144457318968","host":"s3://npm-registry-packages"}},"0.1.16":{"name":"@alifd/layout","version":"0.1.16","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.16","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.16/build/index.html","dist":{"shasum":"87e2f51e0f2189b5d0abb70cf338299c921dd656","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.16.tgz","fileCount":29,"integrity":"sha512-UHYoOXUB2oGZVL54C6dZZUSgSPf1FY67Mh9xHKnYZeODAi4txv0pDRrpjERUm81Lnf5DEi0MmKpDD/5zlMIgtA==","signatures":[{"sig":"MEUCIDFennMfNV/lI16lGSxYAvT76Ia9d5XkvWTSMfqa+9CNAiEA67Nrwc7dLQ0JhkU/o1E6W5w0lu+asCwqJy0VGMTxqQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEdpKCRA9TVsSAnZWagAAM2EP/RrVgi/AnK+vCKvs9hva\npBEC9TELPqiV1oikL1XQHaxZ/skcCoQLtZyOwc9WzPXijS3t6VeK1M127cyv\nKlys4mp50fjT+4Ni9ktvuE9rnGrn59Ro9n6nW/GMQGHUjul8Glx2PVLBM3xF\n7ioMKIyPKoCDZzqjua3DOXd559sYqfnI0z+8NTPXvUqlmESyot4fXEaiDFRU\nWTH512cH8RJGVza+SlZ4jcnwSkTPg4J39HpnWws4JPdCIeo/8P0ntMv62Lvu\nlGz4k7yUbr7q4qpe/4u/F+iRgmYhG8BuEE8udI4v49nIa4Tm+3uxkjOryKLk\nXzIGFrPUDhIFO0KFtRNYwsCnYGARuI3O4ymcsUHZmPBi7wq23nOlr8o6+6eA\n51kPQ1YRl2RMKSlnzogny/1z+Vau49dueJ5y1Vk6LHuIg73l0c92lfRbMTwZ\nAdnauF22YPPNvV4rRW1aEcZl8bU+1k90VWz8WJTehNJIw/JPhJOYrj8inc3C\nXZ4w1pw7IVwAXCwl+RbHnAJ8cSX0DLf7AWKWjPKBm/kYHHrZPE3Kcwd4FiBD\nFM7svwcEortMCJxzCjArX8DjBfEeJLu8+RLer5FFqBE/0WvgCP9FtNmQ/H4Y\nn/ZRTd5TeZj8lxFR+gnRa2REzcH6WDSHqxYxj6/OfZHgUHe7OTGlS69Y4t4j\nEMLQ\r\n=WXpq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"f1ba3d2de65dd3d504a5720367f037ebd1fe08d1","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.16_1561451081549_0.5310494038425881","host":"s3://npm-registry-packages"}},"0.1.17":{"name":"@alifd/layout","version":"0.1.17","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.17","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.17/build/index.html","dist":{"shasum":"a93f81ffbd38a6480ae286d06d0b373bd9588724","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.17.tgz","fileCount":29,"integrity":"sha512-YhcLtGLxSvhrQNraVH2RvwtMUYsJGa5xFTGxL0igQj10QLzbx788JsdEhxiit6OMHz13aNfdiopkz4cwklPYDw==","signatures":[{"sig":"MEQCIDr2CcpHwhv8JfBwdEoz2whe2opU/ufNFTTNND1285TZAiBApn4E5+7oTNMAn0IjJCM7QKdnPqBA9Cfa4kC2uRHSKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJwJjCRA9TVsSAnZWagAAVfgQAJ5zr0tUE4Cg5dvlwR5w\n5h0fzgEoVNXtFnVI1MkB8j+PA8Skti/OuRzZd3Za4iH45m6JWaiaDE9quDSV\n+6ArTwjzq86bvzvfh6Ie/oOU5m6Xggn2lza7dMf4uJFBI3eRoZpQPsDjZztR\n4QDtoUOJCFPtOtOuij03HV8/Ov7xOlcbE3y/WSPEPJ0+4oeticr1ClKJv6It\nBzPbgU8INaLak9uJ9+4GwAPlGGkdXlXNLuTz5iAAa8BPi59EOszEmAY9y/Uv\n+lxcqLu41IAlJE8FZeYtt/ihF/NXVFDsI1sFy/6l61oiNBaCBQ8Nf0TnJZ6J\n+fpdKwXDErXOO//nCGbGgbXcmMsF6h3broSm2ROMW8s8qFFvRTNFhTMAgWIh\nvaDv3lKL8ZKZYR6S+YEOIFzgZ5sGvaSDFBG/3FDCFneiZv92idO8DBTAG5g+\nZE5vKR9dkW0JBfuM9Q/vqo4u88GbS0GEV1rkZ8434swA9H8ZVqP6nG20qqWI\nZvEqz1KM55TU1cPiA8qZmhsR5Y3NTy/hrG9MMkaZsrlOKaEt91BfHk8kKkYL\nDf+fbKSquea53vu0AMWJkeCOkL+aumTGlsFGNvwC2ng1qYijmK/IgUrq2B0h\nYE/X2gZCBbe9farof8t/DSVA3joG23Wq2ATYd4kRG7IcFcQ33IAWbWsoVeFR\nsHVU\r\n=uMF8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"732c992c81e63ccbe6ba5a97cf56b6994eb1fc95","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.17_1562837602680_0.1442002819102608","host":"s3://npm-registry-packages"}},"0.1.18":{"name":"@alifd/layout","version":"0.1.18","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.18","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"jdkahn","email":"justindavidkahn@gmail.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.18/build/index.html","dist":{"shasum":"5ae094e6f93962f561d378ba168ba4757c6e8068","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.18.tgz","fileCount":29,"integrity":"sha512-OxCcWnooc/OqrLUFD8ldgcEoUMGT3NnnTlmQHr0ixGZWiz5HCnE092JXElL1ZxPg6eqZ3ozELOh5slJWA18Uxg==","signatures":[{"sig":"MEUCIB3V9y0e0lDnGWKKvIul702MF4jnvrIrBKTZpJToDSukAiEA5LzBoxmfHAa+p3nb5hOghood2YKOI3ufuC9Q+Gvt4XA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQYnTCRA9TVsSAnZWagAA/TkP/jwqTIn+79tZcDKGbRUZ\n0gEVrrhUe0B8ObSSuFmfpkxS2mGxBwTvEoxkCMjCiKkA06RKZtVpztKMC2MK\nO0LMqTTeNNz4RNMHOPatB4zIxi5vZ+0BfEN+eS4fH2nslSo6fqSVzK1gQznm\nc2DNigYe8FfaogQN8gR+jRH3cirB6kr1DKTG4rB+3T8sbdPJRxPgiVEW5gvM\nq4WrsTQoAG1oBWEXbOjaCVCuQhmx8q4q/FJml3WuQXnub3jsPvUiJ4+a3deq\nGI+dMs90zMsgtGSixoEmdcBNWSgUBUFq0A97CrAsJmayVHRHNHgE/eTX2RoD\nn42o/6afgTzAO83bU/LNlbK2c2CM1vAkYyCI5XqGP18MJDk6Watx+VDtgPPF\nhoAH/wM2joaKctRyW2CmMYJev9vJ5fnVvn7ClKyQvX2yRpNPFBxm+9ePEDIZ\nKHOCrD/a8bUyXIc2MsLklFbliI1rORz4jbdlUbI8dBHrZXPmK6eVtBJi9iSC\nNbarrMZafdz1jNpkRkaQgZm92uMJ/j4UTjiOnUwtIaJUepXyAjXm3uHVqfy7\nl0fVBOGlhAAblASKkjLAdArLYlxUZJSl0XuRvFZn7Y2MFYGi/lNe/KVpoovI\ndUa3VvOIYptl9dCTOYD6ELAW1aIc6tbMhx3Sy3MTzzb1gxiI5Mjr48AZHVvX\nel26\r\n=C74g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"431712c9af349f17b5fd12f9bda703fccc7831cf","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.18_1564576210669_0.5551076659658611","host":"s3://npm-registry-packages"}},"0.1.19":{"name":"@alifd/layout","version":"0.1.19","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.19","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"jdkahn","email":"justindavidkahn@gmail.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.19/build/index.html","dist":{"shasum":"c4b379efa08777aa19b3093c9fd551e06187422a","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.19.tgz","fileCount":29,"integrity":"sha512-8Xv8eMB7s7z8D2u6MDYNzQSkNyGsYEQbeWq3ADFUDDYCRNioBMeZU/zeApFw0cJWjPPhqXCFOZIeG/6wSwsDpQ==","signatures":[{"sig":"MEYCIQCL/lweeQZkOubM34Ug70UBNu+M4SL1aXpvtw9i340GIAIhAI9uPN22f26sWpqyy+HOI7Vrn75CXe97VdKt1W+19KhE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUqNCCRA9TVsSAnZWagAAz8kQAIfpocl2sAM8Even/SBc\nocaaXUC/62+h5BIs8lS/yIiLcG46CNmYGLPF0yx1eznHm6ImsFqjyKZbHHqY\nvEonMBS2odh64u95DlUlp5YKYOvRDhYpN5RSRYvejrzC+yM2nfq9Dh/1eT2m\nHK8FTFlHNq1VDUgOA2S0lJoRlta6TknPJ0FgRU8/oGSWB6Qpwp+u/HB4DaRI\n2MlGK6K6hrREcCeJnEZtcrjC6nrLkgrfHvsSJ2ooBWJEGgh00fF/7t6Kbzvj\nYUiFPWXsQ2nd9J6WWzA+kuihyl8jQNJ2Nv0bPJtXyuQ3y3opJw8a1yRwnoDu\nC+vuisRB88TyVuWaOfM5AK/n9IP+97ZtQXFWzrRYODh+pGfTi5eon2/P9gSD\nQtL1L6hg0u7MmnAS34D4+LT3BovBZGlgpUKvm4K698ENBogN81apL+BGbawK\nLifQMPdz8YqvSrs2iWVTF66gMlsIKQItXYNPpOJMHb+Oa6uDH0ETZxBnkvfJ\njz7nIbtP7CGbxGM/dwJ4v0nx1Neu0MZJilJ7fstRfPcQZWWKXRgVY8Dx5xUI\nfCZCD4phiPNyo+0RHeUrK+X54Vx/P/1IJdK7PnS/+YBQxrlLHESsl9Lu0N7B\nRiuUzDKauUra8Aczy2p7ZzCVjFNGFCFGdwRNTTD4ovjaLWMcxuKoHGgWlat/\nSL7s\r\n=fteZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"04ca45160adb6e86402d0629c959987ef4c6289a","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.19_1565696833504_0.011938435315278273","host":"s3://npm-registry-packages"}},"0.1.20":{"name":"@alifd/layout","version":"0.1.20","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.1.20","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"fusion-bot","email":"fusion-bot@alibaba-inc.com"},{"name":"jdkahn","email":"justindavidkahn@gmail.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.1.20/build/index.html","dist":{"shasum":"a484ffc1fa90af14b1dd91d89798e2e6e1e60b90","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.1.20.tgz","fileCount":29,"integrity":"sha512-PzpwjGPwWV+orNKMSu66SUiekBpYtpGRR6cNSrHDUDjIIYUyj3fE7ef+K+y1pq4pECDJ7gDxUVwhkDqiS4k1jQ==","signatures":[{"sig":"MEUCIQC7iyObLL6Q0rx+dTBL1s0nrAbZs/PtQ9FdXwt4OkXtZAIgWmIqnGwUVbw+NTjr/TUhhELmTnxMf8Vusdn5ovZihOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiIO5CRA9TVsSAnZWagAAxgIP/jX6RgZHBpHoqUmpweG+\nfPa2N8pVa00E58spKBuUBogfwDYzrXMFJsC5FDEYOf9e30GiNm4tQSVG1RQ9\nEo3zUqN/m2/iCQQ88wQGiRXDpkrSPYeSOBmAcV00D4QLcjesa8BeTIByXkwf\n1dqmJhfHtXO1v5hXiqKnHbxBgWTy2Cf4nYTrd6UwjXgg2jBj14X67TqPClVk\n4ZUmrWNgOraKkGGgeQSXUg0YPSVmzGQLFMZ5+duQRQ5a8zE+gat4ys/OWrID\n29U+wthdhCSZXDJUZpDQ7n7D6UBOcPkZ+7hNqlgZq8U2fDk6WYvabkOKwn1O\nTCHGroYZ33+clUSdj1UmRWu0zYh7QSLNH/s7T7cP9mkXKPJDKEKGBq4WMAoH\nBUIDW7bgatlJ4Mx83Xn40YylVl2USZc/x5eM2Xy1I66AqiOflpNwqzNH92md\nQGdoDIemicyH2VWVYiqSnt50kytSlfIzn7wiUV+9McV2XXUnZqLxysj7Scre\necYXWxOZgFzuZQg3GaREsGZrNA7aqdCKiKnJwdV6wkFxR5/TIVPTDikLW1xg\newoJsX5ulcy5eESHGbOa6Rj1goQaETNrBihmK2lx+j0kxtPeVPTtuGzDWGKo\noFLtPuCF0UBFStIPQTTD+5J9sWYyQyB4vzDYGkFFV6fFrIeX+UAlEPwjdpb5\niqo+\r\n=CaIh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"226f42e58df8e309ccad5f8eef3c258e484921e9","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.1.20_1569227705048_0.3110441437134164","host":"s3://npm-registry-packages"}},"0.2.0-beta":{"name":"@alifd/layout","version":"0.2.0-beta","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/layout@0.2.0-beta","maintainers":[{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},{"name":"bindoon","email":"bindoon@sina.com"},{"name":"fusion-bot","email":"fusion-bot@alibaba-inc.com"},{"name":"jdkahn","email":"justindavidkahn@gmail.com"},{"name":"myronliu347","email":"myronliu347@gmail.com"},{"name":"no-repeat","email":"chenpeng.mini@gmail.com"},{"name":"tao1991123","email":"tao360907796@gmail.com"},{"name":"vicerwang","email":"1060455478@qq.com"},{"name":"wwsun","email":"ww.sun@outlook.com"}],"homepage":"https://unpkg.com/@alifd/layout@0.2.0-beta/build/index.html","dist":{"shasum":"91630b180800fa7880a7eb692d6dbb512256a35e","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-0.2.0-beta.tgz","fileCount":29,"integrity":"sha512-CEfdSttAUrJAE4JEisBFWFlwoQK8vF0CygiEUqeT2FIKjXj8nLey7dxX8ClMEkhEIvxYby7GyokjmlBrdtE+Sw==","signatures":[{"sig":"MEUCIDt92kgKSOzvrGIzg7teB0N+vnnNjLp7DS3KuTmjcdrcAiEAuVN/zRke3j3B1P3fCp4y865By30m4p7WXbyxawIJ1jA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2246581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1wPECRA9TVsSAnZWagAAQGgP/i1eXgwws8MaOWuaI+po\nzgF8JUdBbA8jxkUBKh+7NmF3kypR4f/f5/6zaFerx67QYH7ggyHK/5yRZwCy\n9/Q6k82/g2a+vdig2Uxz4FswwCqujnJV2ByiCHeNQyHOwYYpqMVLuvbM9B+8\nbgdsOXoky6Fzk74HlSNE9ff9gyu/U6ehPSBEbHCWQ4tAn6+Lf/g+5Q3DPLjB\n9MVszddabHWcJ5lVrZBwwG1SEwPtGE5FZBBSJOZhdPSrVBiPyPJDhqkWNBgH\nriokw1j6R18CMyJ0wwHWLoLD4qstD70LG4o+PccHS3uRv4u4Sf4GTN5fb4YM\nX84cNDrQ5LLTvg8SRx77uO1gM8VUD3ZI4n6p0zTSbuZaQ68897ck1jRISH+7\n4ijx+PL247fJE24AARLQUY7beQxOvlnGg9ZiczGc5RVQbngU5R2vwWVgbFZC\nQyry404hlnlCp8YCUz9yrFxD5cfe9UzTViGoxW1Lrij9m9mz5O/mifxYZScn\nxRVonl6wUXgJuCRC6jPZkOytYmBTUBzhwQRgaAGHslxX0nVm6Q1Tm4wPrnsu\n5tYGVNVvp9IfQG4ij4YApnjp5JRcCrM4ZvOtYYK8ZlMhe7OftIVcv2BTP8Lg\nnbXRLl/sGshpaoEIkl2dKTM8AYOHIsjJDoNRA0mVOkincT5hpBFBkKQ62Lc5\nVXqk\r\n=lk+F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"49fb22885615053e966bbd4aec9d8a8b1414abec","scripts":{"build":"ice-scripts build","start":"ice-scripts dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"aboutblank","email":"njuzhaoguoyan@foxmail.com"},"stylePath":"style.js","_npmVersion":"5.6.0","description":"Layout of PC ","directories":{},"_nodeVersion":"8.11.1","dependencies":{"prop-types":"^15.5.8","styled-components":"^4.4.0"},"_hasShrinkwrap":false,"componentConfig":{"name":"layout","title":"layout","categories":[]},"devDependencies":{"react":"^16.3.0","react-dom":"^16.3.0","ice-scripts":"^2.0.0","ice-plugin-fusion":"^0.1.4","ice-plugin-component":"^0.1.1","@alifd/adaptor-generate":"^0.2.1"},"peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.2.0-beta_1571148717905_0.9532010125003889","host":"s3://npm-registry-packages"}},"1.0.0-beta.1":{"name":"@alifd/layout","version":"1.0.0-beta.1","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.0-beta.1/build/index.html","dist":{"shasum":"bde3782d02171d23a6d1b1c915a1975905595025","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0-beta.1.tgz","fileCount":144,"integrity":"sha512-ymz4mD/Gf7uJsye+YoXNkOzpFaI5M1qQGnVyZmiYVatzHS/CevM6j3FUy7QP/YDys3/CcWHTshetjXrnTsFLaQ==","signatures":[{"sig":"MEUCIF7LH52iyVHUS2YcsL7HdDl1S2X+oH8Ujn2JuLNmDsAWAiEAiMjemv0xwqQA3QcTrPs4tc85Gi1iZ3Wp90cG9Dy9N9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4485983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiU+UcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwJQ//fi3ljTDsOrCMIzasmmMojcJzqDpoUbYzzCaVEHV9InyiIWrf\r\nQn7IdnUXe8Q7o7qhgfpetHaQ/kzgnbn13ELcuYihnIT+AFpN6dY7ZFcKfBlA\r\nAPr3zDK9rktIaZ4MYn/WM7DsEEZnJiLAYoArR4++IVNSOJQrBlRgAzNLjb3V\r\nG6DXofkXBcw8TOOM5AOLi7pM7IZ9jZ/vX1pRZ0ILVbDSfUgVifQ94ipqYQW3\r\nRWtvNGw+IDEhN4P+ySJi6050pJrtijDF4QzyqDF/jzHk/mls1ZVSuCrUkFhr\r\nhkqn47SxaMUYU3NArzq5SEayNmCWMemayQzZBmgJfJfsvVMrN5e/XNzFPtA9\r\nOocxoNb5xA+iZG1hkoASOUIQBkA5xyuvpXzxYT1NLrgVJDB+JGj6J2QwrvUy\r\n1rukF+48hTN2jXlvk4ZD5i7UvOiS5ud+RddmsOK7N4RJ/HMEPbUxzod9Ds0g\r\nFaXmn6R6Ow83FsEJ3p9pw1zj4gWLzSzk+NG7elxqGb/pSqYPOjeLDfTtAm+B\r\nQ3CMPbMkX1rAdBYdZAFDB9Y4cQ0X7tWFhIZlMrdoEcqh02H4Fy/z6eiMFb34\r\nw7iVG7VxdZ9UuAbUJPk3hJOkqj8DnppeOaFtuEdhdVUiS+9DNTSr8zWt5oN1\r\no+F4yteelEFSFjO+biO8lUS/NfEkl4FGEi0=\r\n=sxM6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件，就可以不写 CSS（希望）！\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `PageHeader` `PageFooter` `PageContent` `PageAside` `PageNav` 六类组件。\n- 局部局部：会用到 `Section` `Block` `Box` `P` `Text` 等\n\n#### Page\n\n> 槽位容器类\n\n| 参数 | 含义 | 嵌套内容 | 布局栅格 | 备注 |\n| ------ | -------- | ---------------------------- | ------------------------ | -------------------------- |\n| header | 顶部区域 | 只能嵌套 Component(自动带 P) | 只有 1 列，display:block | 没有默认高度，根据内容撑开 |\n| footer | 底部区域 | 只能嵌套 Component(自动带 P) | 只有 1 列，display:block | 没有默认高度，根据内容撑开 |\n| nav | 左侧区域 | 只能嵌套 Component(自动带 P) | 只有 1 列，display:block | 没有默认高度，根据内容撑开 |\n| aside | 右侧区域 | 只能嵌套 Block | 只有 1 列，display:block | 没有默认高度，根据内容撑开 |\n\n> 属性类\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------- | ------ |\n| isTab | 是否开启分页布局 | Boolean | false |\n| tabProps | 放到 Tab 组件上的一些默认值 | Object | {} |\n| noContentPadding | 是否去掉主题内容区域的 padding | Boolean | false |\n| contentAlignCenter | 全屏展示还是居中展示 | Boolean | false |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum |\n| presetHeader | 是否内置 PageHeader | Boolean | false |\n| presetFooter | 是否内置 PageFooter | Boolean | false |\n| presetNav | 是否内置 PageNav | Boolean | false |\n| presetAside | 是否内置 PageAside | Boolean | false |\n| headerProps | 如果内置 PageHeader，那么当前参数生效 | Object | {} |\n| footerProps | 如果内置 PageFooter，那么当前参数生效 | Object | {} |\n| navProps | 如果内置 PageNav，那么当前参数生效 | Object | {} |\n| asideProps | 如果内置 PageAside，那么当前参数生效 | Object | {} |\n\n#### tabProps\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ------------------------------ | ---- | ------ |\n| size | 尺寸，有 medium/small | Enum | - |\n| excessMode | 溢出模式，有 dropdown/slide | Enum | - |\n| shape | 样式 wrapped/capsule/pure/text | Enum | - |\n\n#### PageHeader\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------- | ------------------------------------------- | ------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| headerDivider | 是否有分割线 | Boolean | - |\n\n#### PageFooter\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ----- | -------------- | ------- | ------ |\n| fixed | 是否固定在底部 | Boolean | - |\n\n#### PageContent\n\n> 槽位容器类\n\n| 参数 | 含义 | 嵌套内容 | 布局栅格 | 备注 |\n| ----- | -------- | -------- | -------- | ---- |\n| nav | 左侧区域 | | | |\n| aside | 右侧区域 | | | |\n\n> 属性类\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------------ | ------------- | ------ |\n| contentAlignCenter | 全屏展示还是居中展示 | Boolean | false |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| noPadding | 是否去掉 padding | Boolean | false |\n| isTab | 是否开启分页布局 | Boolean | false |\n| title | 开启分页布局后生效，作为子页面(Tab.Item)的 title | String | - |\n| key | 开启分页布局后生效，作为子页面(Tab.Item)的 key | String | - |\n| presetNav | 是否内置 PageNav | Boolean | false |\n| presetAside | 是否内置 PageAside | Boolean | false |\n| navProps | 如果内置 PageNav，那么当前参数生效 | Object | {} |\n| asideProps | 如果内置 PageAside，那么当前参数生效 | Object | {} |\n\n#### PageAside\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ----- | ---- | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n\n#### PageNav\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ----- | ---- | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n\n#### Block\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ----------------- | -------------------------------------------------- | ------------- | ------ |\n| childTotalColumns | 设置后开启 grid 布局模式，当前参数可以用来设置列数 | Number/String | - |\n| rowGap | 行间距 | Number | - |\n| colGap | 列间距 | Number | - |\n| mode | 模式 transparent/inset/card/procard | Enum | - |\n| title | 标题 | ReactNode | - |\n| extra | 额外区域 | ReactNode | - |\n\n### P\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----------- | ------------------------------------------------------------------------------------------------ | ------- | ---------- |\n| type | 约束字体大小 overline/caption/body-1/body-2/subhead/title/headline/display-1/display-2/display-3 | String | 'body-2' |\n| verAlign | 垂直方向对齐模式 top/middle/bottom/baseline | Enum | 'baseline' |\n| align | 水平方向对齐模式 left/center/right/space-between/space-around | Enum | 'left' |\n| full | 每个直接子元素是否直接占满一行 | Boolean | false |\n| textSpacing | 是否强制 Text 之间出现间距 | Boolean | false |\n| children | 子元素 | custom | - |\n\n#### Text\n\n> Text.H1 Text.H2 Text.H3 Text.H4 Text.H5 Text.H6 对应 6 种尺寸的文字\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | -------------- | ------- | ------ |\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","gitHead":"f17122e4ad5f3b235904aee0fe32292d4139bda1","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","betaVersion":"1.0.0-beta.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","prop-types":"^15.5.8","@alifd/next":"^1.25.7","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":22,"url":"https://fusion.alibaba-inc.com/api/v1/sites/22/materials","name":"潕量的测试站点(自然布局+零售云组件）"}},"readmeFilename":"README.md","componentConfig":{"name":"ProLayout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.1.17-beta.1","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-beta.1_1649665307901_0.47987195868499555","host":"s3://npm-registry-packages"}},"1.0.0-beta.2":{"name":"@alifd/layout","version":"1.0.0-beta.2","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.0-beta.2/build/index.html","dist":{"shasum":"7a9da815abb817d0378ffc4d7ef10d095f5e94e2","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0-beta.2.tgz","fileCount":144,"integrity":"sha512-3+mNB5DvuLh6bpmW01xpKiHqjv0TyRsxjKqfcVNhDlKtKro1fxdxqCMeA0wiWFipHUOftVfz3COYf/lM6UiCTw==","signatures":[{"sig":"MEQCIG6MS5g8Rrb2qbzIUatgdjcqF8HeL56fIWKuXXb6uD09AiBrc4yWk4aVUSI6cjbYY57ogDJjH9TB+bwOxWMTMky6ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4511372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVPZbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0wA//Um7/mYdX1F8H8G/LRBy30gkTtKQieQwnbFYlVqWgjNXAEquM\r\nCQpPZ4o0BQ5JjPPs9Ib+N0LtvFZ7juKCbx+a/WXwNv3SEPQ2hyB+HYHY+Cfi\r\nO3Z7X+IEQuZ01c74td1McXuXKvhBciCj+KHC/PwWeczw3SS7PfWCKl3JQRqH\r\nvjmVLNmqU97I6Wh0NfNz9RSNXwtQczVhecviglufZ659JmPD4hhe2kPWOiRz\r\n5E4tjWUP3UsCPav4j2IJ5d1dQJ8EHlUEnuNWpmjMjEN7jZViPBWJNpEv0qv3\r\nbIgkQHqACvjxJIhERbXtt1cWb5iR3nG9ve6uJF8o7GHJfO8Lxio42AYPnR9t\r\nfzn7klxkSmSzHdxgdn7FkWFo675fPlhOLq1Q/wEJp+MsGJPNr+ks80+KBm4t\r\nSflJbAJEp8TxW8M/cInwtoPnMYDq9ixqv4Ex85dmrgU7Oj6qh+5o+/jNrkSR\r\n5ck8sCAniK9ToCxn4lIwYpv7wRwBeXcm+EEz/CVtl/fmxU2aGRBaNsI2lHuu\r\n2hRU8gj9PPvcqnDx9Aqs7yKzW0gTS1FQHEFr/5GQn+MbAkjtwkDrCZ6ejaYu\r\nnSqTcV6EZ/EoNAj/cRzfG9qR1a/Fu0iEc4v8FA4sfBuFGuBp6SkzqJJbylPI\r\nTd9lv668He7YKBnnm+0sDSw8nz0xxeQd2ls=\r\n=wTSP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------- | -------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\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 | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | ------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区域（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"431ad345756bf5678444056b1fe7bd6de16ad3b5","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","betaVersion":"1.0.0-beta.0","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","prop-types":"^15.5.8","@alifd/next":"^1.25.7","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":22,"url":"https://fusion.alibaba-inc.com/api/v1/sites/22/materials","name":"潕量的测试站点(自然布局+零售云组件）"}},"readmeFilename":"README.md","componentConfig":{"name":"ProLayout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0-beta.2/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.1.17-beta.1","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-beta.2_1649735259574_0.015552929424384132","host":"s3://npm-registry-packages"}},"1.0.0-beta.3":{"name":"@alifd/layout","version":"1.0.0-beta.3","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.0-beta.3/build/index.html","dist":{"shasum":"80fb7264418749736f50103fad88482f16bed3bc","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0-beta.3.tgz","fileCount":140,"integrity":"sha512-L6hL4j0l8Zdb+09KrlS4NwHwXTFltWein0rL7FKpTt0+4i+SeJV0OWr3wRVLB6T/OzZkp4yRhZ31W4bnb/U8sg==","signatures":[{"sig":"MEYCIQCXCPqImKp7d9fUnww3N5wNzmpQZNRGP5/t0D48SWnePgIhAMoivhA8dVngt+hGGHk8tTuBZ7iHX7Mjsxi/OqbnLhgc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVq64ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyRA/6A9DtUNEzZPlQ5I7WmXUewoLmpfXpxYAfbcwI9p1qWxc0yHX6\r\nadRv0ixaAnGANI6BBsb/0X7JJskVXNYHjjYv7+gxWi7xZM2Kx3Mouyuye8UC\r\nSJrxGU464aiqEJk0Av7f5225iPsIfTZzVezIsdcaW0CscJAKy2g81OeH/J6w\r\ntIYPvsVTNEG+fPgDH5WecTHXl07npSQmJkhJKzT2zPTRlcps2KbY0hhA1YyZ\r\niXX/ZYJLnDDaMkiVPVoD+I+e9f94ITZG8TI/IZDyoeZbir0LhYm9AeH7nIys\r\np2rWvusDTgJwHspKGjA+Yl+cFrKRYL3ehNI2GSisM3ucVGPtCfajQhcB2FZB\r\nZeT8mTJqqxF67YvFfTL75ISmN/SceWWDeYugCLxldCenVTawub96BtEKTW3G\r\nfJhFyDYW1fxFJIkhhE2nGzaNeEdUbdv6LAixRve9EblAt9yG+lw/I/ypfEpr\r\nmB4FwkxzgfRkBymLc8MngmrQsNWxos78mEy1EtBmWH+ymNAwXkLLbMhzs0O0\r\nTDa8ybekzLh62K2S3P/URP0q5uidyseuHm+4QwKB1/wA8yUQ5Ea7Y+D5Ydwj\r\na+iZk1CZmvro1qBM74aFP5UB4WQBPwNXsVmb/+BaBSe+lMHIFBDMPPfH30P7\r\nFZe9RB16uvwSXu52Q5TeqL1MVACo9fthgts=\r\n=1kxP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"dd77b53675427afebcb072d520d562afda900640","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","betaVersion":"1.0.0-beta.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","prop-types":"^15.5.8","@alifd/next":"^1.25.7","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":22,"url":"https://fusion.alibaba-inc.com/api/v1/sites/22/materials","name":"潕量的测试站点(自然布局+零售云组件）"}},"componentConfig":{"name":"ProLayout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0-beta.3/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-beta.3_1649847992414_0.7998894631997164","host":"s3://npm-registry-packages"}},"1.0.0-beta.4":{"name":"@alifd/layout","version":"1.0.0-beta.4","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.0-beta.4/build/index.html","dist":{"shasum":"af9f463e6d4c1bbe31165fd1039ded582c5f757f","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0-beta.4.tgz","fileCount":140,"integrity":"sha512-/PZFV2dag1b4u+olx4Jnj4G4ZSFJ8bQLBP5aZOLEmaFiVbIzaKPIHyIKM/4E122g+YrC/W9fxAIO5DtlmKm9iQ==","signatures":[{"sig":"MEYCIQCpHogF6/ViG+cF5AcCoZJPymA4cPDkyBRKbY+WK5TikgIhAKZaIBnL/X8L5FdQXy3q5z1AsFbXevE9hh6jDAG41r0z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWUzzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5HBAAn/L0nJW0fEUJ0qq2Jp0jQ0PN32iGdtQJ2d6fpaffANmrgiQD\r\nOqQpjTdcFN5U5XB6GrxZjSCyVazokSnVjt3C35YJiTz1aCareA8D8PJ7qBzo\r\nIu8dtS4M4AsqRDrWnAid9WNls8Ttwf+kVyX4NLcnVXyKivJMwkzO+cJvnSd0\r\nEXF4rEVI30dHH7hk8ZFyyn42aWpCbt4GTnF0cy6iu5mdHravXt/mhCSlOIkG\r\nRjrY+g1Yj/PCqVcNv7/HFcgCoXUOfmLmJGb5iRtuOL9LrNO2LWK/KJZTF9Ey\r\nT0fsIFdShN6bCkrtMqzSKQA8QzF8F+QHxXUbzLFm5lfXlzUbNBYdqHj6zThY\r\nsFcfSTMGfxIgdqrje3wBPBVaclv3TdWfzRF6d2Kd/xXuwQ5XY3ZtALtNKKvp\r\nAXxlYnf2Bk71v3NRQ400czPr28WPGsC8Sfd3Op1ZXigw5kFWlzEAEL0o5tG/\r\ncSgoZONLWbqd5uVkHHW9PiBLwbtAYuFrJ5tOWTywcTgj99j5mzDdguqk1io4\r\n15TcZ/EOcF1iOom54laC3IE1i3dp3mQYdBnZN809lmujnu1oVQLThCY/L5m9\r\nuJzPSWnfw2aGd9JjVGh2GX0g3UXTqxyYZSWTBCWWLi74Bc5Y4LQTHV+VZ+Q2\r\nLKX6fDHqDjT2jtHmkXWSQBoP2+L5Il7Vg9o=\r\n=fgTI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"c512126c57df74d7391a1f28c161c0e5b089204e","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","betaVersion":"1.0.0-beta.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","prop-types":"^15.5.8","@alifd/next":"^1.25.7","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"ProLayout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0-beta.4/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-beta.4_1650019570948_0.7695775196047487","host":"s3://npm-registry-packages"}},"1.0.0-beta.5":{"name":"@alifd/layout","version":"1.0.0-beta.5","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.0-beta.5/build/index.html","dist":{"shasum":"e81ea254fb9e034f3642747f842416d665cb3c5f","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0-beta.5.tgz","fileCount":140,"integrity":"sha512-NMCJGZ8DfbhiLO5AjwXoyBK/aye2sRs9+Wc2AV1iwNC48ND+ftrZhMC3e3zILnm4wcEAZgHfbjeydrNXQ8yF4Q==","signatures":[{"sig":"MEUCIC6AVXqZ+I3uc71AqJIrOoL1wwVquKQIJ81msT2GFkVsAiEApuDqkXx7/2VYlYIr/TpOXGjLg1pXwYnW2pZThMQobX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXUduACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAYhAAh4rttIdsR5HhytnNHstd1gTd07chLugE1DMua7EWSYBN7qFd\r\nm6Vvyy3Lssgiur96inyXj6tSxyVxXVvRAxM72K5mxVEoQwJdxYCsH4zwXCrE\r\nxpgOVX2OszScFPOSocH3HWVKIFLsrLSWqHqgDOFWTZQ0pnZU+e4Xs4RHkziF\r\no/82upCtbyxMYSmyI9L7l9cM+rG4PB4S3CEkpULOHo9AETJF1Z839gu1Udq4\r\n2gNLCO7CiG4b4dh+z3ejwSb4A+8TkCMIbw4cRKmwojqdcXLRPw/MLU8dpGyn\r\n70ftkb+yagKtM7hjtgGEzPlO30f6px+WFt7erjlPv1wFkvxIEJyyvT3oLOiF\r\n1N8dCGMt3pFVLbegp6kR8VvYNKrsOJUq6vsAZUOjEaXZtgjYM1AGzwhYQ8jW\r\nOrbLHOWRYszbDZWVSO5fplGF9C4bJcSvh/E2cb6XsG10CUhBjhqaSzdGDPBM\r\nWryShdggFxKjjngq1kvFWaGxiuQEVKDMP/0wF1X7pe8p2QIN42zAwqazrTRs\r\nupu/YO/KFcO8p7rJ654nigCDkaq/latGe1sF8TGycpVkav7cCegKsfzzxJNw\r\nyurRYRiUwuy0Y24pbU4nq2hQS2znRrnvvk/DjIVelriZxL3jMfbyFVer7dt6\r\n1Gbnlm/t1pLo41gHoe4bTk7XceNk4N5K/eE=\r\n=UjtT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ----------- | ------------------------------------------- | -------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\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 | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | ------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区域（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"94d2d29aabf7309eaf2f405ca2fefea7cec793ec","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","betaVersion":"1.0.0-beta.0","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","prop-types":"^15.5.8","@alifd/next":"^1.25.7","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"ProLayout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0-beta.5/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-beta.5_1650280301896_0.9534433184678113","host":"s3://npm-registry-packages"}},"1.0.0-beta.6":{"name":"@alifd/layout","version":"1.0.0-beta.6","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.0-beta.6/build/index.html","dist":{"shasum":"11e7dc7dd4b1abc909cc50f29480393d1a94f03a","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0-beta.6.tgz","fileCount":141,"integrity":"sha512-3Qtw58DfplaOdn4HIYEUSRxaJkPzkINXOKxT9BOGGCFGRQWEc93lF/TcT96WCOrbmv9am7aIRlt/SWV9LeGuWA==","signatures":[{"sig":"MEYCIQC0ogAEVL45xr4nevvEwWCzsDf/9b+INA0MmMIK8VDuKgIhAIRLmY/DbKSO2Uk9wZzThgSgstw1fYJWwxCvqE0HwaOc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3914734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXlWqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokLw//ZCLMLWrsNGGIHObn7mGYNavdvMlUaJW1TNqkLdtfhA/n4X1G\r\n034t0RISMdESjs77Z41NJZ3LducRnsDgn4RI0SzNqFn29o5OydVNWlyQl14z\r\n53DNIOK25L1Pfekvz3kzu3ef/BSLSzZxFBwNIFHrrjFyaAjaPqKXD/Dua+E8\r\nZfALsFbJOJUU4BrOk/Wqd6PlAFvJgdYPKQaXT4n038zoVwoephil0aNNzfCT\r\n0ZjaGZbJaEQ/cPeKFuV0T8CbjDWrKW7yNIym4WlCOdkJWrFYw57/eHoKoyl8\r\nVuQqWJiDnJHgY/LpC7ZJOIKS21jJqdkqaTbXRmfxKC1zsbzI3MScuBN+vFkj\r\nvsIOXeNmjXUWHz+mRR1uXlOwui7W+hDejgCIIFP3HodvbYjxBfm1UGxrblza\r\nBCb8VUlN4h562qsMOdk4xPnXfz9NUjOUacEYEp8eZ7h23uPcZOFdWqqieHSc\r\nbbsukOUDQhkhhfMDXQntgqf80nqoK4jgi6Ri8pjLrAmERwLuZJscC3DjS/Ph\r\nDDyQNxR/JGuYeKdYvBuDY5OL9oCYlK6lGkexJ38N6MwHVmjomzvS5Y23wu/u\r\nisDSMk57UuJU86zB5jPsv5qxcoG2YYrFFF3/NA8lRD3x4VcFG4vvGlclcR/u\r\naKvy3kZKaN2VB4HthdmGtqo3z63lNXduSIY=\r\n=QyRu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\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 | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | ------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区域（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"ffa6e3edf856130175b85bce2187ff525ba8191b","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","betaVersion":"1.0.0-beta.0","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","prop-types":"^15.5.8","@alifd/next":"^1.25.7","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"ProLayout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0-beta.6/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-beta.6_1650349481819_0.795356380240545","host":"s3://npm-registry-packages"}},"1.0.0-beta.7":{"name":"@alifd/layout","version":"1.0.0-beta.7","keywords":["ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.0-beta.7/build/index.html","dist":{"shasum":"f1d96003ee8d84653199b9dfae377f75c952f63e","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0-beta.7.tgz","fileCount":141,"integrity":"sha512-z/LmRTLxD4OmbEdWwasX+jL8P+MxVCoo/Cw/vTwLpXuufcHVCIGiyUxsxuWM0y0XBFAyYfASwg6wr9tjiCAV8w==","signatures":[{"sig":"MEUCIFV2xZxE/3AwjxVx9gXj2WItepGHPWjrnLFTmH6pVe82AiEAoE6LyiZhBTGryE/3rtDs+RuuKW5edeLqe7cpZUf+/ds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3914403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXlwnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0BQ/9FIhzaHry2I+AAnMA0H6hGn6D6VMG3kFh2UwulRS8y4JowJn6\r\nLGBU5XdpQh0cHEDMvdqh5k4ZISfCB2Xmjxy2nuVFffibX7OFmAuHI6psG+53\r\nw0wZnaPON8CgZ/7nAaD81Q502ScFkavB9afcci+lOCPfIIwFI7ErK+NQzlu7\r\n5GClhve2vyQyZoEh7ttuoe3JBtPZBPmwkodwGycMLcyWElSbOHgbpBF9G0RP\r\nDQ6BdSsEnoyREjatkwMGkoJjfpB+lv1yFtqipAOh0Xytw/WwmMsqDmDkxIqT\r\nEBMdpYAvrNUTDibDEKyYloYhr0T+8tkyfxZox+ZgMwzkKhymQas5JGe8vLPe\r\nvDSKpEC2C9llF/Mw4rRZOL1z9hpidTN0x+GXYsq/zEUGD6zN1Ms+3lKPoxzO\r\nRiHFHEgZU7RZGMm14Bpwv2LNbpQWSTS3qmU8gNdM0CuULksR15DDv0JjbE2b\r\nlJHDYe5eIhYDooxR3q3+4rLJSZVZL/wASCVcmCwnsHwJwUaEkyZ6Nm8pWeHU\r\nrhGahxudcCx+N5jAOhbETUiSWPvBpeUZDUrClBmuIndZoG3n4deG9trWn02X\r\nEBNOKV649ZATQCuwSJrmtyRy+Ya2ANygC3iWQXkCLwtBUCs8O6EuG0JjfS25\r\niPoq96qIDS1KnpB1LenJOJh6haVwp7BY4jE=\r\n=TN/K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","gitHead":"246113bf46cfdf863a4971a82780a68ced19b6fb","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","betaVersion":"1.0.0-beta.0","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","prop-types":"^15.5.8","@alifd/next":"^1.25.7","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"ProLayout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0-beta.7/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-beta.7_1650351143030_0.853772717900803","host":"s3://npm-registry-packages"}},"1.0.0-beta.8":{"name":"@alifd/layout","version":"1.0.0-beta.8","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.0-beta.7/build/index.html","dist":{"shasum":"e029a96e779c2fa6fb9df10928c3feb1fe1ca02c","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0-beta.8.tgz","fileCount":141,"integrity":"sha512-g7letnSuBFJMIBw7I7dVNSIsqeW9w1k+9Ixgo80T/9HRaXLLSrgQyLvHeZBw7W/vFWYtQ3iEu8+kAy4yaK4B8Q==","signatures":[{"sig":"MEUCIBybBNNwGcFfyG2fNLbO9zsyEakqwZzXyy6toGSeELGQAiEAriobnN5KwCYVYaRVXcWZffYkwe0I18oUBodSb9OIQ/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3918157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX3SXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWyQ//XpfhJ3JaqaEXOaUdtqpsKosthw8ysZW4RPgsy32ckm/dVb7q\r\nm4aqNW3fPmtml+j3D9R0qPa0g8YzkcfX+vW9k9yNQ1jmPBGOBsFop4eE0rGE\r\nno+XHSyjhe6dRPCDx7tNofw2S7BEJGNSHw/UYzKJZvOXqTlp/0Nuula7XI7m\r\naixy6w0e2rO02VVr5mmMheJcCDZz02qIScQDFikOZIFR1r8ZgqfY6yRB9VRL\r\n6Yta9YEHLnHbYa0ot0m4XYnehwnqyEnDIWFi1oJkSsfblgzuO/7ySqjsMooY\r\nEv7QWn0nOk4PTIyuoFb2AdKlemi+yJUQ7Rir2rDzSYkAnF+wFtOpX1O3Se1p\r\nHEnmQPj1cn3dj0zuOAbnhgrpy+KmTehdsc9xxKQkBCMnvjjSeP3Wspq5pKxx\r\n02QdpTZYStY4dGOSyuEXXca7U1kvhbMvsg+n9SbfNd7U+ONh9vMnYRXg8x5B\r\n+BBtztkroZpw1I+HFr3ELm8ixqelkseRlKDqH6PRh8YsSqoD9dVOECAv0+gx\r\norMP44Qjw89WClVCJT+LjEIYGmiftPfkmGQxh0Z2xDlC7l2SzoUGdDVm0KsY\r\nIu995ic0LUPuoZjxY3FVDnY0PET87iXhXP55/wzB/HN8ErRWHccsj6XT4qKL\r\nqJmcCGYm9H+VJyTnYIf84yk53ahzgU95jpk=\r\n=Bwpr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n初衷：愿布局不需写 css 样式\n定位：页面内容区的布局解决方案\n\nhttps://fusion.design/help.html/uzn1pu\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\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 | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | ------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区域（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"365b8de485c3b87f4a3175a2588a7e7289882258","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0-beta.7/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-beta.8_1650422935592_0.8326833034076511","host":"s3://npm-registry-packages"}},"1.0.0-beta.9":{"name":"@alifd/layout","version":"1.0.0-beta.9","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.0-beta.9","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://unpkg.com/@alifd/layout@1.0.0-beta.9/build/index.html","dist":{"shasum":"f68fcc01d2fa190907a04e74208d4163806b0e5c","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0-beta.9.tgz","fileCount":144,"integrity":"sha512-N7XbyNZz9Mz8eg/3qoFhhZFvkbmJEo7SfOtbnpggY5Abcv++8Y/4rj9+jbOVnB2f9FMP3I7iRe/eDF9JM4vSMA==","signatures":[{"sig":"MEYCIQDyVLHhFeQFx96AEyebivIe+THUV05OmjgDvdSiz0EUZwIhANp/ceGScq9ww0uAaUDcJ731WG+KfXD+WnNsNAuzLTQX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4599449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX7ADACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0+Q//f7C2Q0ImoDU0xBQcFpzThy5///qRYIu83k6wbEzp7NTAVpXF\r\n6UH5PXbIQa2goIV/hK/woYl2+JRjJta2iamZighgdpQ/LSym5W3Fh8TgJr1Y\r\nXSHWQabYsZYOpOSV3GE4t9WGYNg5J3YYs7zBfCznTu6IpYx3Z72XF25O36h4\r\nWS+UBfK7RxtVjjwggpbStMwA09ePgb0EryISTKJPRv4G9Sp/G+nX8JyjNjWu\r\n3MxwGG7sl0Eq/7cZsQ26rTuc1ajDfaJ9/p7426I+j5RCe+E3t1l1QjqIPTOF\r\nWMYsoORLYA2eXiiJqQDAF9EuhedbLmaPGPFw6leCZTIhqR1QFm9S302zEbOH\r\nJ7LkYFksdGyvMzKhC1/4HHJU100vmq5SxfKs4MeFRHGH8UrlIy2DPj8sh+g+\r\nBweZ5L8rOpYT0G934j89kS40ZXzVHNhHwZAZi3DV57XEwt2yFHpIT2psluuE\r\nCW61Mk6FbEUXsWSoRnopopAI+Ucm9mlRwFeEomPb/fUqkCr0rAtp+1MAhQjD\r\naaRcQmgwjkQlSYU219n5T6ZhNrzFQwplh5ecrphc56MgmrrIS0icWrT820OS\r\nCbpokJa/QdwSOgmppH07WoyWUQfAnI4jv1yHE1NbPO2QwIubvSFWoKAJDrmJ\r\nALnaOnpO+icIIkr2SRZLeE5hJlYUoCHlQsI=\r\n=+/CW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"dce05849b7162bd0bd9b20f2d5c19f2eaf42f27b","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0-beta.9/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-beta.9_1650438146783_0.5474328583850268","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@alifd/layout","version":"1.0.0","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.0/build/index.html","dist":{"shasum":"295a127952952c0899192eab08054e131defe5f8","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.0.tgz","fileCount":144,"integrity":"sha512-f7vtUFwdRjvcV4DPR28zFYmCGk32IXSXVCNA+ZwH78TJLJscGuwfyogEY83z/8et6NJWBzWtB3w4KL5T7dumiA==","signatures":[{"sig":"MEUCIQD+lyQBv1EhlRjwVL1RZw53/blDCtANYXpE37V3zSRNvAIgdQbOysNfAh4Tm8/Dyld8KIYvxzKtEyW3vImPp35Hgb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4598652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYSBYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiyQ/+MfKhe8AYk3AXttkMbnzxT/znkr4QMuDZjNghu/00GPs2ZkQh\r\n37JPPGENifgcW29eoEUpc12JDk5Gw3RwwM1huEmmq1cc4SEkg17Lj63CYrvp\r\nEXTZVcXhDXK+dsLOiL4y4kBiZ9LfY4VI9W4jMPBF46PuY7Y+HM1SwYjnSkJ6\r\n5afT0RGkc10CjFiFUWuDvzdlCDiUZRAc4TdcTZxEFHdSRX9zZYP4oVGl58iR\r\nJhrcBj3c/WIAQ6z5J8Dr6Dp6l2SD1p1fomnc7deDkEVLxa3wLGfslJjvIhLp\r\ncdFJVunLjCXiUA/x7doEnw6UMH3dbGFNt2GM7UuImtnN+r2aJrBXkmbv7o4d\r\n7xA8RQon4bBJLIPWb1rWQ5QHZ0bEhquNgjNQsrcjvzu1Prew/Q+Xw7UhuZdf\r\ngwigdVJhw7xZ7d8BSnFN6LGbWALxSE2dxQ96MFf76B6dNEWGMHL8GNbMBW/k\r\ni+KvjdilR8U5jL5pcHKAiqCjUp/h5FbYDqU1+MpE8QFQFku5CjSw/NobmIQx\r\nHRftfIALjiFjmEZVGBfPZQBoqSoHlrEorO7i3R9rp48mIndrc6g556zkN+pB\r\n6tGyP6dwk4L6ufJ+Pv1EyBynqglbGeaKw9WsslTH/Tg3LIOuCMjzplYScU2v\r\n1x/ng6adTeR4dh8911wQqb4VZHDL28qng9Q=\r\n=kekF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"a35987690c7726ed612cc9acf783226ab0912fbf","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.0/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0_1650532440542_0.26488486415674384","host":"s3://npm-registry-packages"}},"1.0.1-beta.0":{"name":"@alifd/layout","version":"1.0.1-beta.0","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.1-beta.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://unpkg.com/@alifd/layout@1.0.1-beta.0/build/index.html","dist":{"shasum":"b9ba3cc7ddfc7484dabe62384224e2b04edf322c","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.0.tgz","fileCount":146,"integrity":"sha512-pBNrZ3a8ZYs3xZuPA/p0H2S+NCjxOpZYO11sRc89pVx3SFL2Zcgrs3cFptxW96QbXazG36lFHq9+e2JbDoDumg==","signatures":[{"sig":"MEYCIQCG23mgKB05Ptm+PDcdH0VRBp3U7j8LUVaEqe6lRq6mBAIhAIgyYlc9J9n6QiUSY//K6JeiroM+mZDaMfP5b3Mb7BSW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4718216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYUeqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovWxAAmJJEVR7K2aAf49nQDZtXm5vKqJTGRNpG69J8cOjmzxa+Bs72\r\naJa4Sjn6eJtc1J+TG8hVLPtOpZvh7Ujfqpfp6dRPQbR1JjeNuECBIAKaHl+/\r\ndMYZvklRFnmXWS2qABBlgDyHVmL3Jt972pjbABhQSnhTmiJLyWrNhVWPvfFO\r\nPlRAznSE0mv6s8RqfBnAWEcuhwkVfcqaOjoODJzZ63fsdLpRk0T6rMYVyJP9\r\n3N2D7ywmIXrcnQeffq5WunIGiQPUFRlasWxnVouF0wQx2+2bMTzsjgBfw3We\r\npuOC7xC6LyZC7bWhsyLTvgLQCyscnmBKQjtsilH2GkqTcGUszlysg5KsD0/d\r\nUWrAmFLiyMzV+BUeGXe2ONX2fkVPJBnMJcMoPYtO0002WTAxghj1D+tSyrJR\r\nzLvN/1i7FKR0pY9aMDvepVt+ppbFIRXbhAy4EcKMa8zclNePgx6Fr4joFth3\r\n4BEQ4tQHe6e7TBYXuarpnajmOUHzcoX1fk0wyyNP4xlJvjo9ymyoGf26rIvQ\r\nO5F5YIqt/S5Q6k490WlkUW+KcgyoC4mN9s3+RMZi1bZxI9clbpLUSrboJdnZ\r\nLO/Kakp3fBosRyxCOwumHdDpUACm97GPGy28sR8iUdum7sNUtcMgvi7b6e+Q\r\nK9AnRoHgOPwItsRvkvI12U6GqQXhZsjj2Y4=\r\n=7tGZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n初衷：愿布局不需写 css 样式\n定位：页面内容区的布局解决方案\n\nhttps://fusion.design/help.html/uzn1pu\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\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 | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | ------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区域（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"5aac40178926c5f29b76c1c5ad523c56c7a4ef7e","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.0/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.0_1650542505639_0.9779005253968778","host":"s3://npm-registry-packages"}},"1.0.1-beta.1":{"name":"@alifd/layout","version":"1.0.1-beta.1","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.1-beta.1/build/index.html","dist":{"shasum":"dd80e02fb05f915acc7409a60778061047594553","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.1.tgz","fileCount":146,"integrity":"sha512-B3y5t1ckdGyaarFJtB5IXpeeLdqepIe4QOloluWGU2sqBEHkEr0t3gIda1wecTLDef054QRvtfNCp4eQbF9+JA==","signatures":[{"sig":"MEUCIErJK8rkRcr0h8iD8RUOv9s/GjEQTsp16wk1Sj9u0hW8AiEA2hY9wnEGT9EojwZ228Kt0LLHARGcBXQ0GQ/JbnLfasQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4718317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYVn/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5MQ//UGx2gmVoRSkblWF7zG/Y8VONDcjJS1095RV36oAtFvA7/5mk\r\n78LGVyynNBbthcIO7G/V/kSjkE3mc2d7Kg51cPTLQf1MT14JH89a3XlzSQhF\r\nwx3lioka3GgYeErnONBa9BVyVsO7ec9jaj2cqxH9AJNN/35wlwvyL+v3TQ96\r\nNfXXY0+7ZjZqVAoa6LNANmtF3wbTxBsVpOu7RZ0zRRD8j6J24NClVBY6o34w\r\nzjnmc2WvQJ0PWsSUBkU5afj/QQ2rrPMui7vV/EevLHvmECz/b+JjZxvyW6AB\r\nHyDyaTzXXqFowOOIJtZnN8QB7r1wrWFCx4EtBegThfb94emII79Z5b7B5xOU\r\n/F0TFkSg+c2euSbht//xO6DJyFLORYIQIzUr3fgmZG3kzA4RJKwl+Mp5e26Q\r\n3o5jwS34AKjVMDo48niDQdLfsp7+5HrcQPr7L7KnLDDDA4C0p3PUgGxrwb2+\r\ngoqqsjFL19XyPX18Ot7B5pkgGPfU7HmoMNGrXIa9LNKujT7RWpGYyTYsqkHP\r\nTDZhcbUMGab5x3XuV55qiwGH9wzEVy0vj4b2SV0YF04FydW/sZEQJSWi9LSG\r\nDP4GYe6In5upTKbWUfBIH9NdNTnX/g6hxCDbVXY5gTDodKQFL0OajUDfSWVo\r\n4mbq9408DmQhBC3WE9PslzcDiVq6M8MNuQY=\r\n=F8x3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n初衷：愿布局不需写 css 样式\n定位：页面内容区的布局解决方案\n\nhttps://fusion.design/help.html/uzn1pu\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\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 | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | ------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区域（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"4ca657f3b9b4ea7de4400c07d6425c27628b5a8b","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.1_1650547198916_0.3637910290986277","host":"s3://npm-registry-packages"}},"1.0.1-beta.2":{"name":"@alifd/layout","version":"1.0.1-beta.2","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.1-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://unpkg.com/@alifd/layout@1.0.1-beta.2/build/index.html","dist":{"shasum":"fabf0e1d48a1d3baf17a7e4e6cc18c5131e79953","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.2.tgz","fileCount":145,"integrity":"sha512-dFbUe59WQIj/IvuIhSSh7fvEf2pSZCyoOchp7U39igtmAbhm6BtiIivmhncXXRbIvnmHjTdzKj367RI35wPJXg==","signatures":[{"sig":"MEQCIB8tgo5Wx2r/9NS6rJwnkDV8wB9Z5OtAm4X3vTm8v9eAAiATss73rHVxL6Gh6TseaA2xISJEn3g0AwhNkWz8YS4/Dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4582749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYmvJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYhw//aMvQkoZdFMB2P8etV3vhWFo+0BtoqoD0n5nXEOlL7QgInVOk\r\nM9wFjttADD0DX1e2W/y1p8+6Cmmz0sznd/8aJZw9wNdwv4TdeQ/nCgwvOqzi\r\nIjohU1SSeQC6lBmxLaI6q1k9na1c2AqtKEliXL3su9XDameOOZj9WTdWhdLI\r\n99o9ND+QQnyeCyDhcBOidRLRew/ghBJ4g+d0GjgCxYnV+Ea23Q0ybrtDee+g\r\n7jH1+KssBrU48OoEfgUBZxAQek66/5tc7bF4L1sVphmtftZakcHrlUuYQ++s\r\neSYzykVC7Z5R7fjSBkeMQ/5kgJtoCTtRvBoTTxZkS8k/aSX9luyrlz+bH/ke\r\nBgbrZnl1g5RR1Xxtuo7HW+zsDWrrFoYAuUfLl0x30UpILhGTCrA2xLDmwvaW\r\nGppYhlps83rFT774OHrs234OP0INDFfSvjiPyrKki33oK0QVEt04qB/CAtGp\r\nxY9EVdGKmOhTo5AnwX6UQnW9ZnwVBH/JDKXgzLQq1rHzdTAhzoVGssEOFNr3\r\nmWzw+f33aJHhJYA9md3CmHQDG92cejpudw0rPAe5w8F+HTyyCrGOMAkveeBh\r\nB3hxmBu3F2/l1nztACMk+INPGTkWkbutY4BY3CZlEanSss8vj6kTdsbJEKBr\r\nJb8WZ4nqpzbUs4YnM68DPL60BywaVGikbMQ=\r\n=n61C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n初衷：愿布局不需写 css 样式\n定位：页面内容区的布局解决方案\n\nhttps://fusion.design/help.html/uzn1pu\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\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 | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | ------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区域（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"3158118ab53bab1a2cf10e5a602ff12538df26c8","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.2/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.2_1650617289422_0.8468450064985744","host":"s3://npm-registry-packages"}},"1.0.1-beta.3":{"name":"@alifd/layout","version":"1.0.1-beta.3","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.1-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://unpkg.com/@alifd/layout@1.0.1-beta.3/build/index.html","dist":{"shasum":"f2ec7a1f9ea0b8a3db1f6c5dbb35d2b336970806","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.3.tgz","fileCount":145,"integrity":"sha512-5x7T1eX4qYhlFQG1Brc2rqpXYQOJEtfOmnQ8H4u1b/TcEXYATFW3oS/NTVPyWMni5PECxndnjo2vSQaWZoeQzA==","signatures":[{"sig":"MEYCIQCBGHvW2gKQBiL98LVZjywBhSem6Pt6kCbtYxcN9CVEYwIhAJ2dJFIMszlfaKNmNRbRf/F1MGFBNbTGWgUblSRAHtdI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4582829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZMDAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8rQ//Tv3rWbpd2aRd7sy4nluMQAR06GDesjVyCj1XxleY8cfjTrVx\r\nfpyAeZ+EJkK4tMUCXTlSYnvtEgJ3KcYYT6KgdflSHMZGBNxpvrxo2Ic7Bzt6\r\nJK1JHS54ExShu+xLMPCGWr7RIfeM4xL+afQdl7CUqcOONS9VNL+cbzelVrrP\r\nqmBOsyBgKpXm69hTVIXHTD2zTkM++0vZafu0UUUHpB7IgjzbtBwBn/Z+0+tn\r\noGDW4yIEKScCGZgOrIdQM3umliTAN0xe1pZyyTHxksn/3bugm0i3nq2Yzi4b\r\ntTLOgvhmCHzFEj/6chi2f5yDl8keO/BOXqCSCLIjGPTG4dUpQ+mNvTdXpjP2\r\nhlKg7YeSYHphyjgTdVBTikhdloYL5SdUcOOSwsSvywwZ+8m1TiDlb0oi86Ym\r\npo3OHHtDFS8ruykiV+FV3SKHfvrRzdwRdcplDtvs/bcBP0FBbovGb2acHON9\r\n16VLgrMJfkSf98ia8G1OXrEiAO1gsPQsHBXdbbyCqv2bQdQw1BGfuQRQZl/H\r\n5N4oDKqaOuc3Ou4R2KZDb9o4hka772yh2SvVTMpW7rKO77FbWyfJrGh4mqcq\r\nZHZDhJsj98OX3r3BrHFIC1q/eLKAToHny7cijpDaCT8zymVFz8vRhfUVl1+D\r\ne/IEpRBdds/2LJUryg0uCb0QnQGC5h5XpTw=\r\n=ldML\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"4533364e996b49dd09c18e224d4da7f5f79e8f34","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.3/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.3_1650770111931_0.6928803154095999","host":"s3://npm-registry-packages"}},"1.0.1-beta.4":{"name":"@alifd/layout","version":"1.0.1-beta.4","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.1-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://unpkg.com/@alifd/layout@1.0.1-beta.4/build/index.html","dist":{"shasum":"f9b930e07f7691b906d59266d579afa339c3bdd7","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.4.tgz","fileCount":145,"integrity":"sha512-FSUny6EuAOnrkzd+4T0CAVafjU8/KnVNV7DOqbsLJHE82tohMoDQesO4DRpimJsI30ViyADUArRhMAQKGq821A==","signatures":[{"sig":"MEYCIQDBzNFY1k9sqG19J5G+UOzYCFB+Ti5fIIniB3Yp7lHxCgIhAPobLYBLV1jRfEgrf+ZzKXvI/QSjGDy1vTJC02fkMOYT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4583068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZmzBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfsw//ePXZnXpHeE2u+agFTDP99tW9E6DXSppwzJnF2WkhcCQZ1l4H\r\nQ9HOD/2pqImy5lLBl+7ktmg38DrU2Pk846qtv3s9/oCSPTbg8rmjI/safRSm\r\nN+qcwmo/OZL1NSwQE1gM8rolyPES6+tGtAi2or+Ky0F4gxLfZRd6GPT1638L\r\nLCJbkmxgLSjt65P7iRDv993CwEj6pt58OpYHoGL5a2stULl8G6oIn5Ki25qN\r\nCKhxpxCEnfAgOfpT2JVg0ay3dyR6mANiUz4a2N0p4CLuhU7gVN5I/H1cNtap\r\n+CLnzq7QobZ5RKpU7y7U8nkNQm3R6QKK3nfFbHeyjHwIQRFGLhpYnfcoDx8q\r\nic8eBZ6m/s46hAOoAc8cMl1URuLwD+nCXaBRtETBSRMl488wyarwr/IUjHpr\r\n2DBdjiQGEngOcLPlz0C/EtlBs37+UsU48s07Dp1n42PRQuqSfFtS5o98EqQd\r\n9ecy+rBjzkpVa94X4Cyrd6AmJwEIwsE4X8Sjb1ca1YSHQf82TjDHo4JSH+96\r\nI5yF1cpRzkGThWLkX8DFSL8HIhjHRydEcshu+3OjC0nT0AHZ3gJP4NH3yGFf\r\nrBmoxnQb4fTQM/O0DgfslnCQooAD5E/k+eXfn3rsZUNWbD458vVBvGv3lRUp\r\nwVy+EPa4mTS5eh5m5kb5lzSsHwnJri4VdEQ=\r\n=evmf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"b116acd6f0aafd0bdcbf986496b574a3febc1818","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.4/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.4_1650879681452_0.772089371834779","host":"s3://npm-registry-packages"}},"1.0.1-beta.5":{"name":"@alifd/layout","version":"1.0.1-beta.5","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.1-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://unpkg.com/@alifd/layout@1.0.1-beta.5/build/index.html","dist":{"shasum":"66b6ce38ed8be1a3b85336d9a0eb6ef861923ffe","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.5.tgz","fileCount":145,"integrity":"sha512-GG4WO9Votnofvq3qEoMemXKFNcImYO3PpwdS8UQK488uWACl/BcF70NSQfB7ij03ZTDQKBz1l+O9s7JwJXwoAQ==","signatures":[{"sig":"MEQCIEPGVcmZI7tauvXj9nY/4j2RIQM/3+w+trppOTGmFOJ2AiAJtH0OGuVdZcp7j3KlThdh9/61kd/04bKe3KBC9v1vQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4583068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZoYwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTxRAAgUHS/df3+BoF0mkoRBegiXNjXLExfPzfRs9AANyWcWrzT6w4\r\nthixXFk9rfbX/hSwAus2FbEER8a09lPl83lfRE0Wcs386LGfKqhXGE52d5tc\r\nHpt83cDtIxQo5n7NOjbV+3oUI11qRTBGonGZQWWBUt/dpqzfYIqVHqE3SYtO\r\nuH6sTz12g9tCNPfzYBSF2XWIXIy/xHhQIooE/cfBfdXeE9BYkYQbzk63Jt85\r\nSOYpeXQD22T87s3sg7tBUc+6zDtFv+HM3Z4/0Ly7BOkx33YU0UeNrsr0xg0m\r\nyHHJou//qxSG1zRuSgrzB2n1FI9CFknVAHcI6HVQHu+zy5Xb90GxeWEA4o5h\r\nE1mmHO4bmsU6ljR81ljCoR4Hxcx5eF4VuTT3Kw5U8gB5EQA/qzAluUXnkBbk\r\n7w/9NGREheM54lqFq4vrmBIU1qcU1mo75LEjz0pjtKz8Ss4PgzkbNY0nD6I7\r\nijeLhRUyHeXFDh0u4nI5fggkd1xBknkNehnMhRNT9Y9xZRRDPnPR+YFxWlzi\r\ncSSlr66wKJEAGirIs2XTLeNFkEdyUiGFUwjV96lyijMMm0BcraX+xSfa54Y1\r\n5DZlAMjlypJ9RSxnZ9eBjllzjO6b9Cg7AJyhG1+BgO0DDJov4rZFddnWGdXk\r\nW/aa5S2uT2QAlaRRPSVJrE9xfXUC+rURy6A=\r\n=6TJB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"d2faceecc0235e403d626c123987df9be9792bd3","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.5/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.5_1650886192465_0.9712762811369593","host":"s3://npm-registry-packages"}},"1.0.1-beta.6":{"name":"@alifd/layout","version":"1.0.1-beta.6","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.1-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://unpkg.com/@alifd/layout@1.0.1-beta.6/build/index.html","dist":{"shasum":"c8e19977c1ee20efd664b82b69d1427203ab9bda","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.6.tgz","fileCount":145,"integrity":"sha512-abnGEgD1gfJ0DwE5+XmOd4Rx5gIEDVWXuVjN1aYp1rzeGnLkcuEInQR8P5zExKCMTtytB7xnz4b/u3gDKuD+NA==","signatures":[{"sig":"MEQCIBK2Ee+idvPfdLBo7ajQRFLyIUscbbsRMXnwcS0FOUMXAiBLEMHRzY4tPcqdLqyP4q7K1+8AQNOkY3PGuxOjj4AtlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4583068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ0TPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvcA//T3MlmK+adgLw35S9VhQ7vE+KSCAchkr++p1q6jcm4s56A9ia\r\nUhyHk63qStmHEOui3KQqvZvV905AfqUnAVEKfi00Hr8tnL6/5LTIpR5aLaji\r\n6osFh7Jc5FUZbwTWCiBMDSFMvQEEVXj4Qna61jYBq4PV7NxQZ6cEiJSw0KC0\r\n1lwTVh3HGSvVfplZ3JHvCLMZEAitqEVsfwgDSoJhAzk1zPV9ZRTRzkw0Jadt\r\nlrSwihBLs4SUq4QEiODeYoF0/52QBr0DOsawU4mKrQfUeeTOu020pQDRgQ05\r\nKmpXBXgufl+DC5rvsH61pRJLu/6UoQQJvIHqGyBikk7yxHSwsMkE05aT4F6e\r\nlAjQduyYIYLS8lLWZWV6PdXjRvglGULSnRmY82P5H8D7bV1m+O/bjGdoAHNe\r\nUhw9f/SjqIPWogNVdQ4mxfvsYCthfMdsxRnGqHg94k9oSwFS6lwY8/akC5WC\r\nSFum89S/h0f9IS8qADffhnptYTHwbuNM5oP75oTUNL7hRJ1VXzBde4YOBxP8\r\nTLXQStKDSUdDsvEvvxcN00ie9NEoxfcpHKYCal9TI5MF9vArR/c9gkJ2o46Z\r\nwqpXpwsGlynCz+G8vakTL+Afp+hjqmw15oRg36KCSCZnJgmTh8kQxpfEiYxH\r\nMmebba6e0gLW1jCnNzM1f6pHLnLSh2Eg7rY=\r\n=Bpgo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"a491789189ec7c412f2e50b0cae073d7ebc6f820","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.6/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.6_1650934991679_0.22154656187592225","host":"s3://npm-registry-packages"}},"1.0.1-beta.7":{"name":"@alifd/layout","version":"1.0.1-beta.7","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.1-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://unpkg.com/@alifd/layout@1.0.1-beta.7/build/index.html","dist":{"shasum":"7863204b1371d79b8ac8d8ef4f47e54184bc0786","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.7.tgz","fileCount":146,"integrity":"sha512-lq9jWFBgkOXsnC7vMKZigZMNiuPah35xGh16wotr2PePzxrjWycVw7bVpoaCuJhIi6kJ3N4WalgCe1nzL5ETAQ==","signatures":[{"sig":"MEUCIFxKx8iVt6kIB42b3LE29bqdPVWkpdlVampBvi2SRqNBAiEAtKXX1fuuHxVEyAgJwy7WuIQ54tqRHzQv6+9GbLguWdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4604645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaRrxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOcRAAimrS3TrXEQQqrB6KHKfQW3wMx7CYkcFgL7AYLxkymIl0lFBr\r\nfUiftSsNrIYMC5swR334CApoa5UyBM1b/AVEFRJaTzh9PBsdkkp1bc9buv+w\r\n1wmCLi3jaCyJOJAQEaQ6X+Ipcomkmp647Eeb9IJlOg8gt5dv4XJGOPfNteo6\r\nxE4YpaOscJxHuH8bFgYvj9sWljiMOxGZIR4Ku71bVlOSZcosV65FGoioebHu\r\nbgtvTuc5qjnFWxgJMrokXRWaxLcxKofwpv7pOFhmCqCrxXs6F0cVPc6IX4kB\r\nstgFnqnqx+NIULCWWer9IGAJvblaOZJj0T7qMzjo+bOGSWTYKQCLttKAiX3n\r\n39d4V0tkYRpMXjnoO5rs/5y7gora14fys2sVcXwS55HRGooKMH/kzY2AsdHt\r\nPIZCyVw/9zyYGXGB+mNg52z4gPuWsz5DTN0QdLhFqZNTgp04Yi7uMOV3eer2\r\n/IwIYh5JFPm1pyFxG4gcZsQy63mhmG/SL5vJX3UVb9fDGaHOQUseczgMSLsK\r\ndXf8kfryq+TmPxWE2hNp5/K8VQgs+gXDhj+/jQovii4TYrunC0JVO/orLpxV\r\nFMjqasj3Cdna8XJgKcUhx9E8eNttIpoWDR6YAFegkeX9khNgv6yerrXVuP2Q\r\nzR21VOpYsh3mdd/iH1QdPfAytOJXSTZfN/A=\r\n=Qoer\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"f3640a158dc9f1b1291043dc383616ffb8d43f9e","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.7/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.7_1651055345262_0.20684142399542127","host":"s3://npm-registry-packages"}},"1.0.1-beta.8":{"name":"@alifd/layout","version":"1.0.1-beta.8","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.1-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://unpkg.com/@alifd/layout@1.0.1-beta.8/build/index.html","dist":{"shasum":"fc680688cd9c1676ad58809b787acde47ff7dfd6","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.8.tgz","fileCount":147,"integrity":"sha512-Qph5AJGWFm4cs0BGO+2X7RjbxSzDk4fN/ocvZo4q5mu9JpQyjwOzK4eR4aKtXYVukbKrdhC6EghGlMAoVAwPyQ==","signatures":[{"sig":"MEQCIDGLiKdjoQosw8ZZbwI2jfG04FFPRShdwGwVrCcyR5OTAiBeT74JlfMbooqtXoWG0uLUla1jnG3uqX9Z2N7oVaQOQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4706920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia0m6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Lw/8DRw3SgK1KyvTUkdueW0gNqd9UEBWJ//ZyVUWfU8W8q89k9H4\r\no0l8n5I3H0wAICss6IdPubu3348FxQzshFY8gWWS7QEffhGgILi9/i+3gDbp\r\nAZ8pwuIe3loz6o2tQVyz/zO+rEV51+LYcQAx0p0ntqUyGpP/U4cnB3i9jMT1\r\nVx7uX9C7GQKU6U2JdC3bpCGTftFmglThDlzppaIFSX5z6wuzMfFGZlJUCiSM\r\nmI6ufGAenYFuPnzJr/IG+i5UYgP5jpRfWbfFzN1mrlUoviECb2kVXUbMta5a\r\nl/zr1adZgJ1tOPnpmqF+NzzJa1HlIoQMhWTZrHEl6jwTHqXx1OFLNmtH60XK\r\n8jdg80IyzxazOyFe0vMWxvNfUGU4hP75K5pHUoArmoGUdT8yJh0/OIAkxJQt\r\ntPef3blipNKUv9UeWRtbVUczapey9hB0VrtKKEOfocugEFR8uIxdCjtvnGfp\r\n6JrZsXmle7CWRg5RKvJG6siNZDj8L1m0A61bYAKxBvTDT1BYsWp/oJ/syrPr\r\nQjaEUHQPm/sKOxrFuhPmGLJzI7Xo5EqRuQyr1Cd4WQD//epkQKifM3U6ulnv\r\nqOguAho2L4TvZKcTF01jXnWrcGNtlfeE0hGLwGOkh8aEO1HguAIIkQ30B/4K\r\npU9rRjxrOwoEq6FjJmOFzI+s/oXslxkjVzE=\r\n=aeQu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"aa060b6420777af26ed97baa4a0afd1b8470ff8e","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.8/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.8_1651198394599_0.5521613329930215","host":"s3://npm-registry-packages"}},"1.0.1-beta.9":{"name":"@alifd/layout","version":"1.0.1-beta.9","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.1-beta.9","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://unpkg.com/@alifd/layout@1.0.1-beta.9/build/index.html","dist":{"shasum":"f10497fe8072ed652c0f362e6ab7967c04e3c88f","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1-beta.9.tgz","fileCount":155,"integrity":"sha512-txBTzk6P1WU75v0UPIthl9QWUDeC0/4y2g06Gpra0egDC4HCz0dxuyUtYAnME0XO8cn7kFxWGEXpvdoj1Tgodg==","signatures":[{"sig":"MEUCIGot+9chvLHfs1bnwhIqyiij92RC6m4uHWei50RXmIKWAiEAr7Kv7J0cVT0KcCorVzahvb/Q+uaYFDvvpVhvRihZPF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5123998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidnGkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrncA//VV6szNkGVDffbzYGSLFABKBt/C9M0qklfxq3Cd25YKv20eo1\r\nhDf+AHz65954gD3DKUNuBdLkUOp/K35YZTyYniOOvM9UTZRc3VXKHh0OuHJX\r\nWY/Bl5i26H1YMFLwJeUDRqYagrazm0940iAmuzuZ76VcDPeO/+dW/Tud6eSG\r\nrupmjboiqTAds4gi6fE6UsX7o1WxsQw3843V2Z+qbBUgGviZyA0FSAoWYBBh\r\nvD+AuCbzlA9NIvSnXXtXlE4EUDVQrsrphYZwufS4zstqROndi6O9tK0Dfhr/\r\nPj3GrWbdMDEaBjsj0seTIc1H4zeuob1vBVgzRlXRXNMJD2a3UNSUsL9wPoOu\r\nLlMDMsP2beMjEpB6aTWQeWgRTzJxdPole4SX4b3LApc9avUIZ+pHC1AX4I/E\r\nwNrhQ4iYlRpBgGYXNWI5aTruuwR6zaFcP9RrbXZU8UI7d46eKaXX+CTDpcGO\r\n+ZXZUoQtejstXlsfBPmp80+bpB93+RlqvGQaqPRGZUR4vAfL6QgSn1O4pmLX\r\n8AwOPMHeQR48B+8JG+D9PVm9yLqnQoFYodMlmoPQsBJYwlnwj3NLJWxbNG57\r\nWbmqEIvoXle4C40zSW2vjcEoQixorDwt/Lh1ESW4guho7EnAfuAnTYsY/yji\r\nK+SOrCTrjxAf4+6aA4hOWiNCCGR4CNlzZ7Y=\r\n=cEkK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"8eb7a089c8ffd5671d3c9849c418adbc3dd3df92","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1-beta.9/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1-beta.9_1651929508022_0.7854443810148581","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@alifd/layout","version":"1.0.1","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.1/build/index.html","dist":{"shasum":"527f1cd5a5eb9ba62960bfe5e65087000ecefede","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.1.tgz","fileCount":155,"integrity":"sha512-Am571jPpNcFiDVAErmZvr9Es+3DpqO/pNgy/jHd8OeRndxLWUHVVkiqdVGOsoSt1sSynSimDMueze18ctipa8A==","signatures":[{"sig":"MEUCIA6BtcBmmDnr9Rb9YsRaJzNAdcN7x/YlHirRUj4UrRJGAiEAzUVLp5kI3PwBDMxbg75pyomCNnY2TaYWu4reVfiPCW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5123829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifNc2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHyw/9GzQ/F5b2HxEYW0QL0zMboSYvCX8uJj41/AoqxxVWJXUnAYEU\r\n4Q/M+ivxitY2+c+d653cBiWavXesf1dXJwqsEVZlLsGxNJQ+3PqLJsURC6+C\r\nPQCcEH5KVm77UCFFnoOoZq0ybnMweOTDcmbTlqD5P+Yzwazq0t0O2+/bhomS\r\nhzHwsgOACNQvUhHL7lA8BIZHpBqL8tajDzragbf7GlohchhX9n7qxChfEt0p\r\nQ44JS49R9SnTQK/DQMGNE9zCClZt2W5lHdweaz2lNcJcH1uD3Wnk4UreI37n\r\n3+B9cUCNbzXcJ/X5n0YYvS7lyhpAZPy4WB4tRx6spwtmRwgCn90Ll5QmQxNy\r\n2/4DZ75ecqoiEg+Jk/se7ShqwOAZzYTdLG39wHjkHLWtH5YGOhCXVfFwIkwt\r\nt8KlLgDo/biPGNf1gA4yWAwlr9qL5axVlC18QBABunFxc81o8VXbWa8W5QBL\r\nyAXhCvrdpz1disxo0/MbThdRmIPvZrHRWYPUkrgmWwgOEiXip61BQOch6Yjc\r\n4XLjPH2Wh0YdgZkgYGx8mZfvjn37prqPglVR5cAPhi5DZ6XSrmL+XHZDJcrs\r\nbcqF284Q5j+toKP0uwx+VPbLHPKJ3zrkYS5oyu93SDwFOk8oX3pYe/pGggwI\r\nDgFQEhMLUpnk3hNEqbIfJfUqIFh46zJ4Fhs=\r\n=RX1R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"8eb7a089c8ffd5671d3c9849c418adbc3dd3df92","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.1/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1_1652348726696_0.1994296262193782","host":"s3://npm-registry-packages"}},"1.0.2-beta.1":{"name":"@alifd/layout","version":"1.0.2-beta.1","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.2-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://unpkg.com/@alifd/layout@1.0.2-beta.1/build/index.html","dist":{"shasum":"0ac7e8c4c6b09fd7b6df6ca031df37d972c3b25e","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.2-beta.1.tgz","fileCount":155,"integrity":"sha512-PSBqPraWLN9KaE6+C7Sm0W5e5VFFJZKLFpNpBo43o91GjnZ5pbTR05mJTp38lJ0C15alSuxa6//B7+cw5D6d0w==","signatures":[{"sig":"MEYCIQDnOQ3vZw4FVoPbBWtLbkbuaA2MT38ollxsiRknySx5zAIhAITrEcx6XWQZXt2jsurahPdebEh7NHXf8WPoXmEel+nD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5113214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigfzKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrY3g/8CjoRQEcJXraKRSgh34I3tZ1/6dNSIdwWbPW7hMmoMwtsl9+b\r\nLncoPCqda0CNpxUOEfjrwlF1NWvAW0CGoWhnazJWL3dhR6kTPnLoAfnrl//6\r\nPJEThT9ZGcI4Y/NOdYuI0JZgjF+Pgvm30N5uSAO6YlEGrqT+Ng2DELgSRE6C\r\nza7Roa1ZW/ILuAlBh7C5mm4IruPubkU6C+VmiVYSMRjrmZ6unWqGzlM4I5k2\r\nNCu9jgMMHqDizse/xk36bxADxf8HKfOQ86SuSZxgtQzuE9gNZWAn9sSF7Dp4\r\nkTq4C+YJfTVfnOEprnGyMhgS2v1Uft6zcYxnVDTO9DMPIUD3W6rJppLG46rY\r\njwk3jOt8TxeMoum8wyOwe7wSCQwu7DRoEQQqsxitBKSmjq8x9tRwzFtEAFhV\r\nkXF+Mtxm/4GWj7N5XUjJzJYtEWIo7LCHikazTrYqlpKhajqDKr4+i+LyG1ml\r\nccstxcqhdLjH1vMEi2ruS7rKpPcCKkc4f6ID1XoS7vK9Xj1UR5Wuea3ZeNby\r\nLK67a6ylmW2nJqEyc8gkNPP2AZIeOv2T8XJIrN3OChy2UhW5+V2WubROpSL6\r\nG7AJ0Pf76b6yr/sBcDx1tdZqXm//Um+t1BuoqmNHUaVlsDFDvzVl718J886v\r\nTi3Cm53thxYWiLxXyazfrX7gdogX9a6Q694=\r\n=O5Sx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n初衷：愿布局不需写 css 样式\n定位：页面内容区的布局解决方案\n\nhttps://yuque.antfin-inc.com/fusion-design-system/scbzfw/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"e4c04c91c9cefc6be33077c5f2d1d9011944e52d","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.2-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.2-beta.1_1652686026489_0.8487373625688592","host":"s3://npm-registry-packages"}},"1.0.2-beta.2":{"name":"@alifd/layout","version":"1.0.2-beta.2","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.2-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://unpkg.com/@alifd/layout@1.0.2-beta.2/build/index.html","dist":{"shasum":"d6b36eed4beab69ba128d67518e437b671aa748c","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.2-beta.2.tgz","fileCount":155,"integrity":"sha512-OD130TW1Xqz8LR9ntPrgZEuVRTfA/eg3IBC1AEhMGbWDGVxoUAzC5lzi+xfGdIyTiNKxvoVawxtiLZCyW0dMvw==","signatures":[{"sig":"MEUCIFsu/ihMtEuyvxj2/1PoFsxFMaoNwGvNNeXa09uQsZ1FAiEAg1SiuuExos4cz+FY8xXiXuO+/PBi0GgOSG/PMwl6GtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5123576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiggFCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqrA/+NcerplrXl4V0VYjuqP1FBWoDBIguIc7340hWFvsFCcY8bwdA\r\ny2eZ8MAMqmkyjO6Ex0WgTFQEPsjy+8W/VcmlwzYMBmxO2gbZf89hAefJ1U7w\r\ndGhE87Vb/gmZ+jT7/vOfGgjkW3ZMRlPtcFkPKY2S59tfLsknH7ElclkfOhXn\r\npWj82YBDBMFtshMSInXu/Ms05DPlDy1SGJryZQ2iaOiAIPuwws6a7gzqAJy2\r\nbekS6Vvmo3zXad1ZtoHA2ryYvQMHs4wSBzviyX2O36Zy1Ga+CESRKm+D3R6K\r\nut4gMDaJ1QR5PN3IZu2lJCFINKFPsV15xdqxjN0oqNT8g9LYArkhhj/z39k/\r\npQFNiPRPoSjG3o1ziEaAMbCXmfatrE6UnFB1FHTg5eFgRJpiN5wWrCGwTdl8\r\nx/mO98EsyV9nJBPcWpx8tbE0+xP2seeVuUfS5g/R31NRBtbIGcdZmhxltjLK\r\nvCd4bWBRAhX4TrJFZYME6FsQgfoJiVoD0krhaPrB6YhIVZseYV512hcS69+a\r\nk4tkjzChADRqpms5kuTY3+le3UMZ+AF/xqcl2+a5v/ZpokbuXY0GKC3cC2K0\r\nMCHN4pUHW5pHjZs84TL//iMuA1NRlggoH6eipSf/z7VJCVGRUYvU16zr82B8\r\nAyVe08ejPzfCOgH5cW10OwxmO/rqwTdLvok=\r\n=sZNe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://yuque.antfin-inc.com/fusion-design-system/scbzfw/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"ed202ff3b35f6a52c95acccec7cef1ff81a7be08","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.2-beta.2/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.2-beta.2_1652687170265_0.9952144285629179","host":"s3://npm-registry-packages"}},"1.0.2-beta.3":{"name":"@alifd/layout","version":"1.0.2-beta.3","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.2-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://unpkg.com/@alifd/layout@1.0.2-beta.3/build/index.html","dist":{"shasum":"7ad1f535f6628e83484f3b3fd45ca7ddeb622bb3","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.2-beta.3.tgz","fileCount":155,"integrity":"sha512-hoI0ZnSXPPkzjOqVCMNPoMm+VXGtl6wvqRwEemxqy3yeYSbQw94mPXJQX7gcRen07r6K1XqvmdRRF67KvxNx2g==","signatures":[{"sig":"MEQCIAqMDL19jUDT7tUtHCW8olFkNkK+r4tzuCDS13ASOflRAiBwkfPMeC6ookMsVwDwczvp6TiiwCx0cA3HXSHhcPqPVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5123542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiggddACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6nw//eieHT/Ct3SHy75qHn4KW5vrmWOIEBcwc1W9wN/1s0NbjQnMp\r\nwrUo27gNoa+3TvdmQIzSUls77tyi0mDKDFY8+VCT9bt3ORAVkXaIt0xMGa66\r\nCBd2g4GJb0i8TM4zC3UAmw5vewY6hnNLOTefrAWP5inC4UVlNuDOVyqklFd4\r\ne0FxoUK6Eho19sbtVK3zG7Ei/NHuhWD9vjTm6krx8yrtGcumEH52fpxBVv76\r\n0Rc+bSXQqPt7nHZ4qwe37j+aWuBMlt9keVkFiHguA0yQTwkimoNlaGurh3Az\r\nYm9g7/PcYD6XQFN5/lFpz5A3yY2JMS/S6YJOQTtlq4imTAKJopYhuLjHMdxf\r\nGx+C6kHSs97iMn2/IzWlig496t1ytgKSqeLphQfHFE7ln5XvgTCZP7lSwdil\r\n0Q/OGJ7mJ11RZ0Z8KFnA57jISp3qV+ED1LpiV82U97Mf3GjOhMC+LfHL4Ot0\r\nL4iSQjPEe9SYUnHlcsGJOJDVc1wllklt8sY/4lGzaydiO8+26EmxuGASpbiI\r\nkpdf0Fw1uBBBEDNcR2OMo/jEBpdsxSxdzW9gALdeNUARnYzniwW6Eltbx7nL\r\nmWpAowskMsZMR3clMK9TA0rpC9Bs3rBcr+EfVuP2vIchQJqbETlEiulqEZIB\r\n9Lo/bbk90KGbKBQPI7rHv+TAjv76TDZuWJs=\r\n=BMaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://yuque.antfin-inc.com/fusion-design-system/scbzfw/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"ed202ff3b35f6a52c95acccec7cef1ff81a7be08","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.2-beta.3/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.2-beta.3_1652688732958_0.6748591076739978","host":"s3://npm-registry-packages"}},"1.0.2-beta.4":{"name":"@alifd/layout","version":"1.0.2-beta.4","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.2-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://unpkg.com/@alifd/layout@1.0.2-beta.4/build/index.html","dist":{"shasum":"c8e8a488135fe558965decd43130625bf7de702e","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.2-beta.4.tgz","fileCount":155,"integrity":"sha512-cBzZBPVFHIj0a/gDpbTjHeyZJjRugYueoihU/aGz8vwGBr/4HZQzWORulEdaGjwOawwo+91NLU2bKhxx/fkXDQ==","signatures":[{"sig":"MEUCIQD0Kjxi4ThV3WXKgCsU+B3R6pwgMI5GBDRbP6LluEOFHAIgLPMmiP57wqKfwLKBfkRv6zNO9+CPN3E8Q126GBNsmn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5124174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJighkiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocWg//TDM4werB50b+YT++RMlZzWeXhJFwy7qCl2QZgWbc2rXgFXbP\r\nTZafOo+RNehu2BOTa9xJur3T1aGrzSISxdHi0BKuFYiNBu/biSaZi1eQo2+C\r\nnQPeYWGY05hP61zao+tTjzx5lzB+EoZK6xMLXaRdXYLaIUu4BhE52PqsXSU8\r\nRv8y84j9MhBXPWdcxRWiuqstduzGItIfbKWzfp1iw1byqI1sbVrK6sbPdKuh\r\nCoWZfONEY/LMNLOmp9U/1bY0pRNoirz6u417ZP0aGtZ6Aty9oVKDU6wCwQyj\r\nvUSXAODPPvtpoW4puZB97DoKBaPsDu25Aukuk9eQV+4h6fRBptLy8FWW5N2B\r\nS1HSO9CwIaLhIIcUBoAq1bycpXUAGZs3V9nFIGzWyzPviycn3hEjfEMCOLcc\r\n4Ao6PBe4fRh8aempKCpFafPVRfXw5Lo0Vgs5UncZ/iNGIgl3+sOfdqKeGLwL\r\nLfEiZ4vcYcFQMaUDCDSkAoy3HtoetYvMIPyD+BAxlLpwxGfnLb3dYRk2qwGw\r\nBVIpCDD/xgE/9i8HwnUD7m/r1Ph64bEyG9QIi318pSTt6ADXUhXz6fGKG9gq\r\nadLPSqeL8tzmy9mOMbsYB0/fAklyZ3iHxUskk5usSK+1F4mNQpO22jETA7NP\r\ne1tl236Jlm/322HbqJBgxoTDMp3munBfUwY=\r\n=4KDE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://yuque.antfin-inc.com/fusion-design-system/scbzfw/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"51acc96794050129146a84910e364afe1e06e66c","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.2-beta.4/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.2-beta.4_1652693281838_0.6716916293999831","host":"s3://npm-registry-packages"}},"1.0.2-beta.5":{"name":"@alifd/layout","version":"1.0.2-beta.5","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.2-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://unpkg.com/@alifd/layout@1.0.2-beta.5/build/index.html","dist":{"shasum":"807b9282bd728fd2e4cb56bba6c65f1db1e43009","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.2-beta.5.tgz","fileCount":155,"integrity":"sha512-T2BHZIp4bw2E51Qjso2vQx8RhvexPQ044xKh+kDWOBG9uJf4hVn9kQryhPIVvmJ0MeRBtTbODilL3rL2BdG+6w==","signatures":[{"sig":"MEQCIDfQGu08TokV7ck+btkNVL0hOBUuXgB+MVcvrL7ntynPAiAoEJR4HEYCTFNQiDCp9DpOK6vK4083EepmqdwuFsC6JQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5124168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigwmtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTww/+PV37tDd/4aO3XNaAM+43pU/w/Y5nAoMjdpXlniW55c0ukEiV\r\nV0AUjEqWh25mf8J07aRNidahH22v7PK0pQRcK4aKbTh4Wrhw1IRTQj55BYkk\r\n89zvHnvuehtGySmUd0rFCE2zafYaBWlI7WQkJKN/lds6mfrR6NNBX7NtBGC3\r\n7TsoE6sZ/4yiJ8OYrgQn/rMZ5mm2Anlvg0nMDwnCmJUowk8E0mzJZlZNM1dW\r\n4WmqW6WLouTQBGuXv/e29DqwC8sDvKRhiWN8N4xnj9Xm1e4T0krPwPz7cWhN\r\nCkaJl/QCrZCMPXa0MD88VoRUi9f1CONq2gi3cwxMOzhquiT4Zg7egErINz+L\r\nbQlV5zilbzutGZSHfuOp8/TFiQHHHrRmTF74SNhHf9mq/yeQJYJ6l6jAhfCY\r\nuVuFDFrlcaTnlg+507sV+hgrgFhJd/yI6CfmoKS6IhQY5RmifyN61XtI7VP7\r\n9Kw2E6gvk5n2K38ddbdosElpgefx9omMD8r0nMreW38QW47C1G5QVn9cuv2g\r\nTSkZ6JX1l8B/BSGD/W+V204vsuROo3E69EF8yf1QJc9j5neeKW6RoSrpGNMV\r\nO+a4Uh5XOKoWCYlAH5ii/PmdbKPAImY3h7zUg0nl4VpXoW0S2MjIjIAQoB2h\r\n0kYW59xtCZQXtrfRCrYfxJnOMBwKEji0s50=\r\n=+9Fj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://yuque.antfin-inc.com/fusion-design-system/scbzfw/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内间距 | `var(--s-5)` |\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","gitHead":"dad1674624948805c169d89bdb3259da5cdf68ef","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.2-beta.5/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.2-beta.5_1652754861115_0.4577326949974059","host":"s3://npm-registry-packages"}},"1.0.2-beta.6":{"name":"@alifd/layout","version":"1.0.2-beta.6","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.2-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://unpkg.com/@alifd/layout@1.0.2-beta.6/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"7624618cbfc2f39ab24648b76e744c1b3e19040e","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.2-beta.6.tgz","fileCount":161,"integrity":"sha512-oaehuFLd16JHikeNiZLfz5nhkCimzluJ0uYnHGbbc2uZr9IriJuaMuQz439h6xb6uUA4pC58GuZIi0V55FcLug==","signatures":[{"sig":"MEUCIFYidHgixWKeDFHfVJ3MMx6MG4uujKGHakLl3sm1roriAiEArw7W15ngRLCYweCFTXK2zXVdV5t/2KWmVJ+5gG4EPX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5146229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih2ymACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpgxw//feb4rvlV3aUaJIKbcFDyHk7qfEl28FLhivhhqbhKUG4r2gBF\r\n/tx4LpuZt7Hz4C8Er2OsZ3wYomeVlvpSwgbRbHG1hOO/YMu6TodimfGLxnaY\r\njzrmuJwos6Zi+TxLU2WescdGa1Tqk934LqovzxMkf1czpvNVnpuGvO0McS5G\r\nJqBnH5yigpbeGCJxj6V/WxgyBHD2LibUCoOW1kBugf+M3r/0DurZLOaQYpeH\r\nhQAjnRfb5QMYbAAepDY9dQWYkiQTlKBQjCIi3sIrpocx8MTl5yOetXA8STvY\r\nNEpBz/zIo+LbNCJQN7lDrAOGFqOKKTJzC0mp1q0O3LBFOaXGUWntTvTCCNP1\r\nY/qznLvg5eVaabnWRY40GiFt/JChYZi7Px9Ttz/bPiXcUyEWUfGdebLAmmcx\r\nP5HGBzzG4J26VHZsoZNVJQBR936Abpkb5++e7nfMnvQxJT3jb6dMGTOVfwQg\r\n/dJgHW30XfNaWC0seyVtH+OwMoMoaB1LGosvcGaor4tSx478aO89sui1oRjS\r\nEAtGMNqLhZHGjUiVBlT93GiO96Zh19wXzWOy/FGmLkoDWx4iCkVmnqr55yBP\r\n1YcXydrksFEWJ+2HUiB5qnS8oJ8mKh557U5xXnEn/X8VYrrFo6hDi2wgrB63\r\nf3Yya26LPijoakO8uBwDctkL4yh54pMUtbg=\r\n=oKcZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://yuque.antfin-inc.com/fusion-design-system/scbzfw/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"2668b8c8609d9cadd1002a6f5f672bd181db7b94","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.2-beta.6/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.2-beta.6_1653042341929_0.06421710333533515","host":"s3://npm-registry-packages"}},"1.0.2-beta.7":{"name":"@alifd/layout","version":"1.0.2-beta.7","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.2-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://unpkg.com/@alifd/layout@1.0.2-beta.7/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"ad25cd8d4bc3ad936cda48a6bd77199d6522d3f4","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.2-beta.7.tgz","fileCount":161,"integrity":"sha512-Q2zU35le3S1Hp4OCPOCHEjTner1h7j0u2fCztMM/pJ9X46s7/Kq1fL1lXVT9Xmv9BodbWprfNVQ1qHe2qM3FDA==","signatures":[{"sig":"MEYCIQCBUG+cmTAbwiD1dd/Q8uXsYMWZwcvjLoLHb+HKEi4diAIhAKWxDquXrjN+vJXajl1KFhi2JawJvqHLtC4Q9tfdt196","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5145690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiivi2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEAQ/9FmwCc7U4v9Eg8iu87Wzut7VMPj/pVgot0TK5Hg4vA5pkhvK5\r\n8kfKw/3iMGUGeC8rZaDJ0Lg+25bUfsm6JKWuCdw2JjFSWdq/PgApYwH9ZJwV\r\nqbV8nggDCskFg7UDJm8N8clBvUOPv8tWOVu3pO23LmBzMs/y/JayxssVNKuv\r\nWqOFyzvDrpDOj4kpUU556V/vM9SlufyCXTkWf2moWIbM87tFcEtMMzOvcl9J\r\nHq7w2mBOc+d+IjZ26FNgtYwTE9A9Pz4vEoQCHyJBWFuBA6Kumqma1eFdhkxx\r\nWNB8xqNJZXJlBJSEIzBUwWDPvZyxRsP/DiPZLkJToEZMU/UewgD0ptoKqNZJ\r\nWGIm1uF4W+5LEZgO5QRuQEBDzw1NY7+A0LQSxy240KG4MlUB72O3U0oSMkQF\r\n2CxVeykKHGrunSu6ZVbgP1La7LBGWssK98tA1DJ8x5LulFJKpxVJZ5F0dfkS\r\nUjFzyBybJ4rl2zQvNe2DJHAWxCWRP/zsN7YTbFiBLMNCehh6o824bmzlxLgU\r\nmEPsDTzbfHD4bgpb5tb9s4b9AKlz1qljGrejZOQ/K0vFFffV8OurlYKdrrDS\r\nhU8gXkPn5iyS6pmUef9IzPHI3cirSJ0nDx6fzI05WTBA9BzzLMCO3DjOeDWr\r\n9/8EKQ32EZG6pJxrYhGEVQJCKVwZQyn1P5s=\r\n=p/h6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://yuque.antfin-inc.com/fusion-design-system/scbzfw/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"cf9d775e291a82c4533dab8a8cbd1d2b19b79541","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.2-beta.7/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.2-beta.7_1653274806560_0.02777285931870188","host":"s3://npm-registry-packages"}},"1.0.2-beta.8":{"name":"@alifd/layout","version":"1.0.2-beta.8","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.2-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://unpkg.com/@alifd/layout@1.0.2-beta.8/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"2ea19d7f78e6dd9660b589d4a2de6b5314d4a963","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.2-beta.8.tgz","fileCount":161,"integrity":"sha512-MDa4SSKUqLPR/ogSwwPG/P7zYRmWAeSE8WA6dRKi4qpHg8ICnsKSswF/E05YQ4nvWD8zmDWCXCJUhshQUvaLww==","signatures":[{"sig":"MEYCIQCDPao9SglUJhhbQ7fNcfjSit+h1E/fnYkuZ/NdmafgVAIhAOvLxLZO6SL4/maF24NItFBRsZQfFKdUtxrgXZbhxfp9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5146880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiivreACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiAg//WDp1ingD+zjsSs2omeEph7u2f1O9ze6JE5i8BqGsfPevKQ7r\r\nf2+Gkaptj3yC13V9dnRhjCOTP7ACqzQTJ1vrgP/L0+ojWbeaC/TiKWIOuj47\r\nwMbKCZAJnm0sUMRRZAoPvRoWOEwoMS1YTPNgtxAHVRBg70roliXPvw/NQASz\r\nsykRnGPuHjLxYVlyUG8G6j9jLh0nvhJiwgQ/eEOo/BZ45Wvs4JCPPQ0zS9jO\r\n6VivRewAKCR2xqkutY4fdBKJxp4wrQDZ13yMkWkxQ6yiTCm9JX23jqluJ4dt\r\n0CoL9JksqetNt8aTpnLvv5Ud8Y11LFsHT/XrbU607kcFSJWXSVoF+DzxAgHn\r\nf6pBahc8kIKIBkGeu/kA9+u/RsIsStBKc4LcGXy/jXXO8Vp2t073b6h0Gx5o\r\n5mmnEFMbKeU0WQNvX0GGEfg+8xxYpXKWI1nyPObAsvS5ziwa50pThy/3Ruqm\r\nmR6v29yx8ZcbIdTdLWQGzO4pvz+LeUuoYxBrEk+stx5x+8UZ487t1pc5UGZ3\r\nAYwf0zl0nDXDKGAUsKFP1ih6V+3r2/pX3iBoe925BicYbj5Lp9+D0xB5n2eo\r\nqFvWblYSQqxq/K9VXy9mSkFAUr5xeRLJS//ThvdHU9//vKoxtpRtSe3tZSLp\r\ndzHI4j6wbghC8iwUdPAqaXlm8ETXlSxmQd4=\r\n=kdRW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://yuque.antfin-inc.com/fusion-design-system/scbzfw/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"17abaaa702d60a864d15c07383f0e07008947a34","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.2-beta.8/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.2-beta.8_1653275358042_0.24877172553973104","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@alifd/layout","version":"1.0.2","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.2/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"5d308032638eb6feb3c704c20cdd609d31f35feb","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.2.tgz","fileCount":161,"integrity":"sha512-DdAx8aDK0/exSm77bKH1pX+kY29/pz68sMvpplvZTz2n5ohwLu4250nmyB+zHpDDG0a7fo+CONLMMvkTJDvk3Q==","signatures":[{"sig":"MEYCIQD5J16w40qSZobyko9ldTFGoRCvMq80St6slIAMbkIFRQIhAP4z3fDfoKZUgFIOI0qtz9B8+bYq6Tv8sWwFP2h1UyOr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5145413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinxzXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLNg/+K2xEJ7bi8sgOllV+jlwmEVLBh6idR1rHZUl9i6+ROXB/DlaQ\r\n3hEH+ycJgeKRPqDCYIRqdT01LuC9GQ08cbVl1IuLx+UMVwlMaL/h6SVk9BFb\r\nfvjkicPmoqoMRL2iCmPuQQcZQZM/940gfsmSRfrMp15Bf2PNrQGd2sYh3OIu\r\n3JFS201fxuzgNlx9UB2LbqD6+b1izEEiVY/AUK4FFWxPgNBdZFASQwXEEzj8\r\no7yb0uETqsXnhAp3TA6QSGp8qGNiQ8FMqWXgDxPPS8SSSJBwDHNcik9gyE4r\r\nGFcARcdCUTjWjcq52hj5IXF2ur3F9AeelC2AtCjnlDBuf6Scr1aOCDQWBy5F\r\npPpzwXocFMhRHP3Xj/aR7UNW8b42bJUOw0WgTmhQpDyraDT5vpJooDQDjtSC\r\nsq7a6rYIhsrcxhfis0LG+Opmb4AUb8cezfATS/DTC30Cqz/NFba5zbcCCGz1\r\nvGZ/IottsiMOQCA/Edi0rk6Zt+pdbgrhWW9J6bwcoMddxr7x/DcUTIY3PT1m\r\nu5kAwc+sOMQQ7qLR7wGxkBXWM8+YAs2l7SJSux+BIbBYb3SaGESL5ora8lWd\r\nRAv6cvw005G1rTN003+KQr2wcsxkaLkL6SPGnwv7h+RWrrlrJlxlm7bjqF+a\r\nJLyGG45u6a4xYA4hPVfKnumN07PyTQRXSVc=\r\n=syUR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"cf9d775e291a82c4533dab8a8cbd1d2b19b79541","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.2/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.2_1654594775017_0.568942510451691","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@alifd/layout","version":"1.0.3","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.3/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"c659da6684faa509c5ed5c4dbe6345ef7972cc5f","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.3.tgz","fileCount":162,"integrity":"sha512-/LfQE2o0yxkUOMtBqpppfJbkKzeCvruN38wZJhSUX6Eij8AeC2r31RRMWUxWkOa8w0oLz5dKV6jq1f7P16nB4w==","signatures":[{"sig":"MEUCIQDLDZ70d1Q3b740EWcTHQ27yVEZjipHOntDwfHWguqKjQIgBpHfiB8zVY73/pwKKIbArCa2+vK7tl+PXCdQNiyGngc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5206175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqv37ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotAg//eS6GsPsbSt33DemZwh8DotjfEV1cHMPYMBff/CBAMc+AwdHt\r\npnC6PS9sSrYie/XXVDsaP47jjoEDdFRxEqixoFJ8wZJ0H5GXS7YADQBUz0RP\r\n4GdRjWgMNUsutySHDt5uYUKy3iKWTuuyuXlFG1RMw7I/85Qxaoc9DPpduu7V\r\nQwCACQh1L0ytWwMKKgRJ5orKSHr7CuJIgHo0Vt0yu/9aQEnwLvBTmjgJf1S4\r\nXzu3a1C7LxZGkxNEdiQxLS1weElAJFBGllnws0/Y9394M9FARGr+F+x18W/H\r\nXgEduMmQ9R1ICzpqWZiQbEiproj9zk/H3H+GkpEmNx5CPhL7qKdVCtsuFICb\r\nYSHcITOv3skn/tDJdGICa5f6miV/i3+pIUs4Wj92f8J1GxfTOoPE/eJyWAvc\r\ndfmcxyU5bKmlTc794NEItk2JBch70yLuWBoNzTu+XJi6mrWdR1/g7yhcBrGl\r\n8I84O0QLSKjmbF22bqiQmVdxAp5f8a6wE1s69/KeZA46pVq55HvML0VmQ/qY\r\n0rvZt+DwGlJFb//tsw9LZC3/1fMM9/QL9MP6cEHSOtvSb2W1e5MP0zHhaBcZ\r\nVHuYRKlBZJRBqAQwPvMMlELieKDBWSqVW56TtUjSDmp1PtloBVmsxIsUntwz\r\nWlVjBPsA1NiznTaKni4WRe6Uv5gqNINp5Fo=\r\n=fvHy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"173982e213d35ddb70727a8672110cb8c3d10b6d","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"8.2.0","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.3/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.3_1655373307462_0.5805274171278554","host":"s3://npm-registry-packages"}},"1.0.4-beta.0":{"name":"@alifd/layout","version":"1.0.4-beta.0","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.4-beta.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://unpkg.com/@alifd/layout@1.0.4-beta.0/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"37565133a3b4d103638bb2969c182a23e98e6ec0","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.4-beta.0.tgz","fileCount":162,"integrity":"sha512-jB3EGDhEdkJzGFybtUTggEUhb9V56E5SoNyhBEEeOG6+XA0XNNm222ed7sseylKdkuonudhA/nDnUzgJgIP9Wg==","signatures":[{"sig":"MEUCIQDIR98PFWNYnIPmE9/k7teYTJPRuTlocT8EQCph/jnOpAIgVfp4RMvcWj7ttB4cSO0ICjJreOYzZbH+u3y980sIwx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5206511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiupzsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDFA//aP3hvQEHxNtyllPXPTbOFBdWOlgDqaN7NAV+EZ+bu8L2c7cQ\r\nMLb0uRNE0hfNveE3gAreLFtzhY0LjsK+dM4fECxRzOUnQMKaZLNc6BNH+WME\r\ntceqS/iN14SxdSZ8MsTw45Yn093hBQKuWXjh31q0F17qW6g2CcH09lbmQXi5\r\nqamjWFoihAMg6OTYsnEajs38KQLJY7TRHnyqdHOn8uGNZsTXborfKLUuOByE\r\nzJtl3WxhQzpovV2zlpNn9ZNEvOOiEVVWrqI+B6cAjX2NWAxM/w8N4R0jM+Ia\r\nPNFfxURQ0TETG58wd9s1pX/eLJwswx2lx9bAUJiC03gdQ0q9FlOGWY+tTiw4\r\nOsh3jEmRjKP1BnJ4BJwDFU9mhuq1ut5enlHJMHheRK5Buzphjohwjo49JkpL\r\nTljj/v1l41LVqaqRm+3ZkuV5gn0P8QEVUh6OKjlud8zHRdsWn7AJbDZAsu0d\r\nJASnQ2eGBpr5xAnqh8t5xdyDkNgeHliuX2Yd/yj6AiGOa/UbsInlho636dIB\r\naXrHMTSlGWHOmQ8hkOYjJN8/oM3Oz/NyqvUd/bxnMJoqjSnEc5Jaq5rEWOO2\r\n3VU5ltTfcCgIyE3mYM/S7qjuJGshSP+oLQvCbbplbmeLzRbF84M3r59LTe08\r\ni9QC8qKTdziEs3NIoitSpXhb46T72fYmkrY=\r\n=eioh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://fusion.alibaba-inc.com/dsm/pc/yuque/fusion-design-system/scbzfw/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"f59f649c7733dbf358c77b85c3541009b60899de","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.4-beta.0/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.4-beta.0_1656397036203_0.8675624036359586","host":"s3://npm-registry-packages"}},"1.0.4-beta.1":{"name":"@alifd/layout","version":"1.0.4-beta.1","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.4-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://unpkg.com/@alifd/layout@1.0.4-beta.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"c8004e1fe03bd2fa0a43405fe89c75ddc2e11f7d","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.4-beta.1.tgz","fileCount":162,"integrity":"sha512-QBQLDzByCgtlQSNytK2l/6DJk4Xwo36A69BNq4zPTxYigHFzqN8laPpXWFj04CKGcPDU6VbEqP8yHFbXX6uzbw==","signatures":[{"sig":"MEUCIE1rO3XhKKBLVelBoQRzjVJn3fIAJnf9+rzGDhmmR7ZYAiEAnq+ZabrsflrvbzcUoqqH6bHAe30uXQzW2UahtYI7FHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5207117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4fpZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprAhAAitFMDcSocA00hKQxID75O3rNHQA8pYTJojdkufpDZgwtVrNa\r\nry8EUD2umSLhIIJcZ3cozSAMnG4bBppvjNIykG5bvJWVKxBKV6IOTTv04/R6\r\nJpqMFcFHEl6V5jKA0K+69M85pSCSqwb7VqCM5AeSqsJMFsbIPs7Ss2mYSC88\r\nax1pBsRvkvL5zw5BXm3m8GqeNUX1HMQdx2sQI1xWDzHCjUlbeN+M76XgFpLz\r\nFmZjCILlkuGOUsAKv7DfjKcQNtbFcu/oV3n8tzoAaZUh41cHlXD18A4cfMq4\r\nsNMNFOdLr3HDVuLpobaSDuyRzK52niqJdUYKUyz5tOWZ0PR5l4c8/5O7m96R\r\nz8byYVjQj0bZbt5ZimK7q2n2A4VFZievuuOaqCXYBOKFvZaFOg+sw98CrB85\r\npn/311UQm88ileOwUnOrVDxdFVcAIWyCIwINtpsKk/wD9sAhSVMu6QQMijN9\r\nU6LLzeoaBl6Iskvk4kIlB5s555VwGKcPc0yLqoJjpjmRtsDmJ3tisFb4z8Hy\r\ngIIPBNkI8HhPNQbSjEEEv/b7DMivYrFaS+PXnLHD9rwjxCChrEyWGBvG7cpZ\r\nf4vDmyaDKDwhev/36KbeHtBGDGEY1DSojqsAaNj7eYrdLX8A2a36SDaDPwe9\r\nzNxzlOj7sghpSMWJkeHVq089iF7ccXA7GGQ=\r\n=eX2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"c0ebd1d3b886bfe82cb216c15c39b3cc93a99834","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.4-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.4-beta.1_1658976857180_0.2524903299168595","host":"s3://npm-registry-packages"}},"1.0.4-beta.2":{"name":"@alifd/layout","version":"1.0.4-beta.2","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.4-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://unpkg.com/@alifd/layout@1.0.4-beta.2/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"1cca84a0bbd51d27c19aee23ec061f86ca4affbc","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.4-beta.2.tgz","fileCount":162,"integrity":"sha512-/9NQguSWCDSI6NH1/QO4fSvVPJbOaOHqv6kA58tfYX6Cdv8aHsx+Z/LUpkAKN2XeEG7PAKTDiqMlOqUCGszOHQ==","signatures":[{"sig":"MEUCICU6HOjgJXm/QaQx7g323j412vEn4sAwair9xb3NydZaAiEAjycGdChWcGBRms6sZFdurG6mt5pYJDrMaDdoS1lUjhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5869339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4gXgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPrw/+PNTRNZBi5JQdg/qqk6Yn715tu1NCTLMs+dT/aRSRCAAqNzhP\r\nwb+WO1CBhxZbo58L+8PKryC2LwF+B0vBnu0iQQHIpypMvhxiXwZWfUIyuUX+\r\nHhyGufMeis2uW9Ui2PmO5+HxxB0io1Ah9hGUYoPnoiTadHHErhVWN6+7xJhd\r\nz0iwxKeaVzW9j9lTIepQqeAOsXmOtjqWNrLjrZkgOPvcUoIWYu9/kabDMV+/\r\n4EQtboP0ipcTo9ykFZvsup0Nj8i7GV8P0uK94aNXM4UqK/C0QpCcOaQWTbPg\r\nz1tKl0kO9G+Yg7yQEACKWBcUBK+hPRoZwrEnvrfxQtwKcjPyuJUPi/keXyrE\r\nH5tytWP++fTopBoMlDXa0JXUbBa+WkDGbB1YP9kJT8MxzfEwwBJRdzp7Kmlm\r\nG0Ybj1YQRGfiiWSQCvzUxHEdgWU/Wd8xic1QoOinsupKSvb3aXxLQ8+OzS0H\r\nRK/PTYdfcWr2UL1T642v2FWZEefY8sGciZhmTsViAMLpePEy4SW+btexnSPW\r\nwtgDnMmSKnP0XovFRb67oNHahzOHXMw72zVmyHxV5GC7vGihHO95lEZ8RIsS\r\nMR7iQlmO4uTsZpoHQ65be0V+jf8het6+oc8VpyHU+qWG5Lpm30HKTXGzg+FN\r\nmTX/cRUUu/sxoBTQS9t1SZYULv3cZscReig=\r\n=q5D8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"c0ebd1d3b886bfe82cb216c15c39b3cc93a99834","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.4-beta.2/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.4-beta.2_1658979807788_0.9668150429052091","host":"s3://npm-registry-packages"}},"1.0.4-beta.4":{"name":"@alifd/layout","version":"1.0.4-beta.4","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.4-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://unpkg.com/@alifd/layout@1.0.4-beta.4/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"737cc2bb44085537d08012319063c234cc594f1c","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.4-beta.4.tgz","fileCount":162,"integrity":"sha512-scsMokpkK3pqTlSVtsUJhMJs8X1rpU5kjSqJl505pNPIT0+EIWCxb3a9CcRBzAvSJ4Phn3Lk+uoOL85CygM/Fw==","signatures":[{"sig":"MEUCIQCuxWB2UYXScEfVVYbOCIOfHfGfiRHpZrayxztGdohEUgIgMwEna84m8E4B20tHP5OpxbKdzgqBsSl8N5KI+lWX0L8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5869214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4iWJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop3g/+NZN4LI6Qf3k2Rit8eGu32nVaeyCslFfGJYNzBq/Xdl2Wfx/u\r\nVcmNh3YdL42UvTetKMIf12mJ+IY4KTUHOSniQVlx1zHwrxs2KAZ2f1ZN0riC\r\nreSxlh1CidiZGfqOFnSxedSqkaOLdi94EYkin7xWENc9KxxwqjcMKtaWZMgF\r\nevX1vq17r43PdRwawDtqzG09j4A48c9Dbn5RuvnYlABqTfvkGVjPHs21Hgsv\r\nXY8X4ojEi+C/K8okL5zsWu07O4/GKL9vb2S0t0SubPdMVeFq+xjX8mvnNFWB\r\nAuXubC7d9ZouiRR0rmoqyD0SpWSgybWH31GAc0urd/9vvck/u7QCADh/kZDY\r\n2KX5ggoIASoS66MAkG6gCLNSKoKFxeZ1X20SDcx0CoBXEsH8F68Y2J/aS0hf\r\nySeN/j2IYB89E8mKVl2/KNx4Utpw0WoqCOO49bdujdqfjTQaI8Yn8mtK8iyo\r\nI8vVHbZGSWcQZTQr7F9hFEmnHKTlNGjWV5cyPEbLFTytQ3MVEQ3FMmrgC+Ic\r\nrcwiALAa75irQYkxy5/HALwj71YA7onu3yyIlCP2Ud1bI45+s5SvMyfBxtjl\r\nwMbDQLhosImV7MIyG9I5q0SgWPv89JWzBGGzxs0AeGdTfHODs6B3pR52wlaS\r\nCp/DXLSOwpYRv3k65xsu4qmJX2bS5G6jJZo=\r\n=Aay7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"c0ebd1d3b886bfe82cb216c15c39b3cc93a99834","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.4-beta.4/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.4-beta.4_1658987913655_0.8428024169120372","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@alifd/layout","version":"1.0.4","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/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://unpkg.com/@alifd/layout@1.0.4/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"73672bbc37bd458b28ba24dbf2aa54f10f0511e7","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.4.tgz","fileCount":162,"integrity":"sha512-qfnSrq6z8SJjOpz99KXe8VJJ8qllkqcIoSsaUnbqt1oG3CxZH08eqK1EssXw/kHiVyfYCSiXkAu4rHXvu7VYdw==","signatures":[{"sig":"MEYCIQDQh6RfnWoe2kxCM8msoba4KBYWmoUgMa8kSAZ5j7FHugIhAJ7HEYXuiKnIaffAS2N2jRAmvWGTRHhUqzex5iFOQRcv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5869045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4iqTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr1A/+O1n4oqIuzb4pm3zMRElrF7mFT8nIABP+zPazMOcZZZAX4CR3\r\nSY62+X3mt3wlXF7noaIL9wFowixhNmZXe+WacjEVZDL4hdXXJmSLMAl1e3rH\r\nws8cG8tzKIKcMVCRRn0wQ8WKltauQs4+wVaXmIxkb6DefzgQqtK4v4FthxC6\r\nyDDSS0TM7Reo6RLRRsaX3l6MJUsG9i1dzyhrgM0U3bPWVht13inwc39eDUee\r\nVfot7uyxln1NXSp52bc44RltqWKN8MwqdkEtdL9EseWvPYFo8JwH5qv+N88O\r\n7QAiiha0NexAI1QS0/Xu7vGYrDCCiIgXVuwqNqwZlULAjBOT9edYe5kiOTkj\r\nLqTZHsnyx1DgLvF3Es5JxGg9Mmajk7p0UPRw3dHSePeFHAC+zVb3DNZw3Po+\r\nSnyL6gLJGNTISOxP/HCU9vxXYEP/9mOs0Rjv76Qbor4lQgqG1/XFQpLRz/h3\r\niT+v1OxSq0ai4ZEzj7SiDDqdHMmeEupu1RePaYLE1y/G+gwf228YACtB1Xv2\r\n/AFYElDEssZ9+We8GS0+rxpkFd9WJpXpqjR+sDW+CHrYlZAFEGZ7rAJiT65L\r\n+oMbtaiat+ic8LN6ZQkUzAGvHMAyJWsOpq8lUs0kePGRGDyw5va/saBNEPBl\r\nigu7G2Sgiw9Iy/EZl/zrL5FN9oPloMuj+cM=\r\n=cnkT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","gitHead":"149937ebc4914431be3e108ed087ab2ee673d8c1","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.4/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.4_1658989202617_0.2757997104315826","host":"s3://npm-registry-packages"}},"1.0.5-beta.1":{"name":"@alifd/layout","version":"1.0.5-beta.1","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.5-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://unpkg.com/@alifd/layout@1.0.5-beta.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"ddb3bc93810122c3390cb0d3653a1953b3d1a1bd","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.5-beta.1.tgz","fileCount":162,"integrity":"sha512-adQbM758CyEwLfCnnLqPTG+YLNoaohKFfOdqhMTgHcTyjAlhVALTQibJpi3qc65yWzTsSy0fUruxoH2kP6D9aQ==","signatures":[{"sig":"MEQCIFOs+aEE3QE2RuiOVk+Nj/34/7wmvOwvkjRIHzAtCQWGAiBnAZDaJb6bKlrFkCarpIgDRXnMXkUWKbplodGTiBA0Hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5869779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7NWAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLKA//UXbEMY5CHwAzwRq8JE+VMgFbdE+yNAcXmOohToHj0NJ9cX98\r\nbjZ4icYyVr9w+XLhiQyytsUdOLADKfXn0tgvX9T39gvmRBffMs3jWqDe145u\r\nsjo7Z9Tkdo+Lbh6r7Zfz8L9Uk1LAlNABvtdQpfepPCulCy27ZSjL0sjvmS9e\r\nkmY5gUaY8Pslms514Czky3Oomj37Cj1JvnT7EQgvKJHHOPJMD0rgrvmwSVj+\r\nukfGd+nfrRK0gaMew7ZO2DJ0NZPP1BXDHsZ5OTHu3dzaCrFmDFKMpHBBwZQG\r\nWyV90M27K0xJeh7+26vascHpwY7cvdw90Z8eB9admbHZWSdd3DxDhkqRU8f9\r\nYSNDKw4Jj/qCc+b4KuCD/x+12bIfINHa/Z1a7D9QWmkNWL9HoUud3bDEoy0u\r\nLbEAD4Ytc5EBdE9vMc9A3t7h6UDjmIauwlztM/ESNZD8W1QTc30a7+o1tdlx\r\nt7T8V2t3oUN7m2a4Gd5jiUvYc5JjNuYfD/43scucdUhvZNojkAcR+CWtKcnF\r\nOHrSaSVU/kzi/6hMBshAqeCgSsQXY6U9IIyEiEAlI3p0KO/MPgkv7uExA2bL\r\no2ews7CWuNBPNEkxC8o7LdkA0cyMXum8lihoDSt+aHpUC+95h0RzDHXVI1MG\r\n8N2FQ2UwtELdhZCc9xkAU1mNN9KFg55P/0M=\r\n=rvoC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"c38fe81fd4263715a6af58590dbe4212c59cdbf6","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.5-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.5-beta.1_1659688320596_0.27206586174250247","host":"s3://npm-registry-packages"}},"1.0.5-beta.2":{"name":"@alifd/layout","version":"1.0.5-beta.2","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.5-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://unpkg.com/@alifd/layout@1.0.5-beta.2/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"1c2a0cd0e24d760f6a4c61003acae82375eb23dc","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.5-beta.2.tgz","fileCount":162,"integrity":"sha512-2Ux46U3a+SvqV2DX/XE4oHKI6gL29v60XcIzfgLxWL7MWgX+/9qu7f8/GY85OiZutyRYBOVIa8IxumovyjlwJA==","signatures":[{"sig":"MEUCIEVS/bO/nVGhx+Ua7uqSV9P6K9ZVUYAIhZv4bpsKUr2GAiEA4r/0pUpgPpD25l1tJaz6qQnc+MoaoLV4i3lKvUxaaIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5579508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGF51ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFjxAAifuQ97/yknxdAbMY5xyCMr0r+PjwtPTc+Khbi8+uy6214oM7\r\naa0g4Zy/tz4E5iRKAXBMOb54YshvN9pALcUqkCcXmBuW4AwAbrdCL9R5Zm7L\r\nLQZkZ9nwmU1sg4JS3/wvbDndTnN+MOPaTi9ki3It+b4JtqBkBTAcClske3Z7\r\nmf6I3J8RIIXXhcEsdBNR7Zb7BQ5ZqFly5gbUQ+3mAlF7eySWiEyEaU+nwyip\r\nUg3OKx9x5FKEZm2tYMqHiNWVJFWJ8EVsZOZqq5qBeYbE1IqK46lBnwoKD5v1\r\ndw3rgI3PtbduSGCaKMyomB0kCwye3nDlAN7rjrJGHNxp52LhvCUHcpzM3a3Y\r\nBPX8wMxyYY90rQsMMlQOErHkO65ER8PYPMgi2awu7/5+27wEPf/oFkQseIoP\r\now52Iy8t96JKMxpBlEm3XE99EBcKxviQ96JC2fU1vAh5XSqYdW+JkgHMh/jV\r\nbSP8/qQ+K70vHK9crtk/nHTUMqSjMEh3c0fbG6R0NkcMOEAFCrihaY2O2h4Q\r\ndcfeHgdyceE7GvchhrNbGqgaDxCJDM9lBpZy8Kb/I09yxInSGC0ydvEtWMM5\r\nkV6rYk9pWBTct++5gQdcnlgGT0NSHnPiIqoQ41XKDWkECRecIzt3eXkLkghE\r\n5jMMt48iuzMBSRWqzAap9mxTkfou7gt4q/g=\r\n=A1kD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"ff83ee52378f3cc713ca7f8a4b24930f4236ac32","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.5-beta.2/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.5-beta.2_1662541428371_0.7212682565230464","host":"s3://npm-registry-packages"}},"1.0.5-beta.3":{"name":"@alifd/layout","version":"1.0.5-beta.3","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.5-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://unpkg.com/@alifd/layout@1.0.5-beta.3/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"d3009dad4fc3dd26721d0495d6cd634ce213a909","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.5-beta.3.tgz","fileCount":162,"integrity":"sha512-MXo1lUqHd6oQ6NGs92iExK6TLRQJ2keVepqcEqIeyEHjtUfvZ4w9sizDylXcugbM+iwr+QHWjN3fabxsENqVpg==","signatures":[{"sig":"MEYCIQC1Fp2vrZPMBE+oG87LbumIQgRznQyBmGngjnBJr0o7egIhAJeNN4zOD8cOPl38PkuliE9vjggDGr7LDVwAECiFAjAs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5579317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGF/HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotBw//XyePASU6Fa6i6D6rTS/Ng4w8HJmEt2NzkQY1dpqPnAhvkOMP\r\nr79aqgKrR4hSSP8lelI+92eqiO8fCfHwwfItSLqkQoY7YX+8RDC9Y1ZOgAv3\r\nmH0eC2p851XvJlEnF01pEbQMd/4om42Uib51sAlHzgqvzjSydzabeX4S8u6v\r\nfWRyjpO7/n4K0kkzxBdLTJ5BTkLkQ8EQUWMltb13UNBbEBcuFajjam9PMsOj\r\nAQfkvSvp6DcJfJi3MEwsi4GRupIijKQvWd34etM3bV9trvOHljURQaUgvI3w\r\ndjgvkWPZL6JflNeAcThvVMw/enJlGnq1N78izgIOdNvvtlckOhcrtyJ/K4vQ\r\n/mva9BVBZkk4kawhzQZgif3IqFadrLoNK34gPTm6GrdScWe6rB4mqpy0Ji/g\r\nlxURhCAOedGTLcq1TtbVkCOT1eb/qdaUOed9tQMJEGrMNtXkzCKEgwGApIYA\r\nW4b4LhBcMe/5Pos/TY7hjXaA10nC909a3AUjVcD9CSmxNOE2eP74YhRtENYw\r\nSIXkSbGgz7jmCvhlfiM75iAgZCHTQM87yEaEest5zS6Lyiu308QIBweGOqX0\r\nOhIFgUuDKHC5PH7AmhzmRze10ZuKzQEJxq5JrHmtuaFJetwe2YbzJaC+7+M8\r\nu6zWHdLvtcNM/nTgxg2fhp2AmaRqiTxEeU4=\r\n=CS+s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"9af0b80c2a71b39b359e82ed7bd04795ef0de8bc","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.5-beta.3/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.5-beta.3_1662541767082_0.4474812974625928","host":"s3://npm-registry-packages"}},"1.0.5-beta.4":{"name":"@alifd/layout","version":"1.0.5-beta.4","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.5-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://unpkg.com/@alifd/layout@1.0.5-beta.4/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"1f4208ee80f0e359441a042f56e21fadfb3748ee","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.5-beta.4.tgz","fileCount":162,"integrity":"sha512-y9Kg7FvfJZgx3Gj7fqmX/9wYyfHfDZud+NoPSalz4QLJE/iLKx2FsD4x0jr2n32jX0wVchowxKEJ4WXDo+MKJQ==","signatures":[{"sig":"MEQCICM1EM27v8fRBL+NCOQe1Wg5ewktKhldgTe5mSm/Jy3VAiAU6E5mVQENirPPcUkTBBGbeBaW2xuafyVwFWv5+aPcGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5579317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGY+jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPGA/9EZh0rxvhFRFi9HNhQHgKDCRnvfpLKAl7YiZC2WaHitIrdiQ1\r\nMiCa/3ErfJuZIRjvRc7Raw9Vc6uDyVJClRJquFZuDS04HRlxDqhHePr0z172\r\nPExTpdSACTGo464ZEAbx5jsnwtXTb1XytItKpU4mmt4nFs5qB2rslCavHCU7\r\nKknhYZrDUxotzajYBOKjfAfvgDjHMZBXovUlBMkOJcYMYR4knc156HZLCb/D\r\nu0gRt15fND1xrh/G+oHktzmj6/9H6aA4+oKKQx3EJKDIE2r9hTQV3YlHLEvS\r\nHkzBxSzfj0/DWNkKiRdkCTaAvPLGQXKrcAz2sVd1mcnrE7fWGaYkTPm1pzb9\r\nBqEP9h/oIgv3SA+QwkP1Se4a4UnQvZdmAg2K6lEVHOcqAjLRCGRjNfQWIOOB\r\nj196TpTlB7BL9Jw4buQwiQfpp7EmvvK/m+qqIwezrq9aF4ajFeM7r5Y0QN1V\r\na0LisyaC/t3kHvsHG/xM48eS5jUzdgjYKD+AZQmSonSxY0ZkbNBWLJJf7JEi\r\nhWNfBFkuLsOFpAsk3WcNPhGXYqRgImrKApSNF56/NvZGmrmotYdMANJevxpB\r\n1EMVoqpZjdan2c/CyGcC3K5A37FgIxS93p8WrpDqilisHOW0cT0tVieo1l96\r\nmymryd5/T9BU86tmWKiU4aBTfcfWI1zxvzs=\r\n=o+yj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"d2d080cb259138dd48cb1d924d09e9c8e3a69561","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.5-beta.4/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.5-beta.4_1662619555618_0.8986061132122745","host":"s3://npm-registry-packages"}},"1.0.5-beta.5":{"name":"@alifd/layout","version":"1.0.5-beta.5","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.5-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://unpkg.com/@alifd/layout@1.0.5-beta.5/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"ca9a67688f9583d47c0853ed62b12bf90379adaa","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.5-beta.5.tgz","fileCount":162,"integrity":"sha512-ymOwCGmW4STLY6NPttJNWr95KYGrYGRS0UhLUaoVcLOseLT+bYEXwG52t9kFE9hQnkWclwQFnX5nW36CsnnGKw==","signatures":[{"sig":"MEUCIHZLd/usbSp0V5nzbX9DeD96TykyuR4hNiYRSNDcD/HDAiEA4X+eUpEpYj0Hcn4EO0vH4kFhyZvuY0DAWLHDGe4kNzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5579317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGZFiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBphAAgwZzHB4yv7CoutpbngJUydJy4No48w6TIMgmcopT9quzKZ/W\r\nxDR0I34a4HhTUXFJtwcaoH+4E/jg1ndsHWc3pQhsCFPPEC+zcd87lva6tMcH\r\nlC6EPVW+c2y7JJP6ems7dunlv6daAs3C5tVBBvXeayV946/xlQvPtQPW3U5U\r\nyP7RT8YUDqn1Mt5c3F87LnHTEUJEq7bxcga68JesBlu6edGndjK1PY+uFYHZ\r\nTNITQKjNNJA47rM+Jy0RPgGbp13l9axue2m4kaj+FLn3wNwlXnxZaZuwmwUL\r\nSm9D4bIL25rCsDW0S3zJrN9ugBzKo/ggeyn16ZMTYgba2Pf0PHDdN/LeEQcU\r\nAAVoUmZvHO8z9VpmycFZJW62Q5oANVIZ63DS+LsQlyvCx6v5giMTtyxFGbNG\r\nyACGPua7sT0bV1J1id3lilaqs38ERGVPl0bzkRWVkxA0EJnT5/eJNJsNKaIw\r\nxQs2fBihWhR4HZ8fmrr6fTx8OxH/TX13JAUzRJEOl9uX63BihOOHzdE4MBvE\r\nB+nVCKBYcpHki8hMSc5i6AB/QwTiEZoXRewlDMfEmr++1IhYoZD2mdAfppcB\r\nlzIHKRLnPCbUnLZmZmpnHWh9EcHctt+a60JhdNDaVtKHXwYDQ5qoxn15NRt/\r\nSOxsH23blcOK/dYsUkQSis2kSvGM2uWS3zs=\r\n=MoMk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"f3e19713800a7b9ad4c7d27b8f78b117c4087c80","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.5-beta.5/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.5-beta.5_1662620001715_0.39197573823514675","host":"s3://npm-registry-packages"}},"1.1.0-beta.1":{"name":"@alifd/layout","version":"1.1.0-beta.1","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.1.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://unpkg.com/@alifd/layout@1.1.0-beta.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"23cca294983ccc2147865fffdc125b55f91b9c63","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.1.0-beta.1.tgz","fileCount":162,"integrity":"sha512-fb49BMh/OLgrkfxDVcrXBGULaTBKA+vP9RyklR35s63FXPpnQtFF4SlfIVk9JvoeU9IPnxW+SCPlS3kJ+a+yNw==","signatures":[{"sig":"MEUCIQDJeI+IMXjWYPXkKzkN3QoD9s0AtpeteMjHToYfWmCqMwIgb+lkP+thNhy0jVRBB+TQC4Hl7167DwyKoR7SwoDlimE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5578952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGbThACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4ixAAku2VATDtdnQPb+O88Mz9LPwi9Mb/taspajqYj/Mn+ObFvZog\r\n9hf6bZtsd1lIAQVfVqxJUs5oANqbyuUFCO5s1qrgGrL3C9L5fMfKzmVi4osl\r\n0HVQd4QeyoesqEOm7MFJaohQKxmv/KSg/i14ICwyoZoH10/Naj3ut20+Xes3\r\nnVs/gjqug3mCRbp6NEKb2sbD825VjYsfNo45RzEv4UJOPtPv/qADmOe4+4V9\r\nUqb6GvxRf6Yvbp8kZ1FDzE22oNkqFuN3QkSvuC4a1ss14hrv+WaqREfiywL6\r\n1zDU8vKEGLbSdY95h6WzWLY++GBGNB0T4lZSmLNaqARSWEIXMIsrCWSwVuan\r\n/jhUfPmjxWY+yf1lKHcDdI2+oKnTgCdVDhS0H0kj+Q43eb3jcjv9VUFepPyT\r\nEj8PAELQoBUcRCOOD9R/MNndem/GzTWEfNRU7GSJKK5CzVuhplndwa/Gw71K\r\ng4zGSVfei1HDRiOUiTgUBHsedBu1BoxfLdFNuvYZn6RriTOQZF3EznDh5OJm\r\n8KD+2n2z3xa2CAshorLSLb1C9EjAN7hrXjeDSgz441T5I+egZhhWv+IgkHq4\r\nj9nWT+y69kIGcFWm+gKk0w7iWB44O269WpBBOUXiqzzkRda0fHgoLxv2g7vu\r\nhyy11wV4qZpd3eHeKbqVZAUD/FuLC9JbY6E=\r\n=XpHv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"03515375359d75007c925722070b12bc449acf64","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"自然布局","directories":{},"_nodeVersion":"14.15.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.1.0-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.1.0-beta.1_1662629089596_0.12383629246028716","host":"s3://npm-registry-packages"}},"1.0.5-beta.6":{"name":"@alifd/layout","version":"1.0.5-beta.6","keywords":["layout","ice","react","component"],"license":"MIT","_id":"@alifd/layout@1.0.5-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://unpkg.com/@alifd/layout@1.0.5-beta.3/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"218ed92e5071254bac3e1baab59437d91a29c72b","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-1.0.5-beta.6.tgz","fileCount":162,"integrity":"sha512-bWEAHU/qroKTFyxtPNL8vAxgTL+twgKg7R5rxE2EO9ef5GDQ3huJE+Pg8cxlhGqYb+uaBXChKrQnEzr9m4Wh5Q==","signatures":[{"sig":"MEQCHxYOfPubM9RSy4bfz75cnifRfcctJH9n9eZ2ZZVYt44CIQCXYmJo2Q5yX8vK0q79BfSWqbvqGARq5a5wrbgPrAs7Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5602414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGqoQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvNQ/8DUzHT/nfiLvSqG2K606MVjQWpZz4zvj55KjdWXCqIon9+duZ\r\nBfjDdj+syEmb6sHVGDg5DhiOoF3ukiadktnGv9UKVZ5LU9fuUByOCpCApfZb\r\nqFXvPSTa/Yqod6abtzOU/keKzgbHV99ezAbpDmOBymKYb5/AwefK9jwcy2qB\r\nqoSudUP7QWYyKpFLmd3JzIxd/MKPAfvPj1LukPUhXVBMIPrZGNLu26IpAUNL\r\nuTECDSbSnkE6gYyYAa+B0ImKRHUQW/s00qwxQXHVERYvU1DEPUeRCT0tPkI+\r\nuTEFxEG1jfqqGRpNMHwGn8HbAl1bCCxzUk5BmXQUHA+G8GrLtB0F0RWRLHJ7\r\nKl+fbXrfAgruYLbv0pfp3+3cN2mJMDR1O1yHqb8CR9iZV+DJWfPm6Zl/EPCj\r\n+ZsjlW7MlJFCWDJYsik8WqU61wwc6xQbbDaanRrZF90WyR5o0Gd3UFFJFnVn\r\n21fG8qkgk/zj/kPwHQMDZK46dDWRfqAln94EIwp3IhDyNBVFM3E4Rmgx8uMg\r\nOJJDdynIJw3q0szNZ+Y0uQgw3YonsdVD1aU8iP8uwcZQPt3DHxiQ1rMBGycc\r\n5RioJjmK/fySwYZzlk8DJ/UYWSHKGJ1i/GeQHCSFbm1zDoaRyMX4XF5lO98/\r\nZW12cjNz+c5CXaaobWpd3zcYALFZ2KuEcpA=\r\n=fKYI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n@alifd/layout\n\n可用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n使用说明书：https://www.yuque.com/fusion-design/layout/yzx8g4\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀， | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | --------- | ------ |\n| width | 指定宽度 | Number | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | --------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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 | 子元素 | ReactNode | - |\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-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"132b577067eb41dd5499e62a03a89b73695dcb2e","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","_npmVersion":"6.14.13","description":"自然布局","directories":{},"_nodeVersion":"14.17.1","dependencies":{"classnames":"^2.3.1","@alifd/next":"^1.x","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"materialConfig":{"fusion-site":{"id":874,"url":"https://fusion.alibaba-inc.com/api/v1/sites/874/materials","name":"Fusion.Design 站点"}},"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@1.0.5-beta.3/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.6.0","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.2.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.5-beta.6_1662691855869_0.8840797971062007","host":"s3://npm-registry-packages"}},"2.0.0-beta.1":{"name":"@alifd/layout","version":"2.0.0-beta.1","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.0-beta.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"ddf2bf4b6d61dcfa34870195b790cd344fe5afd9","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.0-beta.1.tgz","fileCount":154,"integrity":"sha512-J5oaJISXPzJwZRCY/M5O/Y6g+Kf4+xhamTi96IvJSUl7e3R0y9MOtS6sITC1+SflVCz0CuMDv3n6N7CS5aoLrg==","signatures":[{"sig":"MEYCIQCT5BP9hdflm5RwOuN5zT6VuvPW+al8mRzAPOZ31xFUaQIhAM10YFyVIcIUd+6zT1mZqEnHdu5TPZ7AaYwaXOt7z2KA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5989869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRoEOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2QxAAnFdz0ndO4cd/s1+asHBXRTLrEGDpsXw/i6eNQptOF32pSVNT\r\nbYF6uhulCS1EzIq9/LjshS6+ppYtPMhpgpW2EF+QFOpaL0xD7pBjo4PT57xi\r\n6liDfHX2gfjhHDc6nFd8aHH8ulaylUJckHbmehdgZBTgFV/wvZcOtWLbTRkF\r\nCTNCsx/VGBMD0ek2cdS4rMNs9kfFFJjCjFU3HYWouuPsCkajKaT8oqYTiatL\r\n+qlpapZcLNuGNJUysQ2tHZKANPvOAMezpzgdxpU7OT3A81mFsdvxLQ+2qQ5J\r\nhZMzg5OSbeyktI9YSxjHqZD4IDMM/R0E/uULQC/EkSr/oa3bCenV1hq9mhtT\r\nOIbpH6P9G/0MfUhr8CRgunlJ+ci8GmOrTl8Vq+gf7ZqvQPSrZMCCXGPIec4i\r\nOIuV92RcCUgYm5rF/aH3NAIDwVsDQ3+sQ3FSdSabsGqC5WyDJ0UgIkQ3FQoa\r\n7x+9o7ymzh8WrNjUG/rBK5gwgC23eGJJ+ktV2LS8gieHJK2I219wTew4Eaad\r\ntObgRJm0aPsrnjccSdXt2r6Uk3ED38nzZDJMP4D52615z+G8xEztGIQOs63r\r\n9MwM/lWDHW1xU6XaUxyqoT/GSUJIn/VeWZnMxMqIvJFefLIq03rv8Y8QTsyR\r\ngHiY7aIWmgi05uIRnFBreDrEr5b24geNr1s=\r\n=Iu1P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局(@alifd/layout)\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\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

\n \n \n

\n 文本\n 文本\n

\n \n \n \n
\n \n \n \n );\n}\n```\n\n## 开发\n\n1. 启动 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-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 | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\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 | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 CSS Variables 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"eb6277d0635d58ea736e605beeaa0cbd83fa4f4d","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"_nodeVersion":"14.15.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","is-valid-array":"^1.0.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.0-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0-beta.1_1665564942402_0.8729101697634789","host":"s3://npm-registry-packages"}},"2.0.0-beta.2":{"name":"@alifd/layout","version":"2.0.0-beta.2","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.0-beta.2/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"ab5513960a058c5e4d8b9de28e086c09778d4dc0","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.0-beta.2.tgz","fileCount":154,"integrity":"sha512-0gi+mtJ7QDjj8/8WC6wlA4oL8fRvhIwE9cAm78khWjDdrTt7pHCwCSaqwbzF5uG73G4D0e7V8uqD3XSluogLuw==","signatures":[{"sig":"MEUCIFBeYAvSpOpT+85Mge18z+vdVoH5LVhC/mY32ZqCSCPDAiEApSjGuujzRm0TK4lTyh8SqKBCx6KAYlA05+tQpHd6HMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5988270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRpdGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFyg//a8v2PnLsHkGsjLdQD8ltjTIO+beupVzH+S6EcV6afda0psrV\r\nLwnDNUsudnxAZnmd0NrdLGKCyXFCrz2gVkJAUZv/EVHJKIg+2f6sCJDLWxSp\r\nDlr0nHEYLk4JWOiDM0jNx8altEm6da86b9/4wynxtlMLoBvqV7WM7zH1g1RA\r\nR0zjLbIXDW9/dm6AYUozq9malj5u6IB2hl6Ukp+IM7AJ6nFgrlEQxV/b7Ut8\r\nY79TBTjqJtdlNAqOLXNDVCorfvy2otn2zk06+viaEfTjdoT47IZnQ/rKjLGV\r\nBOr/pffb8Z67S0x1kLhr1GXcZGdlKwrWi6ibEVLja41sibTEpD1C6Zmmw8Lg\r\nG7jm73zYbbp2fJU+VZM59XpNvN1+utpDbMLXfF8tOsuRxYljFr/xQWteuDs/\r\nVgztr3YfNDc850DAYgQ+4mReO+yeHuNZ/VGTcAmImyGI//QrZeWzSfLUJq+g\r\nB/0OCsAXnuEuGxhlE5T2wp3NUGS3ZyhSfJhYlpBtzk/0102DgjtMdiiUkKS8\r\npKSCE+nQTrPhVEnSqM+QChbtcd+AptX9vKSBML9v++uyxrfGPrs8s4e29QcL\r\nlq26h0m1U1IIHDIGbBEmR6AwP+kHnLVNjrbJVeGKhJRi+FckpYO2SHTWSrRw\r\nISLv7XoLAz1yaP+i8q1FQbr5RwjZSx1zzns=\r\n=fUUP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局(@alifd/layout)\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n[🔗 预览 Demo](https://unpkg.com/@alifd/layout@1.0.4/build/index.html)\n\n## 设计理念\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用指引\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text` 等\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\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

\n \n \n

\n 文本\n 文本\n

\n \n \n \n
\n \n \n \n );\n}\n```\n\n## 开发\n\n1. 启动 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 CSS Variables 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"d629c79445f5cc3b3ef160d07595213c48cfe0ab","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"_nodeVersion":"14.15.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","is-valid-array":"^1.0.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.0-beta.2/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0-beta.2_1665570630380_0.07194728358250746","host":"s3://npm-registry-packages"}},"2.0.0-beta.3":{"name":"@alifd/layout","version":"2.0.0-beta.3","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.0-beta.3/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"bdc68934c3600c1e5ac38587b91e5f607a9a1a9e","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.0-beta.3.tgz","fileCount":154,"integrity":"sha512-fGXiCaIKiF5Ze5AeU3/+fqZ1v1ZqZYSiQnBzzQGuyeCTu96oDxQlev4u2cvazrudRfp7gA79lnUxst9AHowUxA==","signatures":[{"sig":"MEYCIQDBptkNyf5EuYcJIhLpZYEs/Lxw5ze04Ji+1gc0GWE/oQIhAMcjRnFIMYgQU28tJfh1CWtUX9BK8UTRtYurTOEkpA3X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5985153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYdCtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDMw//eqk7B4qpDRFXsM4YbVTex0rElzZ/6rbjfPV132V68n+/zoCG\r\nXgtCyZgfu+DxBQZLZhmcpTdE/pCs8PzLHfZIB3XB2KzPZ0f2JzzhwrU9xaw0\r\n0aIeaWhDgDqiJtrRL+UEFIpJCRX1CE3CbnwT6pvagvlZS6K/qKpdOwchA1yr\r\nKFEWL2RyBBA3KLBfP+ewGwKIOmqDHOwQxwIzQq05mR/YhovRj3s7qfD3xVsm\r\nR0a9gO4d5QAGKM3CANPc13mzq9q2mZ1MaOMkwTmiGyzpgg0lzSMZ2EtG0RXB\r\nRt9ljuWmOKzqjfo2eS7xvBr19w4Y6nlbfNsxUH6XwsCTg6MfsL0tzjCD08ob\r\njCfvIdv+0faK08QIwoYPx/C3IwWnualF+KnzQj9a5ZwzXmNbmi0vKAmk4OSq\r\ngfYIjORz9JjkpDAbg1zkLOovpyS3p1qDbwlS/nFtGO2s5VaKqoJgbT7AAr89\r\nSEJjEVV94gn3r9sIW74eqnZq9xeIU9zElPJaxcJg8STbjFTB1GqcT1yF4wB9\r\nekZGgzZ7UrXKjAexsnP8JzEtAHG/JJykXJDATYsmMwAfYn89lrFZt+9Bw28M\r\noiU20HqSOmsmutGUNu25bTjjXAaPAGlTplPitw0/3x96XE9K8HdeMsMwyHs2\r\nKyJlwgzbJxIbJqxBf/Ke1q7ci+CvJlnMyKc=\r\n=VzWF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n[🔗 预览 Demo](https://unpkg.com/@alifd/layout/build/index.html)\n[🔗 阿里低代码搭建 Demo](https://unpkg.com/@alifd/layout/build/lowcode/index.html)\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text`, `Space`\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 CSS Variables 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"f992e523c031401f3d04c11b9e774cec04c86f54","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"_nodeVersion":"14.15.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","is-valid-array":"^1.0.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.0-beta.3/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0-beta.3_1667354797048_0.8219262896559691","host":"s3://npm-registry-packages"}},"2.0.0-beta.4":{"name":"@alifd/layout","version":"2.0.0-beta.4","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.0-beta.4/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"19715cf691d232164558c4f66f3c68bca2cea2ba","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.0-beta.4.tgz","fileCount":154,"integrity":"sha512-6btsw27+BjhyKvwmhy9wTFCszfscqIE33uKyMu14NMOEs0a890W+USOk51mUesJWeJmfhDOUMRuF8Lr0xB3Ivg==","signatures":[{"sig":"MEYCIQD2q04xnc3/TD7v73dmLBDYujkGtTXcQZCD+5seSrnzSwIhAP1zU7Ipikws0VZwojjF4pRK56Bdnj8MrGg3Q06RwpfX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5951274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhJj0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKAA/+MysoDfXssEtSB3aAi6w7lL4YBaf35QsuHaw+Av7R1NZY0cuL\r\ne8MkuXmHgV4dmOEyYbnVG3Q0K9YQZfeVIDIBMQkFSyjI5H1z972XfO8Iy/bY\r\nOcH1KgH8iHryJXH7R+3N4Rzz8UM9yhfsF4mn5W9h9b4+O2pxqeqjXgVCQNCt\r\nqvXyGjAJcEefmJi4ml6hGT4PuVQk8UcbKOHKoAAbjeKAua9CPPSxSpiaHLTz\r\noSb9ZA9TDBDfeYVxxMIqW48ytQzApe6WBWtNfyZsSnfK/PZQkdfVFqb2kqkc\r\n2RhsYDOjeBhIbi7DTYSHzl1tex1YFGynBpZvbJNMED4mnlci4kyaMHHjmjNL\r\nuSzAqVV3pt0plJxYZfwl68ER28YSHNQqwC/guTpPT7KKNNxw7Wy5Zd8hV+pm\r\nqhkt3Db7TdqJQc+ZlZjW7fy7OWwCtKCXfXUG0KQA+2Uua+a7NacvvkV/Wg70\r\n0CfnMtEirIrO/GEO75e3t43bXzErTgVh2RU9dTgLJGgA7IAhOPgAaDwccU4j\r\nCrDC9zxJ5Hr/AbEEePej7tzDcxIl7RJgzx6SnKH567z+QTNdmAzBWbkzXbsO\r\njWyZsgw36ooceKY8zDI9WEa5939W2s1xiXDT/ERcyoEtgN9fDUah6Ygh390C\r\nbyI5vnOpLcwoYuHkXEF7AETy8oii/ldmrsg=\r\n=PlsR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n[🔗 预览 Demo](https://unpkg.com/@alifd/layout/build/index.html)\n[🔗 阿里低代码搭建 Demo](https://unpkg.com/@alifd/layout/build/lowcode/index.html)\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text`, `Space`\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 CSS Variables 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"0971d41599df8290ba321db6cfa011bd9fe5ccc9","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"6.14.8","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"_nodeVersion":"14.15.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","is-valid-array":"^1.0.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.0-beta.4/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0-beta.4_1669634291894_0.5476107748966095","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@alifd/layout","version":"2.0.0","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.0/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"a79d565bea4342510ea10eda1823d07ba72d2b36","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.0.tgz","fileCount":153,"integrity":"sha512-fsTl9cBkq+zpw1RobtJBy/2aRaJjy/TDN9jFG/nfMmxMYaODD8HqHhetu5jcUqvaeleT2SPwYbPONBV58IlIYw==","signatures":[{"sig":"MEUCIQDbfP6AZ+sIrBVzfAecp/ZGD71VuuMTKZTGFgI44LVyKwIgP3NvizonwMwnNXm8z33cWsO7/PkDiZW9Ztsgm9fdD58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5968310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvjCkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa0g//dLhroNob8vZ93fzrdogoNchosebk9fIO/I35PznadsMrveQj\r\nTAmwvWqpqt4vQJ+HUEFg0+4N2ONgtMJodyjj+6J+pgPx3kThEMCBNzSBqGw9\r\nvVUU+Z9PpxtpZJC8b+SzZIZMbMq3mVNEKej1YdErSwbQmBzFesDcxEbWCldh\r\nJrarKSM0n6GqciWk0Nn9BYjYSwDSIhPL9HVo7RDLNPvEBRI8NtsRzA2PBZlf\r\n9UTBpxoBFauaqL3GManr9sV7Fm/Ms+WRA+HzLCx6Q7HqLYqhStQRci/S2xbH\r\n4befbT1HuaNIRA26A+I9UlXWSNR4eepwbY10PU7H40vZMG6G+Zfcnr+fzwM7\r\nByouIMHsknAdY7aol/Q88CArEY7EwoLPRRPYWuE+a7Nlr/bCkKzEwbBPWVOi\r\n0sURjnDVGJBe/bCjgpojeI/NNtXLGg3mWNp6+Kch5u4T8/chBVxMq0SX+Ir/\r\noQDKtCgTSVd34zsvhhqRsEtpGpk8htxgFlzbXLF5g/9hDsyuFsDjUTt/kRZe\r\nMLS5QBeJXHwDCBn9jrjSGKtu2H//ydUXF47+GCqV4YKndyz5+3SLBlDhFO0G\r\n5IwFEsTYr+GkvubLmTR2feYrJSW8saJxDIzgao1GSthx+OduxIWJpNWV1gVP\r\nG2EGo2LiIo+R0X2LPnaNRGaqmMHRZR4Xczg=\r\n=6B0l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n[🔗 预览 Demo](https://unpkg.com/@alifd/layout/build/index.html)\n[🔗 阿里低代码搭建 Demo](https://unpkg.com/@alifd/layout/build/lowcode/index.html)\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text`, `Space`\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 CSS Variables 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"cd6f0a9411b28d93f7644e323ce8b11346290879","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","_npmVersion":"8.19.2","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"_nodeVersion":"16.18.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","is-valid-array":"^1.0.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.0/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0_1673408676538_0.2503112390944291","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@alifd/layout","version":"2.0.1","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"25d76dd47b35c784b0d8f4d9bcf6780b02c97dd4","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.1.tgz","fileCount":153,"integrity":"sha512-hX9SeAIKQDcZ5RkD5VTQ/qVRxMqb5wH0Ik50daeFKBclahO0WlZwAeEPSk58hy8C+4pTpOzmYnpBMD6BAmYq+w==","signatures":[{"sig":"MEUCIQCgpcV2BZ80Vsv3bOtHw2XbneHny6m5sYTl/MxmVminOAIgLZKlDNeYLlyp1GWp84euQLZNkkocEgwThWPIcdQBGNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5968211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5b6YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq6Q//QQN5HsAQQm5Ee/Y1nkzTLQOpS4WVd3Sjujh9rgENIcomdQhL\r\n59qKNApqZ6fN4uA4kb24nsXHvNVO7qHIaPUaXDV+QpF154voQTYQmIq7k5rR\r\n6kHuF/aHCzYE6bNdj1p9+bv1T0+eZcwqPPV2OAUj33FxlZ2I57Z6ZQJKnv7x\r\nIQv6nLDvTtKsXwMmS2JSpHbPPc/unk3L+G1dx8zlbkP2xp57uR77KjQu7feX\r\nNhZRj19adzBnXu8uozI6ZSyov9xCik6aQUZPPBn2V7uLBEJ2h6FsvKfSjEWy\r\nx2Ns9tdLFvkp7rI0CGmOw3Ja9V3P2PlXtyZsN8grVlfzcI8QircHMW1A766h\r\n8lBaELYfDIs/0nxk15w4/oNZd3yJcOksgatW5mA8WFTLOblnyp9BCoPprp99\r\nHGP3ksV6qyVL4eQnr+DFsptNmmwNbtCsq53ZY4T+gNDwnz/hvyNlNn5bofx6\r\nXxY2TdN/ZblpQDWzDBmbG/qYorgZebeUkMpz+6YSC+98gelMotBFOH8Yx0e3\r\nt0CZF4TNP0wiLZpLGZCrNat49yhLG78Db1DE4hfxXULnSO4rSxkitUKn6Nlu\r\nL78cc5KFEOXp3Ey/mRXigOyInZXI0Hi/MdRjZdcy9jxwTjYFbOrf//c0gDW3\r\nUhSbp+GuwGDGwu/oKhO64oV2LJq5gS58jAQ=\r\n=sVn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n[🔗 预览 Demo](https://unpkg.com/@alifd/layout/build/index.html)\n[🔗 阿里低代码搭建 Demo](https://unpkg.com/@alifd/layout/build/lowcode/index.html)\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text`, `Space`\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 CSS Variables 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"87f7f2042591a8fae392a67033b29230a1338f51","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.3","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"_nodeVersion":"16.19.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","is-valid-array":"^1.0.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.1/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.1_1676000920347_0.16574847093029876","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@alifd/layout","version":"2.0.2","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.2","maintainers":[{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.2/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"700339d77e5d127fe9aafe05f2572ac050db9154","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.2.tgz","fileCount":153,"integrity":"sha512-33ytCcuQ1pu0jJior7WWPoJNKNFOg64pnUBfXK5b0BncqQdHZs6x7Yhyh/XBHqKUjSMJJ5HGeE2cQ7DnCAdU2Q==","signatures":[{"sig":"MEUCIAtHtSfe+DRtLLQqwoCio394MLi2DCQ1R9Bt3PsAb1MKAiEA+9SOqx9++B/uuo4mGFCbfEej+nYomX5H+PL11vlN1KY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5949462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/fzdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVRg//cKMA9XlJF6CH6JbKpDKMs/X3VeC3Bd0aruOBYOFqzrO2EYF1\r\nkw+vnjADtcOY4lFi5qmsafjHtNV4vwJBgmxNNaYvNPEoxc1/Z7Bz/6ltu7fT\r\nutyEUtIKcxn7aWyvCf/22yZdYMXC+YuKmIku/Gl/EPx+MJnuVKar4ICAop0s\r\n8r6pLNnFWE706O9SRm6iLaRRCPBUDP6IsVB/28iOoKMZb2EBMr+y/qinpLaG\r\njlkTMZ27VXLoUKnB6aVX1y8H6mEZm7bFtJSACmbJ9pXnBdqs9qGPT4YAzbpi\r\nZ5Mmjel+f14bGmhypDMfKplXbrnChpjj3+i5JrCy+f7nWt+lIsW/ysE1rIog\r\nUhGpjirf+XMnKtnTiF1ZYBrX48RgdsQwR0MU+xnkgmKageKBJ5Qoiz9MVn15\r\ntHhuPmHpGrAinN3KPumSUrE/dos2hI18uh2f6TzudznNPcJUpJylmvsgRCDH\r\nIllTKSR4ZYjz8pCm3TOFJuFfXjhMz0oVso8BLcgmyMAsG1shslU4+lijWKFH\r\nqV8Szd7LSt2K+iJoQH7RuCRUmJv2gYXlKGqhDmnA8i1wDQcnhK9fGuRCOWzi\r\nuXLLgebjZFCipi4fIGnOPhUhqge71zNEVTGh3fJtjaWGu0oX9pDNVcBacxFC\r\nAcCsxV6mW6OAZj7AzlmMV+wjX8+4Yg0lZmg=\r\n=/pMw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n[🔗 预览 Demo](https://unpkg.com/@alifd/layout/build/index.html)\n[🔗 阿里低代码搭建 Demo](https://unpkg.com/@alifd/layout/build/lowcode/index.html)\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text`, `Space`\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 CSS Variables 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"2e9279acdaaffefb765c7b1c6d9b7d282624187e","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"9.2.0","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"_nodeVersion":"14.21.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.2/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.9.13","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.2_1677589725694_0.2764050423899147","host":"s3://npm-registry-packages"}},"2.0.3":{"name":"@alifd/layout","version":"2.0.3","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.3","maintainers":[{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.3/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"76f8f81ccc7995a44b69ed6b444bd130164d0b5a","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.3.tgz","fileCount":153,"integrity":"sha512-VUORmNNn5aenCYy53mywsTdCb3pN/IkQDM8kvb4KZ21obXx7ztdb0KzM46OJeCiIFAhnQSOYiM346jVc3YB11w==","signatures":[{"sig":"MEUCIHS6jHMq1DNzaV/nEjVjOWyn6cKYja2BBppLu+lTmDRsAiEAmtLp6RJC+niYDALL5yuU8vWcXcKgKQMyH4dygiRG23I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5948096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/sfdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPSA/9GIsGIcnPifzQiY3+DHJ+EU/ZeQxXsV3ihXVefCHC30tLznH7\r\n04srqpYsj7EwwMwK62QnWcec+k4eFPS6f3tmIJ1wlQ4xerIZxKPkkq0am+00\r\nbfjnHLZlSWXFRcxYrnS362Mm1AQjwHQJkaBlzSkqL9C1JMnCDrX1Bbsga6Pa\r\nGHqVeFKKte6ZbMTqJcMGQoSRTLkH+eP7K6EeO5zaFZ78TSHlie/pHl9e5A4n\r\nhSWaAW+kz7Vu1a0syBqVpHBrlaqofPpbkPalznpiH8SZoLBiq+d91VteQMuU\r\nr+vTWRkOWNN1gMyvddQvYXUGtCfl//JGIJbU5U9EzYUk8D88qDAXQYc+blPt\r\n3JHZK6yCR94THTlWUbnUDpkvvyQ5xtyYBZ9JWaaws12ujeWwVK8tncHE5ZJc\r\noD/c/HbdHrvdxd7L9Y9g3iVM8iV0PGfA0CxdgAZr6cFn2blSkCwDC3d9LN5l\r\nnskeyzeLKwpvv8bxArKIMetmlTKlxVvLtOFkoFIlIfqiR+gqoNE0Vzn+3zcl\r\nFnddVEfwUe1wjHhbVyQXtjUgZrQ5HCs04e4Sn+9JXYWm6hjWp5eLJ/adEZEG\r\n9IGA4uRvd/mwNLu7egNNnZuPP9n12yCBRmMsB1X5nEblBfTVrIEeC0QcQxi5\r\nBSkBFG6m2+ySzMxr9qJeQVN3C1u71mSQ7NA=\r\n=r446\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n[🔗 预览 Demo](https://unpkg.com/@alifd/layout/build/index.html)\n[🔗 阿里低代码搭建 Demo](https://unpkg.com/@alifd/layout/build/lowcode/index.html)\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text`, `Space`\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 CSS Variables 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"ca4e659b1dc5c2e2bed1f5d690cff03dbdb54b5c","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"9.2.0","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"_nodeVersion":"14.21.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.3/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.3_1677641693210_0.12202373778472064","host":"s3://npm-registry-packages"}},"2.0.4":{"name":"@alifd/layout","version":"2.0.4","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.4","maintainers":[{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.4/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"6eee01f828a7be94bd2fda7a29285ede23f54e41","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.4.tgz","fileCount":153,"integrity":"sha512-D1e5AxxNx6eq3qGoqy3fIoFHkblR0o9cZ7JxkTRN37iVmgj37erM2A1FGcBA6180GgqfF/FIL4W5RWeau3BilQ==","signatures":[{"sig":"MEUCIQCjMw1Rg4jty5Dss9D5QnRoiLB2YRy7jHSPWlmVuXwfrwIgX+fKfxgq1KJvJBGvhvQEZEwLUX17z+DYGh8BAcROWSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6046994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAbmPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHxw/+MTTOTQelcigPRyiDfw6gBu8iosNzAXK7go9yf2gnU1P8Ju7S\r\nM1meIKENf2AhXZAZf0ndAYRYHilmIy7KMcxvIoW1Nu9cA48hs4pb1QvVAc+W\r\nca+hz6DX7++MLgwv65Rs7/E9HHEiTpDtBobQ9saTv2WQfSGBnEMUMWA+Ayeh\r\ngjqFrNM+X0ce0I4xxzvWl1alQ0VO4A4NvCST+qm5RMcQpyQ+BV7GwqfiYaDK\r\nlRJ9xYNdPjUF45l+V/DwRAObJmRI5IyvpQXFbXVhbD+K/MypsNvyFPnJvk2Y\r\noFMaPTA/Y0zdd7luvCu7GMfDzz6uxY9mGUeve/pgXuqKBweCr/GdY3MiBLdQ\r\n6IbffKUwvMwK/7Sd5WVLhc0ZZh+8U+qh+bmk25p0MuCmtur4eDY5LSwG41tX\r\nLzSNEZGfB/1FL32JXjMpeghBik6DaQbbCYZT0/PmSYIoPA5JM+mx4XBbF9fE\r\nX/AbvEOX9N67fupbLAV0jdyVJHRY/gMjA+hNqKCXTdJAlkiECSBN8ePMvEAP\r\ntfQvj5IjxMaoYhA5d3OhPNmv3so/wi/giwU9FGEQ7aJP6TXGxxiF6+HyoVdR\r\nNIAaFWwsSv7H716qtuYOdGi3UwZ9mUOEM9CiBBmVhctiGRKyeFf5Sa2hwc0r\r\nwguwTVSVNISRGK9hOSj4+2iZ147ZtN+IxrE=\r\n=5kGR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于搭建、源码，嵌套特定组件的布局体系，目标是不写任何布局 CSS 代码。\n\n[🔗 预览 Demo](https://unpkg.com/@alifd/layout/build/index.html)\n[🔗 阿里低代码搭建 Demo](https://unpkg.com/@alifd/layout/build/lowcode/index.html)\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text`, `Space`\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 CSS Variables 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"77a0bab58f43776cb11e2b913449d59fd93caaf3","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"9.2.0","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"_nodeVersion":"14.21.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.4/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.4_1677834638981_0.06869587618660522","host":"s3://npm-registry-packages"}},"2.0.5":{"name":"@alifd/layout","version":"2.0.5","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.5","maintainers":[{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.5/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"e9a2c7cfee86c274956fff701f3e9b69cc1fe58b","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.5.tgz","fileCount":153,"integrity":"sha512-X6tXy6VR7t2ayg74HVpnOU+/LszKnssy526RcwK+WiDXm/9pS2JY9KrKW65BQs5b3NKX/DQdr589M6ryuQClBQ==","signatures":[{"sig":"MEQCICvNRh0l7PpAFH4fN7fZHHoHZywp/kbyKSVhDFVvcdiqAiBiYjF4LCrrBvQdcOtUL2TSyMnegcP1RXHocjupNpALZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6051857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBag7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo0Q/8Cy86L5BE1arXaA3/kwn0nATbDEXmWjUwljX4pCA+wVAQvQLW\r\nT5b2n36+BODfhAvWQOhZvZLwnpfpKwlLxfdF31eE8DKrKBnaECWDVHxDS6+8\r\nB4uJkJySTpuN8FFtCsDAai0qdIpMJGe2BbtFNO9g2dUHmN/5/P5JoK/3pZMn\r\nIdDSWetO6O29AQTYiQV8rVi2P1jUpJ5kWA3/vqdZiI7X2LL7IcQ7ycVpzWCd\r\nBe3A11Rv3GEvVSOS7h0QV3IZQytPMgnp1jIVyxTAXpADsnaGtiozKsQWMT4D\r\n9j+QxcJk691VLHGV6aRKdNwQTAuQanFQpGfFCMb1lj7lJiXLxOZYwTvKUP2B\r\n/ohDRJj5QLjp6qPEqyCMfnpdm1xIbl7kzdPu5lFj1D3h7lmGJF35jDjGqDSW\r\nB4AiPQbZrm6iIG9kdV8pJUb8ZzCFj3pNPkYTJoZSaAgiRD8hYkbZmx9PNx7V\r\nN/eNxV50Nzcc2iGc54s7VfCmgbX1g/u9uKPlq5Hd6kDKfLu4i/p+ZWw5dJnb\r\nuuO8785KRE4DtFjh/Zjan5NU6GlOF8sU4wM3P1pnoZrnJgDd90fV1SVAlq3T\r\nG+OSoGPPcewVB1u8SZxYAl2OE1mZMFXm/HyF1aNxgE70xTkFILUGL5EEs/UH\r\nbLO4JoSnZfR5kAKjN8kROhaf8fR9S5p7EkQ=\r\n=Ml0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"354a9ad66d477ae44d2292284302c10a12fce792","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"9.2.0","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"14.21.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.5/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.5_1678092347345_0.09978436189566864","host":"s3://npm-registry-packages"}},"2.0.6":{"name":"@alifd/layout","version":"2.0.6","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.6","maintainers":[{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.6/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"e18b4b4cec1ea4016594eab72e0d9b4d043d7f4a","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.6.tgz","fileCount":153,"integrity":"sha512-2MU8JSv4rmw6RHNUewcJx9nAPm4MTMNncIEgzXlizxFiOpR3p7WibCuB9KwuFVOlRzafL0jmwsoTVymZsO89gQ==","signatures":[{"sig":"MEUCIQDQq4JBITFZ8trcVLhwlqZmHq5cj9Zo9O1G5Bc2KEmybQIgN7Dn0teSZuYqZO55oz1e4Txh3NU2Ds4RJI85V/uHwNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6051545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCZK8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/Gw//VDep9pbD4uwEEFjeF6OXkk9LWGSruXvy1K92YOBgQMVzi1lU\r\nJQR7DFOK+i6GLdNWKUNitpcTPAKTPYHs+0Ql0TLZIGoHTZglghV/93f047eS\r\nw41muN1KvDGygnvEw3og/f1+ni04DebPeJ6YMjY4ZEVICUyWe7z8Oh6L+xWN\r\nU1o+yvSaHvF/FTBMOWtkXPTCqiL6YnZEw+4wonMhDyxxzzC3hRihYCBhaEbQ\r\n6pYHzfc8GOuaPZvU+H+nuVx5Q22NXbo6EP8RlHj56HhGks5p/FZ+LeX1ka7D\r\n0jYQTIMbjYZnm8Asd5e4XbAn0f1NaSV4ohgC7p1rZK5fzwES8s0+e2j3HaPb\r\nFw1ZthVctvMWzQjSzvNA7uNYGI/d1Pxc0AJKgPF8VK1nxUyirkEjN43+R4/9\r\nzJFdfGiaruJEgWdb8JEwhWpoyed74UBaQKOhwEmYVHza4aQJk+iob8ALVnK3\r\nWy/Ll3yy/mox7pAuNqcm6fv0re3Y2MSVlNjGHeEG8CQ1VrBJEMrmPcgoYzOe\r\nFVviYRaQ8nDeDK7roPfdMGGYzBrS839CL7+GOpJ/ut16i0sRFmKtzbmydfCu\r\nOVMF40z+EvYZqVZfS7Gs9OZYufxFsB0MegMF+9h0n9lunWqt/6Q0wtLzF+tC\r\n0qj9N5L66TioVpUXzTZxJEU0LXbjr4fmrmc=\r\n=ZCtq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"fd02d88ba4608e4c1fe788b65080b6ea81ca0e24","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.3","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.19.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.6/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.6_1678348987817_0.16485786168440741","host":"s3://npm-registry-packages"}},"2.0.7-beta.1":{"name":"@alifd/layout","version":"2.0.7-beta.1","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.7-beta.1","maintainers":[{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.7-beta.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"05004526cf6a11d1a123cf3a40f2c7413fbafe48","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.7-beta.1.tgz","fileCount":157,"integrity":"sha512-ZhVfqJXT9LscL/3w3GRZSXLAxZFN+nrefdfIqczrykuGAHQg5o4Uj5Po/CeXATxa98nQzcEeJvauoIzO30u7LA==","signatures":[{"sig":"MEUCIHjYQhTqFvQIE7SHQlAfhEiyxKN3IxddUX/gXU1Y5MdeAiEA0BAx7D1L/PFknKCBsaFMeIr+wMmPSsoS6drh4uMju38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6052485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDslRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaCA/9HtQBsLnSwPElJ7hNZRGdNIfDy54zO2CjyV+3aGUtRZfYmYlF\r\n0migmFiFaBoiDHX2368dntjsuk/2N8WZAEaQ4CbLbU34N0+Kj+WGSkSlL6Tp\r\nehpWqRt0rsQgZv1KA2PZlg2IPkk+JQ8A3LT11fiefH76ywFcLXZKtlQ6SQvq\r\nmMtiAcVMDbsFeODQwU5B1vNhYoX5Y97+G5c5kZZH6hnno7dLsgAdkB9iydW7\r\nR6T2dfLUWB5JXJT0qzv0OFEBq1bjWySI5hUtBkGzOlBPjEKJycT74VYdYjGw\r\nHiVjULwbJhfB4k1BTR94Lzt3AxKFXSCEKfdxrfqqt6EQafVjoRzqPI1Uwfo9\r\ngarjdYGodmiqDvcHa823XFRwXCRmitrm1u4wItrKT9kb77GdcwpTd+mDAffy\r\nNhL9/nNOpCtX/ttLzlxmCBSh1m0lkm77FWs4z55gEx7btHau9Cdy4kvBzW3w\r\n1nBF2EdMzB90qYIGW0D5mExdDeyg7qfsfFRO1gFPkPJsK9tPpUVVWHdnpRPh\r\nuyNDc7ybDekFnTNBT3sKy4Vd9gAF6bOOsLpARFIjtWrUbqKnbLsyQkypxZYP\r\n1emQ4t/qkjnSE9wH48hEqrWkmMgZWuM9a0YEfGDUL/ZXqI0bmIHxOi901A3T\r\nyTBU1Ht9p6DW4EzVcWxvHgnkUGS4yPNtZDQ=\r\n=rft5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于快速完成页面布局体系 (低代码搭建或源码开发)，目标是不写任何布局 CSS 代码。\n\n[🔗 预览 Demo](https://g.alipay.com/@alifd/layout/build/index.html)\n[🔗 阿里低代码搭建 Demo](https://g.alipay.com/@alifd/layout/build/lowcode/index.html)\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 使用\n\n自然布局提供的能力分为「页面布局」、「局部布局」两种。\n\n- 页面布局：会用到 `Page` `Page.Header` `Page.Footer` `Page.Content` `Page.Aside` `Page.Nav` 六类组件。\n- 局部局部：会用到 `Section` `Block`, `Row`, `Col`, `Cell`, `P`, `Text`, `Space`\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 `CSS Variables` 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"bffebea48b71f34bdbbd58f5fa10071b66c8ba11","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.2","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.59.x"},"_nodeVersion":"16.18.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.7-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.7-beta.1_1678690640851_0.04680439421600613","host":"s3://npm-registry-packages"}},"2.0.7":{"name":"@alifd/layout","version":"2.0.7","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.7","maintainers":[{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.7/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"45549253e16f62218077379450e2c9af09cda3d6","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.7.tgz","fileCount":157,"integrity":"sha512-wStAQKDlFr/E33ApdciDmJZsyG/LBdYmpNYJIolDNUbYIVL6i1lzkFQ3mQcCVd/8/XRDCxX3ae0JWn5RjrVaHQ==","signatures":[{"sig":"MEUCIQCIP0umzKcqOkMTRhyPlSiSQNGTQ7aDwwfhXplJqZQXNwIgTx0MEi9/a7mKLtkdr9EiZ8yMOMB0fs8A8LiK1jzCucA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6056842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDvIlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1vg/9EtVwFtkRnZ/3V6D6adidtvN0Cr/pjzHWkYI3Ih8P8lSnyGuB\r\nl0UDMUbzwaHJh8Ld6bF1YgYOW7r9tR0RZQ12Til0hw+pBLOs2ziUcBVx2CEa\r\nKifIjuZk5imLtUgi/96Z7awmeUN7lfxSUAfDmTpTkI+7sfNKrF8xhbqvtkGT\r\nsRSIChCTlbLIRh1h3tv6Z7GxuQw+OO+rk6617lBo14TwZXs8Ufq4FvUwBHx3\r\noBBUzIKR3qPDO/AgEalhfEAjjg8jDO0SdjfklldT5tziWutpkOoephZ+19jj\r\nr5Pvs5agdLSNP9U3t6udGJ6QSfVE4RIB8FaxLi1/4+39WIqRQGCRUSnDR/n3\r\nzlutYfVHUocc+FEdCTfxxpcWcBpv0jJgW9RTyJ4BJxWQoEWsq9F1vpWUUIPd\r\nXnsc118UY/GdqOirhiyLDjbMXdCldKG9u+ImUendffPHZ1XobWOlmi1VhpG/\r\nYlRD9oFZwVvFh860U2L35PVf5uhpKwvO65VYLh8JhlukuWfQio18aOe9RL6B\r\nrjBK13PYvhxaH8lRZNikOIWFHB4RbO3CHPfxFJN6OH/CzAS/t+iVJVcVkvDd\r\nS3fkhtaGiNuMtnREJw8YgrGumdtsmI2L4EdB22Q3Z3Xc8mbaNdfL+qzHHWuE\r\nIHWWnaU4fKcqiCLwSXqyzsovn6/RmlrFvZE=\r\n=jOV4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"396e483e8a6bbe35daa45074d56cc11cf6db0532","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.3","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.19.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.7/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.7_1678701093439_0.367166229663616","host":"s3://npm-registry-packages"}},"2.0.8":{"name":"@alifd/layout","version":"2.0.8","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.8","maintainers":[{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.8/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"ad4e1d315684a856d5a4e7f744d48a495f4510b7","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.8.tgz","fileCount":158,"integrity":"sha512-JNwtNdlkH9ulvLiq20DnxVPAGBOnevPxE+VQeFw2HuTvZ66NtwoFuj7cBmrV9cwT5Zw3w3fbcxz4LR0Pe/oBTA==","signatures":[{"sig":"MEUCIB4lQC8IKNY9+jRTcH0NoSicT4SjvzaHRXEb6sgXikr7AiEAtUNmcU2kJbHO9/+4Np+PwSBTZ/uFs0Go3ttKFIKCOxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6054979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkG8mGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdWw/+LvWctTLzx7LLOrkSoidmn8BSpRZKelFaWo82taa/XsX9CcWD\r\nKvJDuVkEJm1Nrz6fGKIQ+eynuphwZCrkqZJcf92kkSvQHrWJ5XUx+mNxqxNq\r\n1LsPmrwPHWIq1+qNKyQMoQugrizCHsK+AjECYIbvxA7//bflcwhhBDFzQ3Lg\r\nlqWRg9StJdm9bZul5wJ2vEkW3yxVWCtAQpOqlynhaniezezJmL1ztM40i6su\r\nv7z+7JTHvYsdJnECAsWiPF5NkHTf3QKTFOvz9x7AAkO7eS/PSfX0QxkyN00k\r\nqMgeBCLUFEXpydfJMDt9/W8bM4gGXr582DO2GVfIANU3r33Z65ZHMKe7NfbS\r\nJkFnSnSH5Jo1ugg1G6FAgQNiQhruhSEWQdP3I863yLTFQWK7XW+Iy9Ui5knY\r\n/BY1+0Hzj7qkzO/FtPhIs5KtGMAJebFHVeTVlpUHPMy13+Lu70i9Gz75ilt6\r\nJH7LLVm/kzKQt4tpDzdYovW3oEDrdMF0TGY5PQI3LnCuELmXsvHB0ph+Mh+z\r\nc6xE5va8IelYFUDmawf2ToEMAzRr5aM/vToKxwoWeCbTgvb6OLPJB6Q3x4DM\r\nWYV9wI3mFfkCDMwfQCLjSOCOxjmkd3ZxF2/uQ9jnWUq3tt2uROn+lTHUVFxM\r\nPGActTkrY/msAjEPY9CQbzi/oi61LxWlD+k=\r\n=309n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","gitHead":"9a4e642da44e1f2d1ddf53fccae846c7619edf44","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"6.14.18","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"14.21.3","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.8/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.8_1679542662461_0.4141176037865619","host":"s3://npm-registry-packages"}},"2.0.9":{"name":"@alifd/layout","version":"2.0.9","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.9","maintainers":[{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.9/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"047026776c61d6ac772d2cd33dc6e8692df1f01a","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.9.tgz","fileCount":158,"integrity":"sha512-EOpV1O6uFxnuYf28XR7wg9Kawhq+AYrOjDDOPUvo6E5nqxt9dZpmP+ZrJmPpYmeKhq7ZdyzEHbBTNcmExi0qJw==","signatures":[{"sig":"MEUCIQDwF4VmK1bBE0hU920Y0tfPdifOOEaAyEoDhvZPyaLxwwIgN3695c2yiz6gM7gWtxQvDivipl16W3Iifbdx0mtn+Ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6055007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkN8noACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgRw//V6iVCmOA107hStsl/I6pVVHwJS5kyRgniBtPatpEqFgmFOqD\r\nu74T9HtNmtxeyMMqePXWmvyeQHplvOhVF9NArKUrKeQ3MvgZEyzMHWR7mwCL\r\nVCLn6p+tEblPgSoxEwQd9jp4OIiGm+F+FolodJms+v2MiKw2J3bLTmX3p1xC\r\n6NbiJtKIeTRazd/kuaz8TylWlzlZDCxDTooLsv35J62tN1uvFiEESmhPbrOQ\r\nBjf+2KrKjNs5TxFiWTLlv71rH8K9LxuJs6afFOHQxNyAjJLAk2jDpQQyuIPd\r\nCck4aHcGBfT80EUnOYDXvrs0n/HfK7DeDFxgl58uUVrRbt/NV0wQFt13619v\r\nxQpF8SzaqN9bMYUJjCl2xdSVnSWbW0gowHlgIkAGISb+iC42junILk/tVdP6\r\nQcKHarzmSD+UcZBWfRI8SMXfaWxFMN2zr/QWm50O7Rug3kAI0kB+pwebKaPV\r\n22sm4tXS3GhrQy0I+6ZMSuvkGSj+Ds6davcH2bg8cCyOYNTamA9XOw4pGRGB\r\niuZssdwylahtWbVLZDrejsAgWUAl5dOLv/qSVZieWIMHF8sjxtlnCosnegbi\r\n7lBhGWsUAPoByNkrefArKrISQQzGu3DCJKaNkebnoJ6dsO0PGctYxfP81AFj\r\nF8cDF1RMHpS7HnLZV+px5N8UIH6eVdhObMQ=\r\n=cG3B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","gitHead":"d06e895e989c569b20c11f769f6a74c060a2dde1","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"6.14.18","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"14.21.3","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.9/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","lodash.throttle":"^4.1.1","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.9_1681377768536_0.8678758471502457","host":"s3://npm-registry-packages"}},"2.0.10-beta.0":{"name":"@alifd/layout","version":"2.0.10-beta.0","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.10-beta.0","maintainers":[{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.10-beta.0/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"f108b73c08e215a8d7533d55187367318b64d536","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.10-beta.0.tgz","fileCount":158,"integrity":"sha512-W7TSRxsGY/XwvSn6btG06Hi0sa4zqV642GQb9HJEQRByy/uNJp5FVn+kkVCfKNmio+qu5keDHcfjJR9X4NMaNw==","signatures":[{"sig":"MEUCIQD+LFSfIXuIF2UDpmGsPLmlblTMRzLEZgtMv57uPoQ3YgIgUNZEmBuWblBlUpP0XFir+qAsg5K6iE8HJZiFVfpB0Os=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6055310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkORF0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtjA/9GDbqTFmffIynw7eGPLwAL4Pr41X2NhxEFTRiFaRCl80nc/hv\r\nm2cTBX/xm28P8+lWaZUWO13sp3ruRjoDykKOIVXHK26AaFHQD3gAirc95Tzc\r\nLArrHCJw8UvEblxINu+cVfmSdgD3lNidpEZIsi4Ngkq3bv+LNYNjBcd9QGNO\r\nUiTO/sJ7k+Ug3HBw+vh7LW/C7y0Q0/W6wAtq6I/SmTOIxsKLQyMBblnZjg1j\r\nuT/9N2uIWjFizHaZGGQxJt1SO/8TW/rFNSFDmRhej9wvCeBAOcDg8siUKvxC\r\nY+wcKJmQHrCE7pr62DyezGpBPTBTwhH+SYYaohbLdOVB3MpezHUA4LNnxwp8\r\nAe/xgZC9/jqTf/wOJTTD/m0RxvmhBC8BjNm9idAGbWKWiVPqwe2FTkcScLEf\r\nxA0tDrUcmSYSDvP8xcfalOAqKmgUWGlkImtCAJ6r798KNq5Vv2/MHU6mcGls\r\nRvtev4f67OZN60stfPt7OZRIR6v/Q94f+/0VKhwfge8JneR3ZNNv39qaiaBU\r\nTBMQQLUSX8witQG93Kk5obwk7Otqyw37CSSpRcDqM8OeMosLLrCCMXe4rafy\r\nbYpd3HNIpDCS1jr5GL+AYKJIWYMUv3vPI/eoqy8Afcv6pE+X1mfgSYhoMccC\r\niBV8v6vWVXypFocfl5PWqCjdFFSwA8194hg=\r\n=eZA0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于快速完成页面布局体系 (低代码搭建或源码开发)，目标是不写任何布局 CSS 代码。\n\n[预览 Demo](https://g.alipay.com/@alifd/layout/build/index.html)\n[阿里低代码搭建 Demo](https://g.alipay.com/@alifd/layout/build/lowcode/index.html)\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n## 安装\n\n```bash\n npm install @alifd/layout --save\n```\n\n## 使用\n\n在项目中，引入一套 Fusion Design 的 [Design Token](https://fusion.design/pc/design-tokens), 如：\n\n```jsx\nimport '@alifd/theme-3/variables.css';\n```\n\n> 注：此处是为了引入布局组件所必须得 CSS Variables, 只需要保证上述的 CSS 代码生效即可，引入方式不限。\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 `CSS Variables` 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"594f5ef1cb7ccc462f29098ffeb6427052fe8a8f","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"6.14.8","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"14.15.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.10-beta.0/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.10-beta.0_1681461619835_0.1308865665378791","host":"s3://npm-registry-packages"}},"2.0.10":{"name":"@alifd/layout","version":"2.0.10","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.10","maintainers":[{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.10/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"22dd5df9efcd887b6817df1f00a3fd47775a150a","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.10.tgz","fileCount":157,"integrity":"sha512-W14z6gjADGkbhNz7x5KOELnDHaKf0wZ6vB+gRRoMkWSPcFpUvjqCLgzBtw+nAIFPfhkYBr0tvI74VjybfLmwhA==","signatures":[{"sig":"MEUCIAr39OEJskQMG9cNmOX+6JT79JE2dzY2PnrQiZJguquLAiEA1QvhBHEC88NUoq6ZnY9b3sFKtXbunQ4cZtVDf4JgzGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6056745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPMBFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjgg//ZuS9TQHv0E9umy53FfTi2M5euoiAK1FvTrZ36oZbSKiTzou6\r\nI+ZiT+TkqbtUfgZjaVoywdC8LiR1JNSu5mdkL46/iTYZFarHDR2rIZayE/Jq\r\njQRNPQBQttqgGM5XASRH/DyBHp6npN4R6ANShg1ev8OHQXKMZxtBArZHA9+C\r\nSAcO2+NOALiYAhtBkdj8o5SkaSsgB7MeTgrkOUT3vw07Ebg9cH7Xba2smYkM\r\nwsfEbCx26reZSGXfLjD2hagpdh93tw8DPUKGzxqSCgMriu4xmBozvic67WpY\r\nec/SMTKhiKxTAjinrI1pkZq+pu9QIY9xHfX0cTO6l0IiQ0p+7Amn6665zbQL\r\nOWHyXvvYvzvoHI+46JTI2YigM3dK1apStIQY6n9QnDt90xFz9wOmISHP+SvT\r\n1yoPpKouBNlJ6IoBptOft10ZFjCXVREQpIrhzeIC3hsIAJr19MhCoR44znfh\r\npMzdQOQ6CVPOAdD6OOv85Nxwov1BxSztyQLMAIMhh1O4m5J44cJjxKNRnEqZ\r\nVGfzTGFqb6cv5N94l+KrB1Zht1KEtHM2R32q4EsU8mBnGCnhiJls4lsQladi\r\n8FD2J78Tp3rq153g1sS+sZXrPlYz8sbxbTRYpDHCiPcjQpz79SYEiOU/eAP8\r\nxFRcGQ+e4vKfhOkE4iSVZffPnMMOAubfrRk=\r\n=v/ve\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"4ef0d606bcfa22411aa22e8baa956702b17692f7","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","deprecated":"inappropriate breakpoint config","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.10/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.10_1681702981352_0.06421337634053148","host":"s3://npm-registry-packages"}},"2.0.11":{"name":"@alifd/layout","version":"2.0.11","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.11","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.11/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"bf43d018fc2055b7357c65f767f449436a400aeb","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.11.tgz","fileCount":157,"integrity":"sha512-+EFemEePsIK0UZ2/6fzSw8kM6soZ5pORN6c5gSA+Kp2s1rQz1onPZfHLUOsL2iriAIAnqxa8dZ+0D1aFu7cw3A==","signatures":[{"sig":"MEUCIGNtQdTq2upSDrY3+kwaXiowyGlG3UokNQC7yE7w7BpKAiEAuAoXC9j5U7a0uFlUjT4WvBCprX/raNO9nhB+/lhTccA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6057147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkP0pIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKag//Y6fGIaB5wxFIfD3ewSJis7/kf1nG6UNBMpjwfogH02kw7+Ai\r\nCzDxhuR42O+1dDyadCy7fFEYOTfuBg1Zhh4s8FYic/wGrV1mKVgM0hDmZTZh\r\nwem0ub6cLkj30MgsW3e35cqoacAVVuHBpJQrGd5zyoTRALNSKsYVI+pGFRJX\r\n1ykiGbe4tblP/CxeJyxg2mMXZC63v97M7PyKhBhMBMFCINuERrYE+hyZ1S3C\r\nhQIbJphsb18Zpm5P9gpE/EB6sqempvPGQyi0QJM/9ZMc8dtx8WgCp5Kpi3vx\r\nCelq52OQUEfQ2ddlQjCJfBj9HAdSkmiUwPz9ihY6OChLTXx0CAIC1MrRkZ0w\r\nqiDgS7w0V2G9HgO/M0Wf42BZ4+RDk8htdflAH6Wwdocq9WiTVH6HiQBNGLku\r\npHqCzdluDYOI/LRUqFSz7tRjTWsZIBvq7g8kumouftCMLYvzi0u2WZv58BrR\r\nK2Sm9khmaS191uxW2+Wg0Z2jFyx+iWKFpg/Wh2UGtmkPJqSmfwT6b7WDGMiF\r\nE8LJZP1VoF2BGpq2EJSjpiRtzJm8W4O/8yLB0uDvs5vjMe8RL4ZWHaqi9s+s\r\nIbz+4VjTeLp464ZQ0Pxu3oQDhiLRcOa6WdphsFBk3QjL7f52MRSmMWZ63x/0\r\nsGJ6XlajEN2v5JQL1eiyXNv5Z/+zB2HfyVY=\r\n=htPe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"ebff898aac06a0c3a0be53329f7b190e61dc7ffc","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.11/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.11_1681869384568_0.7873715009610991","host":"s3://npm-registry-packages"}},"2.0.12":{"name":"@alifd/layout","version":"2.0.12","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.0.12","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.0.12/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"8060c316b6615f02f12b7842f2ce087364da5f68","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.0.12.tgz","fileCount":157,"integrity":"sha512-5obfNrOwDwhUyy8WGngDFQ/KSw2i4xJyf6oZYce4AqQkaIkHy+HX+U9HrdHLHHcC0gYVa2aahV2cLtyQ0NJT+w==","signatures":[{"sig":"MEUCIC/jVjT8dLX/sBj7S3PGDv3bf7w/DzbnF7hNl1YbLnWdAiEA4d9WwoczfOXAgrW0EMYANz72wx9bwRSxM7W/GmqyVjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6053993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSJnvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+8hAAm4osDkf1ngBnDk8Odcm3AOCi4vRwuBSnYSnNMEetYL3EpKtw\r\n+A57dg4KfoenbHHvxIWYMFK1SdT7hTshQSnerkKbZwxECn2VQTtOLe7N5kfv\r\n5Nauphv5/U5Pe7J5jm5UtTdpRTjX3aQ/VZT4AD9JMyBsE7l9EvhV4sx+G+Ox\r\n/eebs2iHI2hbOElaHD4GuS8UkEiCCkyt7lhncK8qOKg4nd6j2S6Q5xM7+RSE\r\nycrOHt9nP6OmGK8X+XqAauhgBuesmW2aeVecXA+eUwhQMRxOb7Y718rSKwLY\r\n/LH1ddKozazwsBYXuNTKOhOrdgZapNy/SVCT/+ieQGF+LpRonGLUscLQKdCu\r\nx8lRn4rKpaBJtPGoA6hBKHXmY/yYnawzjVXb0V0hmzywjexmEXI5BZR/5ICH\r\n7SSmsbofbwDsXA+wvyIO+vA0ZanIgTYhrfH70ri70h2GfxaQCbrslJED4XWf\r\ncPLlzySGSsQL63kz/joYXwWwFkBq9Wrrjeple6QZre09yWmIKul0WxwDfH5C\r\nTjxsIrbDjtN+c1Yqzzys1MQUPFxVXuJLlVCjUprEw1fwe6H2BQNgz8J1CwMm\r\nSRUASZeZmy6vim73Bj9FmTKN3ifcVo48lvvJm+iyqpubgFy+0xThELEmVB8g\r\nU3HKRjYoExVc7bjL6oHKCdGE9POlqmOo+Cs=\r\n=zFHz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"d10e659bb6022d381e75e21f8c76363853ff0183","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"bindoon","email":"bindoon@sina.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.15.0","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.17.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.0.12/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.12_1682479599659_0.7572512949872274","host":"s3://npm-registry-packages"}},"2.1.0-beta.1":{"name":"@alifd/layout","version":"2.1.0-beta.1","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.1.0-beta.1","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.1.0-beta.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"2fd037f50339ac722122f46cf8e46c0d2b4e3d47","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.1.0-beta.1.tgz","fileCount":157,"integrity":"sha512-4gHQTrQuglgsqatb8RTmv7EfffZ5GF+R7MHxkDwCgfdqFDNV7DEY0u2LsoORUetgQSoH3UiHpR2LJfMkhWYpWQ==","signatures":[{"sig":"MEMCHzCaBpbPrc9OL/ykM3DxzC29nJ5fYjAHnk1Q1EEwJLYCIA+7ue9PGh5P2LTlGSNOiUmwbByywNV6/homb7AiYJBw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6075814},"main":"lib/index.js","husky":{"hooks":{"commit-msg":"f2elint commit-msg-scan","pre-commit":"f2elint commit-file-scan"}},"types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于快速完成页面布局体系 (低代码搭建或源码开发)，目标是不写任何布局 CSS 代码。\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n预览\n\n- [预览 Demo](https://g.alipay.com/@alifd/layout/build/index.html)\n- [阿里低代码搭建 Demo](https://g.alipay.com/@alifd/layout/build/lowcode/index.html)\n\n## 安装\n\n```bash\n npm install @alifd/layout --save\n```\n\n## 使用\n\n在项目中，引入一套 Fusion Design 主题的 [Design Token](https://fusion.design/pc/design-tokens), 如：\n\n```jsx\nimport '@alifd/theme-3/variables.css';\n```\n\n> 注：此处是为了引入布局组件所必须得 CSS Variables, 只需要保证上述的 CSS 代码生效即可，引入方式不限。\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16 | 24;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 `CSS Variables` 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"ebff898aac06a0c3a0be53329f7b190e61dc7ffc","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.2","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.18.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.1.0-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.0-beta.1_1686829968716_0.6616205590224873","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@alifd/layout","version":"2.1.0","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.1.0","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.1.0/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"485c88a96849f31f568f70f8c79ec39305eec782","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.1.0.tgz","fileCount":157,"integrity":"sha512-eDkuKCUXt2Q+so4hkcSVn3nChOO8WC4idHlSK1D2RMMztQR2GX5iFsWTenEpzAE2uOc0qOX6/PKsbXv3XOdBQA==","signatures":[{"sig":"MEQCIFNShCMT4bJQRoLlzzlCArCftauzcKwKy70H5/MVEevQAiBzWE4CjvsMxAdfPHNerD2AgP+DJ7i2yPy9AGsey4hh8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6073976},"main":"lib/index.js","types":"./lib/index.d.ts","module":"es/index.js","gitHead":"517037eef3a91607c1acddd13c82fb43f4ee9cca","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"stylePath":"style.js","repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.1.0/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.0_1686833437361_0.8125466457265353","host":"s3://npm-registry-packages"}},"2.1.1-beta.1":{"name":"@alifd/layout","version":"2.1.1-beta.1","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.1.1-beta.1","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.1.1-beta.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"7a05271732bf72316c9f9f65277f0ee174e64cdd","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.1.1-beta.1.tgz","fileCount":157,"integrity":"sha512-IoZYTwQWqlIBQer16wjOyKqSR2JcasbfeX7a6vnGmcvDBNnMe3jNFWEHx6y1qd9FC7+i6Sp5HV9oQqI9aWJxrQ==","signatures":[{"sig":"MEUCIHJF6WR1am9G2W8KRiWi0DI1SPfavDvbEu/as3lwDoK3AiEApyj0knUjEUgVzGQGCszYEoMVn6ZN8zoU3VvHRSmGYG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6081098},"main":"lib/index.js","types":"./lib/index.d.ts","module":"es/index.js","readme":"# 自然布局\n\n

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于快速完成页面布局体系 (低代码搭建或源码开发)，目标是不写任何布局 CSS 代码。\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n预览\n\n- [预览 Demo](https://g.alipay.com/@alifd/layout/build/index.html)\n- [阿里低代码搭建 Demo](https://g.alipay.com/@alifd/layout/build/lowcode/index.html)\n\n## 安装\n\n```bash\n npm install @alifd/layout --save\n```\n\n## 使用\n\n在项目中，引入一套 Fusion Design 主题的 [Design Token](https://fusion.design/pc/design-tokens), 如：\n\n```jsx\nimport '@alifd/theme-3/variables.css';\n```\n\n> 注：此处是为了引入布局组件所必须得 CSS Variables, 只需要保证上述的 CSS 代码生效即可，引入方式不限。\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16 | 24;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noPadding | 移除内边距 | Boolean | false |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | false |\n| noBottomMargin | 隐藏与内容部分的间隙(外边距) | Boolean | false |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 `CSS Variables` 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","gitHead":"255c1154b6d4eda957106828c7c9d1749ca832e8","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.2","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.18.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.1.1-beta.1/build/lowcode/assets-daily.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.1-beta.1_1690289453005_0.7643524946542042","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@alifd/layout","version":"2.1.1","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.1.1","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.1.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"52a7b4e8ef9c300a10411c39dd7ec6589f51cf95","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.1.1.tgz","fileCount":157,"integrity":"sha512-Sd2wdumJd6pZgVclY1Tr64SkjSK6aa728K9Zns1esJ8nhTXrKs1djfvphOGRCVpCupcC5pDd3IOmIZpHzAWodw==","signatures":[{"sig":"MEQCIA0eWAeV5zPu2SRgBuNpXC/FhlS1Lp0GKKwsc8M7NjxiAiAXYMeXQqzl6cMgI5GAF8Uq3XB3jQaAyRa8rwlohAkBbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6080637},"main":"lib/index.js","types":"./lib/index.d.ts","module":"es/index.js","gitHead":"b6713abaa983a250efd41f2ee9a52088614b60bb","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.1.1/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.3.0","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.1_1690291195946_0.5429287490287587","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@alifd/layout","version":"2.2.0","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.2.0","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.2.0/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"67a936556adb3a27398f9fd3d62962e9daf2f4af","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.2.0.tgz","fileCount":327,"integrity":"sha512-CDJDnv4RjChYv30e4N5JUtvc/P9jONaIdnScd8OsxBB0++k6WZbdftj6SYGcZrG7MurO36nbkPMdxvG9H/OgGA==","signatures":[{"sig":"MEQCICB2CUtOVTpQ9BcoZlmvaj2HDAV5NMsWYvK50GrerrfsAiAi744jNCvOUcX332pdZvG2y5WKcOQyNsOJ8izSzg8bAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6637929},"main":"lib/index.js","types":"./lib/index.d.ts","lcMeta":{"type":"component"},"module":"es/index.js","exports":{".":{"import":"./es/index.js","require":"./lib/index.js"},"./*":"./*","./prototype":{"import":"./lowcode_es/meta_entry.js","require":"./lowcode_lib/meta_entry.js"},"./prototypeView":{"import":"./lowcode_es/view_entry.js","require":"./lowcode_lib/view_entry.js"}},"gitHead":"9a3e88a192ebaff2d9bad316d5dd88437a50c26f","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","release":"standard-version && npm publish","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","release:beta":"standard-version --release-as minor --prerelease beta && npm publish --tag beta","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"eternalsky","email":"wsj7552715@hotmail.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.11.0","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.16.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","@babel/runtime":"^7.0.0","is-valid-array":"^1.0.1","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.2.0/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","react-draggable":"^4.4.4","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","standard-version":"^9.5.0","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.4.2","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.2.0_1690459311676_0.8016865198852641","host":"s3://npm-registry-packages"}},"2.2.1":{"name":"@alifd/layout","version":"2.2.1","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.2.1","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.2.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"7137a064b5d43112e7c5c6729483ef1c6148eaeb","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.2.1.tgz","fileCount":327,"integrity":"sha512-CTNZlCxsGB0JsligvOlSVMCP/WOFbSJ4+5iadsvvV3ng5x3QY9eb06WiGLllzrPsXM6sETR2jYCm2dRjNliCig==","signatures":[{"sig":"MEYCIQCAmzW4tNZtskiU0x6jpRM5VRw+wqw4QPWpjYzrvInzrwIhAMtMdRuFk2A6J1Ww1DpsNmjp/3XwqZvELm2n07R267Wz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6383787},"main":"lib/index.js","types":"./lib/index.d.ts","lcMeta":{"type":"component"},"module":"es/index.js","exports":{".":{"import":"./es/index.js","require":"./lib/index.js"},"./*":"./*","./prototype":{"import":"./lowcode_es/meta_entry.js","require":"./lowcode_lib/meta_entry.js"},"./prototypeView":{"import":"./lowcode_es/view_entry.js","require":"./lowcode_lib/view_entry.js"}},"gitHead":"10b7802aedd9c721011214363642296faca99a37","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","release":"standard-version && npm publish","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","release:beta":"standard-version --release-as minor --prerelease beta && npm publish --tag beta","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"eternalsky","email":"wsj7552715@hotmail.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.11.0","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.16.0","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","@babel/runtime":"^7.0.0","is-valid-array":"^1.0.1","react-draggable":"^4.4.4","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.2.1/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","standard-version":"^9.5.0","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.4.3","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"standard-version":{"skip":{"commit":true}},"_npmOperationalInternal":{"tmp":"tmp/layout_2.2.1_1690461576676_0.9056748130375467","host":"s3://npm-registry-packages"}},"2.2.2":{"name":"@alifd/layout","version":"2.2.2","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.2.2","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.2.2/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"a1e9da8c67413af15c7a4ec5e732e1917382ab3a","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.2.2.tgz","fileCount":327,"integrity":"sha512-zk5rJYqScNR7xG+m2rt5U52zClF0hOUzTFtB/dAjADXBY0kc+VWWcfhGn41qxm8YfBPrjQQOPYwZSoYc+2gW3Q==","signatures":[{"sig":"MEUCIFaFti6vRSEBscl4AiRl0BbtSI9xYBv7DucLA66SCGpsAiEAjjVLJypsTJ9Wpne6tzwQ+XPHVy+vLuqvHt2lB84OQBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6386446},"main":"lib/index.js","types":"./lib/index.d.ts","lcMeta":{"type":"component"},"module":"es/index.js","exports":{".":{"import":"./es/index.js","require":"./lib/index.js"},"./*":"./*","./prototype":{"import":"./lowcode_es/meta_entry.js","require":"./lowcode_lib/meta_entry.js"},"./prototypeView":{"import":"./lowcode_es/view_entry.js","require":"./lowcode_lib/view_entry.js"}},"gitHead":"b2fc13961f93e49f0643566cc2b5bad6cfb06f0d","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","release":"standard-version","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","release:beta":"standard-version --release-as minor --prerelease beta","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","@babel/runtime":"^7.0.0","is-valid-array":"^1.0.1","react-draggable":"^4.4.4","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.2.2/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","standard-version":"^9.5.0","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.4.4","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"standard-version":{"skip":{"commit":true}},"_npmOperationalInternal":{"tmp":"tmp/layout_2.2.2_1690463699496_0.9357097205048095","host":"s3://npm-registry-packages"}},"2.2.3":{"name":"@alifd/layout","version":"2.2.3","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.2.3","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.2.3/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"1731b1272c45cc83b18b12e71b0871bf829520d2","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.2.3.tgz","fileCount":327,"integrity":"sha512-3O2nt3sDaWk+ccfIGCsoIl7Eohy9LUr5bJPd99hKLxxSmMtCSn+ZKOtDz+K4+ZiQxLd/hLcKVFOYclO6uIGXjQ==","signatures":[{"sig":"MEUCICqTi7FApd6/GF0ljoJyLu1+vnfz6MAncBfaGvGSTVbWAiEA7lm0Z/Zkp/upaIZ+steGJS8jL0rhvbzbYvDotDEglIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6390772},"main":"lib/index.js","types":"./lib/index.d.ts","lcMeta":{"type":"component"},"module":"es/index.js","exports":{".":{"import":"./es/index.js","require":"./lib/index.js"},"./*":"./*","./prototype":{"import":"./lowcode_es/meta_entry.js","require":"./lowcode_lib/meta_entry.js"},"./prototypeView":{"import":"./lowcode_es/view_entry.js","require":"./lowcode_lib/view_entry.js"}},"gitHead":"ae4852fcb640f43b77fe26df5c05b6817c010bda","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","release":"standard-version","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","release:beta":"standard-version --release-as minor --prerelease beta","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","@babel/runtime":"^7.0.0","is-valid-array":"^1.0.1","react-draggable":"^4.4.4","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.2.3/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","standard-version":"^9.5.0","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.4.5","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"standard-version":{"skip":{"commit":true}},"_npmOperationalInternal":{"tmp":"tmp/layout_2.2.3_1690533537433_0.1937705394711955","host":"s3://npm-registry-packages"}},"2.2.4":{"name":"@alifd/layout","version":"2.2.4","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.2.4","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.2.4/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"e206d83f3be61c98a38d4403ed91e8328b801374","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.2.4.tgz","fileCount":327,"integrity":"sha512-i4eB5nlz2aw+Rs7vo+TYijhrmp/QCdxR6kVJ7KjwBYWcABZkl0xvGeUEHB7fHcPTR/Ks+373JIZ0kQJAwzzIMg==","signatures":[{"sig":"MEQCIExMy/AXBK27swp22gOUdk7EDoc+inSWLkJl3S5Eqpb6AiBNXsPHztnmqvASX5mICypgAT1ccCcuXeAJZ/iwIm2Ciw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6390784},"main":"lib/index.js","types":"./lib/index.d.ts","lcMeta":{"type":"component"},"module":"es/index.js","exports":{".":{"import":"./es/index.js","require":"./lib/index.js"},"./*":"./*","./prototype":{"import":"./lowcode_es/meta_entry.js","require":"./lowcode_lib/meta_entry.js"},"./prototypeView":{"import":"./lowcode_es/view_entry.js","require":"./lowcode_lib/view_entry.js"}},"gitHead":"0fb1f25fa64f18060ed7bfddee896c3508379f44","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","release":"standard-version","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","release:beta":"standard-version --release-as minor --prerelease beta","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","@babel/runtime":"^7.0.0","is-valid-array":"^1.0.1","react-draggable":"^4.4.4","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.2.4/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","standard-version":"^9.5.0","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.4.6","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"standard-version":{"skip":{"commit":true}},"_npmOperationalInternal":{"tmp":"tmp/layout_2.2.4_1690539483975_0.7643539790993679","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@alifd/layout","version":"2.3.0","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.3.0","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.3.0/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"9c3cb999ac7130c9c6fe15d85ed9d96729241d11","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.3.0.tgz","fileCount":327,"integrity":"sha512-58Kf25oUsEK/qdKlLZLEEKWQClMLYYEf0/Ik3ljx7jLp1N0GTdX+3FQqJKdj0q7AYrTb0TlVrO6tpFNZEOPhmQ==","signatures":[{"sig":"MEUCICz6tVZodrs5oQ+1DWf/OaB5/kHo7WuR7MT7ukm+rofhAiEAjuaXUk49tI0dhBvl7akuian6lav5O/ZYGTisUJzosfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6393614},"main":"lib/index.js","types":"./lib/index.d.ts","lcMeta":{"type":"component"},"module":"es/index.js","exports":{".":{"import":"./es/index.js","require":"./lib/index.js"},"./*":"./*","./prototype":{"import":"./lowcode_es/meta_entry.js","require":"./lowcode_lib/meta_entry.js"},"./prototypeView":{"import":"./lowcode_es/view_entry.js","require":"./lowcode_lib/view_entry.js"}},"gitHead":"bc3aa528bff57950c4f03281c05dcc759b36c404","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","release":"standard-version","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","release:beta":"standard-version --release-as minor --prerelease beta","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.1","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","@babel/runtime":"^7.0.0","is-valid-array":"^1.0.1","react-draggable":"^4.4.4","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.3.0/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","standard-version":"^9.5.0","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.4.6","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"standard-version":{"skip":{"commit":true}},"_npmOperationalInternal":{"tmp":"tmp/layout_2.3.0_1690860060985_0.25976303884963836","host":"s3://npm-registry-packages"}},"2.4.0":{"name":"@alifd/layout","version":"2.4.0","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.4.0","maintainers":[{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.4.0/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"b05da39ba1adc73280c551b1d6b98c87858754dc","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.4.0.tgz","fileCount":327,"integrity":"sha512-QGNriZAnPXaDWHYMA8T47u/jPI851llO7OqWgR9FUJ0hctGV6hc4H78Kil/gsUqwiUfo/lpfgpNyKGmA4i4Hpw==","signatures":[{"sig":"MEUCIQDqN2k3jqAbfAQUxnXUJ3Zbsrd3nzp7tpj3t5nT3AiDbAIgMIxIaM9rL8io3d4hTDJDgfRblH+rSoYf+StbKA3DC9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6392930},"main":"lib/index.js","types":"./lib/index.d.ts","lcMeta":{"type":"component"},"module":"es/index.js","exports":{".":{"import":"./es/index.js","require":"./lib/index.js"},"./*":"./*","./prototype":{"import":"./lowcode_es/meta_entry.js","require":"./lowcode_lib/meta_entry.js"},"./prototypeView":{"import":"./lowcode_es/view_entry.js","require":"./lowcode_lib/view_entry.js"}},"gitHead":"42ee2b9ab5f41b58981db77241a53de87ac43745","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","release":"standard-version","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","release:beta":"standard-version --release-as minor --prerelease beta","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.2","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","@babel/runtime":"^7.0.0","is-valid-array":"^1.0.1","react-draggable":"^4.4.4","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.4.0/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","standard-version":"^9.5.0","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.4.6","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"standard-version":{"skip":{"commit":true}},"_npmOperationalInternal":{"tmp":"tmp/layout_2.4.0_1693362721149_0.6559255157896018","host":"s3://npm-registry-packages"}},"2.4.1":{"name":"@alifd/layout","version":"2.4.1","keywords":["layout","fusion","ice","react","component"],"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","_id":"@alifd/layout@2.4.1","maintainers":[{"name":"soberz","email":"710411486@qq.com"},{"name":"whatever_lll","email":"whatever6g@gmail.com"},{"name":"john-watson","email":"wangjiarui1924@gmail.com"},{"name":"eternalsky","email":"wsj7552715@hotmail.com"},{"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"}],"contributors":[],"homepage":"https://unpkg.com/@alifd/layout@2.4.1/build/index.html","bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"dist":{"shasum":"8751621154b5ed67fabb8c28987d09e9718f58eb","tarball":"https://registry.npmjs.org/@alifd/layout/-/layout-2.4.1.tgz","fileCount":327,"integrity":"sha512-8ENQvW1wJ9coDh5Zrff9gmRablAxmvfCVHiCOFYqAl8HR8Mfm32G9aljg/E26dHFVeeaxGmKABT/g4rEwTXOcA==","signatures":[{"sig":"MEUCIQCpO3xq+A2cik423hDmdOJ5JWJfTJMtyBXvXZp/qRMjEwIgJQfkOty7RpvRUlHnxGeVlKfn+7crLySaEMoIjJju2cE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6378189},"main":"lib/index.js","types":"./lib/index.d.ts","lcMeta":{"type":"component"},"module":"es/index.js","exports":{".":{"import":"./es/index.js","require":"./lib/index.js"},"./*":"./*","./prototype":{"import":"./lowcode_es/meta_entry.js","require":"./lowcode_lib/meta_entry.js"},"./prototypeView":{"import":"./lowcode_es/view_entry.js","require":"./lowcode_lib/view_entry.js"}},"gitHead":"ca9ef063b09fd1cec742dcba75f29967e4cbbc71","scripts":{"lint":"npm run eslint && npm run stylelint","test":"build-scripts test","build":"build-scripts build","start":"build-scripts start","eslint":"eslint --cache --ext .js,.jsx ./","release":"standard-version","stylelint":"stylelint \"**/*.{css,scss,less}\"","eslint:fix":"npm run eslint -- --fix","f2elint-fix":"f2elint fix","lowcode:dev":"build-scripts start --config ./build.lowcode.js","f2elint-scan":"f2elint scan","release:beta":"standard-version --release-as minor --prerelease beta","lowcode:build":"build-scripts build --config ./build.lowcode.js","prepublishOnly":"npm run build && npm run lowcode:build"},"_npmUser":{"name":"lianmin","email":"lianmin.slm@qq.com"},"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"_npmVersion":"8.19.4","description":"基于 Fusion 设计系统的自然布局体系","directories":{},"lint-staged":{"@src/**/*.(ts|tsx)":["eslint --fix","prettier --write"],"src/**/*.(css|scss|less)":["stylelint --fix"]},"resolutions":{"sass":"1.35.x"},"_nodeVersion":"16.20.2","dependencies":{"lodash-es":"^4.17.21","classnames":"^2.3.2","typescript":"^4.9.5","@alifd/next":"^1.x","@babel/runtime":"^7.0.0","is-valid-array":"^1.0.1","react-draggable":"^4.4.4","@alilc/lowcode-types":"^1.1.3-beta.1","@alilc/lowcode-engine":"^1.1.1","resize-observer-polyfill":"^1.5.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"componentConfig":{"name":"Layout","title":"自然布局","category":"Information","materialSchema":"https://unpkg.alibaba-inc.com/@alifd/layout@2.4.1/build/lowcode/assets-prod.json"},"devDependencies":{"react":"^16.3.0","enzyme":"^3.10.0","moment":"^2.29.4","f2elint":"^1.2.0","iceworks":"^3.4.5","react-dom":"^16.3.0","commitlint":"^17.6.5","@alifd/next":"1.x","@types/react":"^16.14.35","@alifd/theme-3":"^0.5.3","@iceworks/spec":"^1.0.0","@types/lodash-es":"^4.17.6","@types/react-dom":"^16.9.4","standard-version":"^9.5.0","@alib/build-scripts":"^0.1.32","build-plugin-fusion":"^0.1.0","@alilc/lowcode-types":"^1.1.3-beta.2","build-plugin-jsx-plus":"^0.1.4","build-plugin-component":"^1.0.0","enzyme-adapter-react-16":"^1.14.0","@alifd/build-plugin-lowcode":"^0.4.6","build-plugin-moment-locales":"^0.1.0","@types/hoist-non-react-statics":"^3.3.1"},"lowcodeEditMain":"build/lowcode/view.js","peerDependencies":{"react":">=16","@alifd/next":"1.x"},"standard-version":{"skip":{"commit":true}},"_npmOperationalInternal":{"tmp":"tmp/layout_2.4.1_1697112843626_0.36339830627096803","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-05-14T10:00:06.041Z","modified":"2025-12-25T06:44:58.754Z","0.1.1":"2019-05-14T10:00:06.340Z","0.1.2":"2019-05-22T07:06:31.021Z","0.1.3":"2019-06-03T04:35:46.374Z","0.1.4":"2019-06-03T06:20:00.679Z","0.1.5":"2019-06-03T08:36:44.124Z","0.1.6":"2019-06-05T10:11:34.290Z","0.1.7":"2019-06-12T15:56:36.299Z","0.1.8":"2019-06-13T06:08:30.681Z","0.1.9":"2019-06-13T08:23:44.136Z","0.1.10":"2019-06-13T13:23:06.310Z","0.1.11":"2019-06-13T13:27:26.085Z","0.1.12":"2019-06-14T07:01:24.536Z","0.1.13":"2019-06-14T07:15:30.819Z","0.1.14":"2019-06-17T04:18:27.792Z","0.1.15":"2019-06-17T05:50:48.012Z","0.1.16":"2019-06-25T08:24:41.670Z","0.1.17":"2019-07-11T09:33:22.797Z","0.1.18":"2019-07-31T12:30:10.786Z","0.1.19":"2019-08-13T11:47:13.678Z","0.1.20":"2019-09-23T08:35:05.257Z","0.2.0-beta":"2019-10-15T14:11:58.121Z","1.0.0-beta.1":"2022-04-11T08:21:48.048Z","1.0.0-beta.2":"2022-04-12T03:47:39.751Z","1.0.0-beta.3":"2022-04-13T11:06:32.698Z","1.0.0-beta.4":"2022-04-15T10:46:11.232Z","1.0.0-beta.5":"2022-04-18T11:11:42.068Z","1.0.0-beta.6":"2022-04-19T06:24:42.070Z","1.0.0-beta.7":"2022-04-19T06:52:23.293Z","1.0.0-beta.8":"2022-04-20T02:48:55.832Z","1.0.0-beta.9":"2022-04-20T07:02:27.062Z","1.0.0":"2022-04-21T09:14:00.832Z","1.0.1-beta.0":"2022-04-21T12:01:46.273Z","1.0.1-beta.1":"2022-04-21T13:19:59.187Z","1.0.1-beta.2":"2022-04-22T08:48:09.614Z","1.0.1-beta.3":"2022-04-24T03:15:12.206Z","1.0.1-beta.4":"2022-04-25T09:41:21.720Z","1.0.1-beta.5":"2022-04-25T11:29:52.692Z","1.0.1-beta.6":"2022-04-26T01:03:11.907Z","1.0.1-beta.7":"2022-04-27T10:29:05.521Z","1.0.1-beta.8":"2022-04-29T02:13:14.820Z","1.0.1-beta.9":"2022-05-07T13:18:28.258Z","1.0.1":"2022-05-12T09:45:26.963Z","1.0.2-beta.1":"2022-05-16T07:27:06.769Z","1.0.2-beta.2":"2022-05-16T07:46:10.488Z","1.0.2-beta.3":"2022-05-16T08:12:13.154Z","1.0.2-beta.4":"2022-05-16T09:28:02.047Z","1.0.2-beta.5":"2022-05-17T02:34:21.401Z","1.0.2-beta.6":"2022-05-20T10:25:42.287Z","1.0.2-beta.7":"2022-05-23T03:00:06.750Z","1.0.2-beta.8":"2022-05-23T03:09:18.268Z","1.0.2":"2022-06-07T09:39:35.655Z","1.0.3":"2022-06-16T09:55:07.766Z","1.0.4-beta.0":"2022-06-28T06:17:16.418Z","1.0.4-beta.1":"2022-07-28T02:54:17.443Z","1.0.4-beta.2":"2022-07-28T03:43:27.984Z","1.0.4-beta.4":"2022-07-28T05:58:33.894Z","1.0.4":"2022-07-28T06:20:03.218Z","1.0.5-beta.1":"2022-08-05T08:32:00.906Z","1.0.5-beta.2":"2022-09-07T09:03:49.075Z","1.0.5-beta.3":"2022-09-07T09:09:27.397Z","1.0.5-beta.4":"2022-09-08T06:45:55.904Z","1.0.5-beta.5":"2022-09-08T06:53:21.990Z","1.1.0-beta.1":"2022-09-08T09:24:49.904Z","1.0.5-beta.6":"2022-09-09T02:50:56.142Z","2.0.0-beta.1":"2022-10-12T08:55:42.581Z","2.0.0-beta.2":"2022-10-12T10:30:30.637Z","2.0.0-beta.3":"2022-11-02T02:06:37.260Z","2.0.0-beta.4":"2022-11-28T11:18:12.140Z","2.0.0":"2023-01-11T03:44:36.792Z","2.0.1":"2023-02-10T03:48:40.640Z","2.0.2":"2023-02-28T13:08:45.874Z","2.0.3":"2023-03-01T03:34:53.490Z","2.0.4":"2023-03-03T09:10:39.209Z","2.0.5":"2023-03-06T08:45:47.568Z","2.0.6":"2023-03-09T08:03:08.083Z","2.0.7-beta.1":"2023-03-13T06:57:21.196Z","2.0.7":"2023-03-13T09:51:33.690Z","2.0.8":"2023-03-23T03:37:42.698Z","2.0.9":"2023-04-13T09:22:48.797Z","2.0.10-beta.0":"2023-04-14T08:40:20.099Z","2.0.10":"2023-04-17T03:43:01.559Z","2.0.11":"2023-04-19T01:56:24.857Z","2.0.12":"2023-04-26T03:26:39.955Z","2.1.0-beta.1":"2023-06-15T11:52:48.980Z","2.1.0":"2023-06-15T12:50:37.601Z","2.1.1-beta.1":"2023-07-25T12:50:53.241Z","2.1.1":"2023-07-25T13:19:56.283Z","2.2.0":"2023-07-27T12:01:51.888Z","2.2.1":"2023-07-27T12:39:36.955Z","2.2.2":"2023-07-27T13:14:59.809Z","2.2.3":"2023-07-28T08:38:57.753Z","2.2.4":"2023-07-28T10:18:04.219Z","2.3.0":"2023-08-01T03:21:01.222Z","2.4.0":"2023-08-30T02:32:01.484Z","2.4.1":"2023-10-12T12:14:03.804Z"},"bugs":{"url":"https://gitlab.alibaba-inc.com/fusion-design/layout/issues"},"author":{"name":"lianmin","email":"406400939@qq.com"},"license":"MIT","homepage":"https://unpkg.com/@alifd/layout@2.4.1/build/index.html","keywords":["layout","fusion","ice","react","component"],"repository":{"url":"git+https://github.com/alibaba-fusion/layout.git","type":"git"},"description":"基于 Fusion 设计系统的自然布局体系","contributors":[],"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

\n \n \"Fusion\"\n \n

\n

\n \n \n \n

\n\n用于快速完成页面布局体系 (低代码搭建或源码开发)，目标是不写任何布局 CSS 代码。\n\n**设计理念**\n\n- **初衷**：愿布局不需写 css 样式\n- **定位**：页面内容区的布局解决方案\n\n> 详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 [Fusion Design](https://www.yuque.com/g/fusion-design/layout/collaborator/join?token=7bTjikyxDTAh3WwS) 语雀知识库）\n\n预览\n\n- [预览 Demo](https://g.alipay.com/@alifd/layout/build/index.html)\n- [阿里低代码搭建 Demo](https://g.alipay.com/@alifd/layout/build/lowcode/index.html)\n\n## 安装\n\n```bash\n npm install @alifd/layout --save\n```\n\n## 使用\n\n在项目中，引入一套 Fusion Design 主题的 [Design Token](https://fusion.design/pc/design-tokens), 如：\n\n```jsx\nimport '@alifd/theme-3/variables.css';\n```\n\n> 注：此处是为了引入布局组件所必须得 CSS Variables, 只需要保证上述的 CSS 代码生效即可，引入方式不限。\n\n布局示例：\n\n```jsx\nimport { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';\n\nexport default function App() {\n return (\n \n Header\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 \n

\n 文本\n 文本\n

\n \n \n \n
\n \n Footer\n \n );\n}\n```\n\n### 进一步封装 Block 和 Text。\n\n由于 `Section > Block` 具有强关联性（依赖 `Block` 对子元素宽度做计算并调整）。如果业务上需要进一步封装 `Block`，需要对 `Block` 增加类型标记，一遍 Section 能识别其 `span` 等属性。\n\n同理 `P > Text` 也具有类似强相关性，对于 `Text` 的组件封装，如果希望在 `P` 中表现和 `Text` 近似，也需要标记 `typeMark`.\n\n示例：\n\n```jsx\nimport { Page, Section, Block } from '@alifd/layout';\n\nfunction NewBlock(props) {\n const { children, ...others } = props;\n // 加入新业组件逻辑\n return {children};\n}\n\n// 标记 NewBlock 可以视为 Block 作为 Section 的子元素\nNewBlock.typeMark = 'Block';\n\n// 页面渲染可以使用 NewBlock\nfunction App() {\n return (\n \n
\n block\n new block\n
\n \n );\n}\n```\n\n## 开发\n\n1. 调试和预览 demo\n\n```bash\nnpm run start\n```\n\n2. 启动低代码预览\n\n```bash\nnpm run lowcode:dev\n```\n\n## API\n\n### Page\n\n页面\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------------ | ------------------------------------------- | ------------------------------------------------- | ------------ |\n| prefix | CSS 类名前缀 | string | `fd-layout-` |\n| minHeight | 页面的最小高度，例如 `calc(100vh - 52px)` | Number/String | - |\n| noPadding | 禁用页面内边距,包含 Header, Content, Footer | Boolean | `false` |\n| sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - |\n| blockGap | Section 中栅格布局间隙 | Number | - |\n| gridGap | 小布局间隙（包含行、列、网格布局） | Number | - |\n| breakPoints | 断点信息 | `BreakPoint[]` | - |\n| children | 子元素 | ReactNode | - |\n| onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |\n\n```ts\ninterface BreakPoint {\n /**\n * 断点宽度(包含)\n */\n width: number;\n /**\n * 最大展示宽, 默认为断点宽度\n */\n maxContentWidth: number | string;\n /**\n * 列数\n */\n numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16 | 24;\n}\n```\n\n#### Page.Header\n\n序章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------------- | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noPadding | 移除内边距 | Boolean | false |\n| noBottomPadding | 隐藏默认底部内边距 | Boolean | false |\n| noBottomMargin | 隐藏与内容部分的间隙(外边距) | Boolean | false |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Footer\n\n终章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ------------ | --------------------------------------------- | --------- | ------ |\n| mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | - |\n| noTopPadding | 隐藏默认顶部内边距 | Boolean | - |\n| divider | 展示分割线 | Boolean | - |\n| fullWidth | 保持全屏宽（不受断点 `maxContentWidth` 限制） | Boolean | false |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Content\n\n内容\n\n| 参数 | 含义 | 类型 | 默认值 |\n| --------- | --------------------------------------- | ------------- | ------ |\n| minHeight | 页面的最小高度，例如 calc(100vh - 52px) | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Aside\n\n右侧边栏，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n#### Page.Nav\n\n左侧导航，如有 Content，需为 Content 的子元素\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | ------ | ------------- | ------ |\n| width | 宽度 | Number/String | - |\n| children | 子元素 | ReactNode | - |\n\n### Section\n\n章\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------- | ----------------------------- | --------- | ------ |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| gap | 自定义内部区块（Block）的间隙 | Number | - |\n| children | 子元素 | ReactNode | - |\n\n### Block\n\n区块（节）\n\n| 参数 | 含义 | 类型 | 默认值 |\n| ---------------- | ----------------------------------------------------------------- | ------------- | ------ |\n| mode | 背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - |\n| title | 标题 | ReactNode | - |\n| titleAlign | 标题位置，可选值 left/center | Enum | - |\n| extra | 附加区域（标题右侧） | ReactNode | - |\n| divider | 展示标题与内容之间的分割线 | Boolean | - |\n| bordered | 展示边框 | Boolean | - |\n| noPadding | 移除内边距 | Boolean | false |\n| span | 列宽 | Number | - |\n| width | 指定宽度 | Number | - |\n| contentClassName | 有标题时，内容区域的样式名 | string | - |\n| contentStyle | 有标题时，内容区域的自定义样式 | CSSProperties | - |\n| children | 子元素 | ReactNode | - |\n\n### Row\n\n行\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | --------------------------------------------------------- | ------------- | ------ |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| gap | 自定义元素间间距 | Number | - |\n| verAlign | 垂直对齐方式， 可选值：top/middle/bottom/stretch/baseline | Enum | - |\n| children | 子元素 | ReactNode | - |\n\n### Col\n\n列\n\n| 参数 | 含义 | 类型 | 默认值 |\n| -------- | -------------------------------------------------- | ------------- | ------ |\n| autoFit | 根据内容自适应宽度（当作为行列布局的子元素时生效） | Boolean | - |\n| width | 指定宽度 | Number/String | - |\n| height | 指定高度 | Number/String | - |\n| gap | 自定义元素间间距 | Number | - |\n| align | 水平对齐方式， 可选值：left/center/right/stretch | Enum | - |\n| children | 子元素 | ReactNode | - |\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/String | - |\n| height | 指定高度 | Number/String | - |\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 | 子元素 | ReactNode | - |\n\n### Space\n\n空间间隙\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ---------------------------------------- | --------- | ------ |\n| direction | 组件自身布局模式，可选： `hoz/ver` | Enum | hoz |\n| size | 尺寸， 可选: `small/medium/large/Number` | Enum | medium |\n| children | 子元素 | ReactNode | |\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| hasVerSpacing | 除 `文本` 节点外子元素间保持垂直间距 | Boolean | true |\n| beforeMargin | 段前外边距（作为第一个子元素时无效） | Number | 0 |\n| afterMargin | 段后外边距（作为最后一个子元素时无效） | Number | 0 |\n| children | 子元素 | ReactNode | - |\n\n#### Text\n\n文本\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | ----------------------------------------------------------------- | ------- | ------ |\n| type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | body2 |\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自然布局默认引入了 Fusion 设计系统的 [Design Tokens](https://fusion.design/pc/design-tokens?type=theme&themeid=3)。\n布局可自定义 `CSS Variables` 如下，可基于实际情况修改：\n\n| 变量名 | 说明 | 默认值 |\n| --------------------------------- | ---------------------- | ---------------------- |\n| `--color-transparent` | 前景色 | `transparent` |\n| `--color-surface` | 前景色 | `#fff` |\n| `--color-lining` | 衬色 | `#f0f0f0` |\n| `--page-padding-lr` | 页面左右内边距 | `var(--s-5)` |\n| `--page-padding-tb` | 页面上下内边距 | `var(--s-5)` |\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","readmeFilename":"README.md"}