前言
在前端开发中，UI 框架是十分重要的组成部分。微软公司推出的 Office UI Fabric React 是基于 React 的 UI 框架，旨在为开发者提供漂亮且易用的组件。本文介绍如何使用 npm 包 @microsoft/office-ui-fabric-react-bundle 并提供示例代码，希望能够帮助开发者更好的使用该框架。
安装和使用
- 首先，需要安装 npm 包 @microsoft/office-ui-fabric-react-bundle 。可以通过以下命令进行安装：
npm install @microsoft/office-ui-fabric-react-bundle
- 安装完成后，需要在组件中引入需要使用的组件。例如，我们需要使用 Button 组件，需要在组件中引入：
import { Button } from "@microsoft/office-ui-fabric-react-bundle"; - 现在，可以在组件中使用 Button 组件了。示例代码如下：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------------------------- ----- -------- - -- -- - ------ - -------- ----- --- --------- -- - ------ ------- ---------
组件的常用属性
Office UI Fabric React 提供了许多常用组件，每个组件都有不同的属性。下面提供了三个常见组件的常用属性：
Button
| 属性 | 描述 |
|---|---|
| primary | 是否为主要按钮，可选 true/false |
| disabled | 是否禁用，可选 true/false |
| href | 链接地址，可选 string |
| onClick | 点击事件，可选 function |
TextField
| 属性 | 描述 |
|---|---|
| label | 输入框名称，可选 string |
| placeholder | 提示内容，可选 string |
| disabled | 是否禁用，可选 true/false |
| multiline | 是否多行输入，可选 true/false |
| rows | 多行输入的行数，可选 number |
Dropdown
| 属性 | 描述 |
|---|---|
| label | 下拉菜单名称，可选 string |
| options | 下拉菜单选项，可选 IOption[] |
| defaultSelectedKey | 默认选中项的 key 值，可选 string |
| disabled | 是否禁用，可选 true/false |
| onChanged | 选中项改变事件，可选 function |
实战示例
下面提供一个示例代码，包含 Button、TextField 和 Dropdown 三个组件，实现了一个简单的表单。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- - ---- -------------------------------------------
------ - ------- ---------- --------- --------------- - ---- -------------------------------------------
----- -------- ----------------- - -
- ---- ---------- ----- ------- -- --
- ---- ---------- ----- ------- -- --
- ---- ---------- ----- ------- -- -
--
----- ------ - -- -- -
----- ------------ -------------- - -------------
----- ---------------- ------------------ - ------------------------ - ----------------------
----- ------------ - -- -- -
------------- -------------- ------- --------------------------
------------------
-----------------------------
--
----- ------------------ - ------- -------------------------------- -------- ---------------- -- -
--------------------------
--
------ -
------ --------------------- --------- ------------ -- ---
----------
------------ ----------
------------------
----------------- ------ -- ------------------- -- ----
--
---------
------------- -- -------
-----------------
---------------------------------
-----------------------------
--
-------
-------
--------------------- -- ----------------
----------------------
-
------
---------
--------
--
--
------ ------- -------结语
本文介绍了 Office UI Fabric React 框架的 npm 包 @microsoft/office-ui-fabric-react-bundle 的使用方法，包括安装、引入组件、组件常用属性以及实战示例。希望能够为开发者提供帮助，使开发更加方便快捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac5db5cbfe1ea06109e6