简介
@atlaskit/page 是 Atlassian 公司提供的一个 React 组件，用来创建标准的 Confluence 和 Jira 页面。它包含了一系列 UI 元素和布局，可以快速帮助开发者构建符合 Atlassian 标准的页面。
安装
该组件需要安装 React 和 React-DOM 库，在命令行中输入以下命令：
npm install react react-dom @atlaskit/page
使用
- 首先，在 React 组件中引入 @atlaskit/page。
import Page from "@atlaskit/page";
- 在 render 函数中，使用 Page 组件创建页面。
-- -------------------- ---- ------- -------- - ------ - ------ --------- ------------- ----------- ---------- ------- -- -展开代码
在上例中，我们使用了 Content 组件来包裹页面内容。Content 组件是 @atlaskit/page 中的一个子组件，用来实现页面布局。
主题
@atlaskit/page 提供了 3 种主题：light、dark 和 custom。可以通过设置主题属性来切换主题。
<Page theme="light"> ... </Page>
<Page theme="dark"> ... </Page>
<Page theme={{ mode: "dark", context: "product" }}> ... </Page>
上例中的第三种主题方式是自定义主题。
组件列表
@atlaskit/page 包含了多个 UI 组件，包括 Button、Navigation、Footer 等。下面是部分组件的示例代码：
Button
import Button from "@atlaskit/button"; <Button appearance="primary">Primary Button</Button>
Navigation
-- -------------------- ---- ------- ------ - ----------------- ---------------- - ---- ---------------------------- ------------------ --- -- ---------- ------ -- ------------------- ------------------ --- -- ---------- ------ -- -------------------展开代码
Footer
import { Footer } from "@atlaskit/page"; <Footer> © 2021 Atlassian Corporation. All rights reserved. </Footer>
总结
@atlaskit/page 是一个非常实用的组件库，适用于构建符合 Atlassian 标准的页面。本文介绍了如何使用该组件库，并提供了组件示例代码。通过使用 @atlaskit/page，可以快速地创建符合 Atlassian 标准的页面，从而提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6d517ea9b7065299ccb978
