什么是 @atlaskit/droplist
@atlaskit/droplist 是一个基于 React 的 UI 组件库，用于在 Web 应用中创建下拉列表。
如何安装 @atlaskit/droplist
可以通过使用 npm 包管理工具来安装 @atlaskit/droplist。
在你的项目中运行以下命令即可安装：
npm install @atlaskit/droplist --save
如何使用 @atlaskit/droplist
@atlaskit/droplist 组件提供了许多可供个性化配置的选项，以便适应不同的应用场景。
导入组件
在项目的入口js文件中先导入组件：
import Droplist from '@atlaskit/droplist';
简单的下拉列表
接下来我们可以创建一个最基本的下拉列表：
<Droplist
isOpen={true}
shouldFitContainer={true}
trigger={<Button>Select item</Button>}
position="bottom left"
>
<Item>Hello World!</Item>
</Droplist>以上代码会创建一个拥有一个按钮触发器的下拉列表，这个列表包含了一个简单的项。
custom with a list of items
我们可以不仅增加一个项，而是很多项，甚至是静态数据。一下是使用 @atlaskit/droplist 组件的一个例子。
-- -------------------- ---- -------
----- ------------ - ------- - ----------- -------- --------- ----------- -------- ------- ------- -- ----- -- -- -
------- ---------------------------- - --------- - --------- ------------------------
----------------
----------------- - - --- - ---
---------
--
----- ---------- - ------- - ------ -------- -- -- -
---------
-- ------------------- --- ----
-------------------------
------------------
----------------------- --------------
---------------- -----
-
------ -------------- ---
--------------------- -- -
----- ---------- ---------------- --- ---------------------
---
--------
-----------
--
-------
----------- -------------- ------ -------- -------- --
--在以上片段中，我们期望自己完全重新使用 Item。
总结
@atlaskit/droplist 组件使得创建下拉列表大大变得简单。它提供了许多基础设置和可自定义的选项，供你灵活定制你的下拉列表。随着你在代码库中的不断迭代，你可能还需要添加样式来夹杂你的应用程序的个性化氛围。不论你是要创建日常使用的下拉列表，还是要开发客户端企业服务之外的产品，@atlaskit/droplist 是 Web应用中不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa88b5cbfe1ea06104eb