若要开始设计 Web 部件，你需要熟悉 Office UI Fabric。 来自 Fabric 核心的所有样式包括图标、版式、颜色用法、动画和响应网格已默认加载且可用于 Web 部件。
因为这可能会与全局副本冲突，所以请勿导入 Web 部件的 Fabric 副本。 这些类提供 Web 部件样式的基础，如果需要不同的视觉效果以匹配公司品牌，你可以随时离开。
Office UI Fabric React 组件
结合 Office UI Fabric，你可以使用 Office UI Fabric React 组件来构建 Web 部件。 Fabric React 是一个快速响应、移动优先的组件集合，旨在使用 Office 设计语言来快速简便地创建 Web 体验。
下面待办事项列表示例在属性窗格中使用 Fabric 组件以使页面作者可配置 Web 部件。
你可以在“Office UI Fabric 样式”中查找 Office UI Fabric 样式、版式、颜色、图标和动画的完整列表。
响应行为
新 SharePoint 创作体验中的页面使用 Office UI Fabric 响应网格来帮助确保每个页面的效果。
最大宽度
我们建议所有 Web 部件都使用 100% 最大宽度，以确保它们会重排并在任何页面上正常运行。 页面和列的宽度由页面模板定义，但可以由作者修改。 如果在 Web 部件中设置了最大像素值，当看到页面具有不同宽度时，可能会导致功能和布局出现意外结果。
最小宽度
页/列宽度减小到最小宽度 320 像素时，所有 Web 部件应可进行重排。
Web 部件编辑模式
新的 SharePoint 页面创作体验有两种模式：
- 已发布模式，允许你的团队或受众查看内容并与 Web 部件交互。
- 编辑模式，允许页面作者添加和配置 Web 部件以将内容添加到页面。
以下部分介绍了编辑模式。
添加提示和工具箱
“添加提示”是一条有加号图标的横线，在 Web 部件被选中时可见，并在用户悬停鼠标时指明页面作者可以将新 Web 部件添加到页面上的哪个位置。 工具箱会在用户选择加号图标时打开。 工具箱包含可添加到页面中的所有 Web 部件。
工具栏
垂直工具栏和边界框是每个 Web 部件框架的一部分，并且由页面提供。 所有 Web 部件的工具栏中都有编辑和删除操作。
上下文编辑
应为 Web 部件设计 WYSIWYG/所见即所得体验，以填写信息或添加发布时向用户显示的内容。 应在页面上输入此内容，以便用户了解查看者看到的内容。 例如，应在显示文本的位置填写标题和描述或者应在页面的上下文中添加和修改新任务。
项目级编辑
UI 会在 Web 部件中更改；例如，将文本插入文本字段以填写链接时、显示 UI 以对项目重新排序或检查 Web 部件中的任务时。
属性窗格
通过工具栏上的编辑操作图标调用属性窗格。 窗格应主要包含配置设置，启用/禁用功能以显示在页面上或调用服务来显示内容。
有三种类型的属性窗格使你可以设计和开发 Web 部件，使其符合你的业务或客户需求。
单个窗格
单个窗格用于简单的 Web 部件（仅有少量的属性要配置）。
可折叠项窗格
可折叠项窗格用于包含一组或多组具有许多选项的属性，其中组将生成较长的选项滚动列表。 例如，可能有三个组，分别名为“属性”、“外观”和“布局”，每组都有十个组件。
可折叠项 - 一个组打开
可折叠项 - 两个组打开并滚动
属性窗格步骤/页面
步骤窗格用于在需要按线性顺序配置 Web 部件或对第二个步骤中显示的第一个步骤影响选项做出选择时，对多个步骤或页面中的属性进行分组。
第 1 步（共 3 步）
第 2 步（共 3 步）
第 3 步（共 3 步）
反应与非反应 Web 部件
反应 Web 部件旨在作为完整的客户端 Web 部件，即当页面上的 Web 部件进行更改时属性窗格中配置的每个组件均会反映出来。 对于待办事项 Web 部件，取消选中“已完成任务”会在 Web 部件中隐藏此视图。
非反应 Web 部件不完全是客户端且通常需要调用一个或多个属性以设置/拉取数据或将数据存储在服务器上。 在这种情况下，你应该启用属性窗格底部的“应用”和“取消”按钮。
构造待办事项列表属性窗格
待办事项列表示例使用单个窗格且是反应 Web 部件。 以下关系图显示每个 Fabric React 组件和最终设计。
为待办事项列表添加描述
下拉列表 – 从现有列表中选择任务
复选框 – 允许作者显示或隐藏不同视图
滑块 – 设置可见任务的数量
从下拉列表中选择列表后，Web 部件指明要加载到页面上的项
加载的新任务使用 Office UI Fabric 动画样式淡入视图
