如何配置SharePoint Framework web part （一）基础控件

在SharePoint服务器端webpart开发中，我们可以在webpart的属性编辑器中自定义webpart的属性，来配置webpart。在使用SharePoint Framework创建的客户端webpart中，一样可以方便的自定义webpart的属性编辑面板，添加新的属性来配置我们的webpart。

在创建完成一个webpart项目之后，webpart属性编辑面板中会默认添加一个属性description:

这个description属性，是在webpart中，通过如下代码添加的。首先在webpart的属性中，定义description:

export interface IPropertyPaneWebPartProps {
  description: string;
}

然后在“getPropertyPaneConfiguration”方法中，定义这个属性的编辑控件，从名字"PropertyPaneTextField"可以看出来，这是一个文本框：

以上代码就是定义description属性，并且在属性编辑面板里展示一个文本框。当用户修改文本框中的值的时候，webpart会将新的值保存起来，作为webpart的配置，这样我们在webpart开发中就可以使用this.properties.description获取属性值了。

先来看属性编辑面板，这个属性编辑面板包含如下三个部分：

1， 页面（page）

页面包含header属性，用来作为page的标题或者描述，也包含组，一个组是一些属性控件的集合。在pages这个数组中可以添加多个页面，如果指定了多个页面，会自动分页显示各个页面。

2，组（group）

组包含一个groupName属性，用来指定组的名字，组是属性控件的集合，可以将不同的属性控件放在不同的组里。在groups这个数组中可以添加多个组。

关于页面和组的其他属性，可以参考使用SharePoint Framework开发webpart的一些技巧汇总

3,  属性控件（field）

属性控件用来展示和编辑属性值。在groupFields这个数组中配置。除了这个“PropertyPaneTextField”属性控件之外，目前SharePoint Framework提供的开箱即用的属性控件有：

• Button
• Checkbox
• Choice group
• Dropdown
• Horizontal rule
• Label
• Link
• Slider
• Textbox
• Multi-line Textbox
• Toggle
• Custom (用于自定义属性控件)

在使用它们之前，首先需要导入这些控件：

import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneButton,
  PropertyPaneCheckbox,
  PropertyPaneChoiceGroup,
  PropertyPaneDropdown,
  PropertyPaneLabel,
  PropertyPaneLink,
  Proper