SharePoint Web 部件设计展示:创建待办事项列表属性窗格

本文介绍了如何创建待办事项列表 Web 部件。 此示例使用单窗格属性窗格类型,具有响应性且基于 Office UI Fabric 响应式窗格。

创建待办事项列表 Web 部件

  1. 添加有助于用户详细了解 Web 部件及其属性的说明。

    在此示例中,说明内容为“请选择待办事项源,并自定义任务列表的显示方式。”

    添加说明

  2. 添加已连接到列表的 Fabric 下拉组件

    添加 Fabric 下拉组件

  3. 添加 Fabric 复选框组件,显示已完成的任务。

    添加 Fabric 复选框

  4. 再添加两个复选框,用于控制显示选项。

    再添加两个 Fabric 复选框

  5. 添加 Fabric 滑块,用于控制最多可显示多少项。

    添加 Fabric 滑块

  6. 接下来,页面作者选择列表或手动添加任务,以预填充待办事项列表 Web 部件。

    在窗格中选择一个列表

    在展开的窗格中选择一个列表

    将任务手动添加到列表

  7. Web 部件指明要加载到页面上的项。

    指明项

  8. 加载列表项。

    要加载的列表项

    加载的新任务使用 Office UI Fabric 动画组件淡入视图。

    已加载的新任务

  9. 属性窗格控制 UI。 启用透视的任务通过属性窗格中的“显示”复选框显示。

    控制 Web 部件项的属性窗格

响应式视图

下面的示例展示了 2/3 列宽的 Web 部件视图。

2/3 列宽的视图

下面的示例展示了 1/3 列宽的 Web 部件视图。

1/3 列宽的视图

下面的示例展示了 Web 部件的移动(只读)视图。

待办事项列表 Web 部件的移动视图

另请参阅