简介
@atlaskit/drawer 是一个 React 组件库，提供了一种简便的方法创建 web 应用中的抽屉（如侧边栏或模态框）。该组件库使用 TypeScript 编写，旨在提供一组可定制的基础组件，可以通过可选的高级属性进行定制。
安装和初始化
首先，需要确保在项目中安装了 Node.js（版本需大于 10），使用 npm 包管理器安装 @atlaskit/drawer。
npm install @atlaskit/drawer
安装完成后，可以按照以下方式导入 @atlaskit/drawer：
import { Drawer } from "@atlaskit/drawer";
使用方法
@atlaskit/drawer 提供了两种使用方法：控制受限和控制不受限。下面将详细介绍这两种使用方法以及常用的属性。
控制受限
在受控模式下，Drawer 组件需要通过 isOpen 属性来控制其打开、关闭状态。例如：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------ - ---- ------------------- -------- --------- - ----- -------- ---------- - ---------------- ------ - ------- --------------- ----------- -- ----------------- ------------ ------------- ------------ - ------- -- --- ------- ------ --- ----------- --------- -- -展开代码
在此示例中，isOpen 的初始值为 false，点击 Drawer 打开按钮时将其设置为 true，从而在画布中呈现 Drawer 内容。width 和 height 属性可以控制 Drawer 的宽度和高度，level 属性定义 drawer 蒙版 z-index 值。
控制不受限
在非受控模式下，Drawer 组件可以根据其自身内部状态控制打开、关闭状态，并使用 isOpen 属性的初始值设置初始状态。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------- -------- --------- - ------ - ------- ----------------------- ------------ ------------- ------------ - ------- -- --- ------- ------ --- ----------- --------- -- -展开代码
在此示例中，isOpenInitially 的初始值为 false，在初始渲染时 Drawer 显示为关闭状态。
高级属性定制
@atlaskit/drawer 提供了多个可选高级属性，用于定制 Drawer 的呈现和行为。
| 属性名 | 类型 | 描述 |
|---|---|---|
onOpen |
() => void |
Drawer 打开时的回调函数 |
onClose |
() => void |
Drawer 关闭时的回调函数 |
placement |
string |
Drawer 打开的方向，默认值为 left，可选值为 left、right、top 和 bottom |
icon |
ReactNode |
Drawer 打开按钮的图标 |
backdrop |
boolean |
绘制 Drawer 蒙版，默认值为 true |
shouldUnmountOnExit |
boolean |
Drawer 关闭时卸载组件，以减少 DOM 重复渲染，建议在嵌套 Drawer 时使用 |
在此示例中，将使用 icon 属性将默认的 Drawer 打开按钮更改为我们设置的图标。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------ - ---- ------------------- ------ -------------- ---- ----------------------------------- -------- --------- - ----- -------- ---------- - ---------------- ------ - ------- --------------- ----------- -- ----------------- ------------ ------------- ------------ --------------------- -------------------- --- - ------- -- --- ------- ------ --- ----------- --------- -- -展开代码
总结
本篇文章详细介绍了如何使用 @atlaskit/drawer 组件库来创建 web 应用程序中的抽屉。通过受控和非受控的控制方式，以及可选的高级属性，我们可以定制 Drawer 的行为和外观。这个组件库非常实用，方便快捷，经常用于实现个性化的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/atlaskit-drawer
