Fluent UI 是一款基于 React 的组件库，提供了很多常用的界面组件。其中，@fluent-ui/core 是 Fluent UI 组件库的核心库，包含了一些基本的 UI 组件，如按钮、文本框、下拉框等。在本篇文章中，我们将详细介绍如何使用 @fluent-ui/core 这个 npm 包来构建我们自己的 Web 应用。
安装
首先，我们需要使用 npm 安装 @fluent-ui/core 包。在命令行中执行以下命令：
--- ------- ---------------
该命令将安装 @fluent-ui/core 包到当前项目中。
在你的项目代码中引入 @fluent-ui/core：
------ - ------ - ---- -----------------
这段代码将会导入 @fluent-ui/core 中的 Button 组件。
使用
Button
Button 是 @fluent-ui/core 中的一个常见组件，用于创建按钮。使用 @fluent-ui/core 中的 Button 组件比起直接使用 HTML <button> 元素更加方便，因为 @fluent-ui/core 中的 Button 组件具有更高的可定制性。
在实际使用中，我们可以按照以下方式来创建一个 Button：
------ - ------ - ---- -----------------
-------- ------------- -
------ -
------------- -----------
-
-这段代码将会创建一个按钮，显示文字 "Click me"。
我们也可以使用不同的颜色、大小和形状来定制按钮：
------ - ------ - ---- -----------------
-------- ------------- -
------ -
-----
------- ---------------------------- ---------------
------- -------------------------------- ---------------
------- ---------------------------- ---------------
------- ------------------------ ---------------
------- ------------------------------------ ---------------
------- ---------------------- ---------------
------
-
-这段代码将会创建六个不同样式的按钮。
TextField
TextField 是 @fluent-ui/core 中的另一个常用组件，用于创建文本框。和 Button 组件类似，使用 @fluent-ui/core 中的 TextField 组件比起直接使用 HTML <input> 元素更加方便。
我们可以按照以下方式来创建一个 TextField：
------ - --------- - ---- -----------------
-------- ------------- -
------ -
---------- --
-
-这段代码将会创建一个空的文本框。
我们可以使用不同的属性来定制 TextField：
------ - --------- - ---- -----------------
-------- ------------- -
------ -
---------- ---------------- ------------------ ---- --------- --
-
-这段代码将会创建一个带有标签 "Username" 和提示 "Enter your username" 的文本框。
Dropdown
Dropdown 是 @fluent-ui/core 中的下拉框组件，用于在一个给定的列表中选择一个或多个选项。使用 @fluent-ui/core 中的 Dropdown 组件比起手动创建 <select> 元素更加方便，因为 Dropdown 组件提供了更多的样式选项和回调函数。
我们可以按照以下方式来创建一个 Dropdown：
------ - -------- - ---- -----------------
----- ------- - -
- ---- ---- ----- ------- -- --
- ---- ---- ----- ------- -- --
- ---- ---- ----- ------- -- --
-
-------- ------------- -
------ -
---------
-----------------
------------------- -- -------
--
-
-这段代码将会创建一个带有三个选项的下拉列表，并显示 "Select an option" 提示。
我们可以使用不同的属性来定制 Dropdown：
------ - -------- - ---- -----------------
----- ------- - -
- ---- ---- ----- ------- -- --
- ---- ---- ----- ------- -- --
- ---- ---- ----- ------- -- --
-
-------- ------------- -
------ -
---------
-----------------
------------------- -- -------
---------------
-------- ------ --- --
--
-
-这段代码将会创建一个水平排布的下拉列表，并显示 "Select an option" 提示，且下拉列表的宽度为 200 像素。
总结
在本文中，我们介绍了如何使用 @fluent-ui/core 包来构建自己的 Web 应用。我们展示了如何创建和定制 Button、TextField 和 Dropdown 等常见 UI 组件。这些知识可以帮助你更加方便、快捷地构建你的 Web 应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/150879