{"_id":"@b-design/ui-page","_rev":"9-58601f0641d1f24ccf3ba48e91caa967","name":"@b-design/ui-page","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@b-design/ui-page","version":"0.0.1","keywords":["b-design","b-design-rc-page","react","react component"],"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","_id":"@b-design/ui-page@0.0.1","maintainers":[{"name":"wangcherry","email":"wang_cherry0312@163.com"},{"name":"dhgalien","email":"dhg.isarobot@gmail.com"},{"name":"shaomingbo","email":"shaomingbo@hotmail.com"},{"name":"heimanba","email":"371510756@qq.com"},{"name":"xsahxl","email":"xsahxl@126.com"},{"name":"xxz_11","email":"2690067132@qq.com"},{"name":"chestnutpcj","email":"535961284@qq.com"},{"name":"luckydrq","email":"drqzju@gmail.com"}],"dist":{"shasum":"6ff781424e3f0bbebc68fc7bacbc8a74f649928d","tarball":"https://registry.npmjs.org/@b-design/ui-page/-/ui-page-0.0.1.tgz","fileCount":1253,"integrity":"sha512-XjYfayQsOHXbCrZfILPW+Q5xJ3TIVuib5CgrkJiFUgj6OWX+tn6KP6V6loQ3vdpsc2woJti3l+TNpIm/jPSZqg==","signatures":[{"sig":"MEQCIGFWciwoa0F3TIxJtPw/G5K/p2FJN4Npdt0890gmS3lrAiBkA7QcBlCQWZB/nHTQSFfHirLnJzxmlPTOZf92JvwIcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":76690095},"main":"lib/index.js","unpkg":"dist/index.js","module":"es/index.js","engines":{"node":">=7.6.0"},"scripts":{"dev":"breezr start --config config/breezr-docs.config.ts","test":"breezr test:unit","babel":"breezr build --engine babel","build":"breezr build --engine webpack","clean":"rm -rf dist lib es cc-dev-out","types":"tsc -p src --emitDeclarationOnly","upload":"breezr upload --config config/breezr-docs.config.ts","prepare":"npm run clean && npm run babel && npm run babel:esm && npm run types && npm run build","babel:esm":"breezr build --engine babel --es-module","doc:build":"rm -rf doc-dist && breezr build --config config/breezr-docs.config.ts","storybook":"breezr start-storybook","upload:pre":"npm run upload -- --tag=pre"},"typings":"lib/index.d.ts","_npmUser":{"name":"wangcherry","email":"wang_cherry0312@163.com"},"_npmVersion":"6.14.13","description":"React component for Alibaba Cloud.","directories":{},"_nodeVersion":"14.17.0","dependencies":{"@b-design/ui-truncate":"^0.0.1","@b-design/ui-rc-internal-helpers":"^0.0.1","@researchgate/react-intersection-observer":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.8.6","react-dom":"^16.8.6","prop-types":"^15.7.2","@ali/breezr":"^1.5.41","@b-design/ui":"^2.0.0","styled-components":"^4.2.1","@types/styled-components":"^4.2.0","@alicloud/console-toolkit-preset-docs":"^1.0.40","@alicloud/console-components-fake-browser":"^2.0.7","@babel/plugin-proposal-private-property-in-object":"^7.16.0"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6","prop-types":"^15.7.2","@b-design/ui":"^2.0.0","styled-components":"^4.2.1"},"_npmOperationalInternal":{"tmp":"tmp/ui-page_0.0.1_1636103285997_0.1839523983822735","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-11-05T09:08:05.950Z","modified":"2024-11-05T08:22:37.216Z","0.0.1":"2021-11-05T09:08:06.674Z"},"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","keywords":["b-design","b-design-rc-page","react","react component"],"description":"React component for Alibaba Cloud.","maintainers":[{"email":"dhg.isarobot@gmail.com","name":"dhgalien"},{"email":"tancawe@foxmail.com","name":"chvin"},{"email":"wang_cherry0312@163.com","name":"wangcherry"},{"email":"535961284@qq.com","name":"chestnutpcj"}],"readme":"# @b-design/ui-page\n\n为阿里云控制台或其他中后台系统提供基于页面的基础布局。这个组件一般配合 [@alicloud/console-components-app-layout](https://xconsole.aliyun-inc.com/nexconsole/component_web/rsfxoa) 一起使用。\n\n> 如果您正在使用 XConsole 框架，那么 XConsole 会帮您应用这个组件，你不需要直接使用它；
\n> 如果您没有使用 XConsole 框架，而是单独使用`@alicloud/console-components`组件库，那么您需要自己应用它。\n\n## 安装\n\n```bash\ntnpm i -S @b-design/ui-page\n```\n\n- 在计算 `` 的布局时使用了 `IntersectionObserver` API ，目前这个 API 已经于绝大多数的浏览器中得到实现，如果你期望你的布局在低版本的浏览器下可以运行（如 `Safari < 12.0`），你需要在项目的入口文件引入 polyfill: [intersection-observer](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)\n\n## 使用示例\n\n### 基本使用\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-page-docs&entryKey=basic)\n\n### 使用带有二级导航的页面布局\n\n使用 `` 的 `menu` 属性定义页面布局中的二级导航\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-page-docs&entryKey=with-menu)\n\n### 自定义「返回上一级」按钮\n\n在某些场景下，你可能希望对「返回上级」的行为进行深度的定制化，使用 `` 的 `renderBackArrow` 属性可以帮助你实现这些自定义的行为，比如使用超链接包裹该按钮\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-page-docs&entryKey=with-custom-back-arrow-render)\n\n### 根据容器宽度自动截断标题\n\n当标题太长，以至于容器宽度不足以容纳的时候，会自动使用`@b-design/ui-truncate`组件对标题进行截断：\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-page-docs&entryKey=long-title)\n\n## APIs\n\n### Page\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-page-docs&entryKey=types/IPageProps)\n\n### Page.Header\n\n定义页面中的头部内容，通常包括面包屑导航 / 页面标题等等\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-page-docs&entryKey=types/IHeaderProps)\n\n### Page.Content\n\n定义页面主体的内容\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-page-docs&entryKey=types/IContentProps)\n\n### Page.Breadcrumb\n\n用来定义位于`Page.Header`的面包屑导航。\n\n该组件继承自 `@alicloud/console-components` 中的 `` 组件，推荐使用它来定义 `Page.Header.breadcrumb` 属性的内容：\n\n```javascript\nimport Page from '@b-design/ui-page'\nimport { Link } from 'dva/router'\n\nconst { Breadcrumb, Header } = Page\n\nconst breadcrumb = (\n \n \n 首页\n \n \n 列表\n \n 详情\n \n)\n\nconst Detail = () => (\n \n \n \n)\n```\n\n### Page.Menu\n\n用来定义位于`Page.Content`的页面二级导航。\n\n> 页面一级导航由 `@alicloud/console-components-app-layout` 组件来定义。\n\nPage.Menu 下包括以下组件：\n\n| 组件 | 继承自 |\n| :------------: | :-----------: |\n| Page.Menu | Nav |\n| Page.Item | Nav.Item |\n| Page.Group | Nav.Group |\n| Page.SubMenu | Nav.SubNav |\n| Page.PopupItem | Nav.PopupItem |\n","readmeFilename":"README.md"}