2017年2月13日,星期一

SharePoint框架中的Web部件属性– part 2

在本文中,我将继续研究可用于SPFx中Web部件属性的现成控件。我认为团队在Web部件属性的工作方式方面做得很好–在控件方面,您始终可以创建自己的控件’很高兴知道你经常不穿’不必。您可以将大多数内容表示为Web部件属性-我们具有下拉菜单,复选框,滑块,切换器等。和我们一样’在这里会看到,即使是不起眼的按钮也有很多选项。

注意–在这些文章中,我对每个控件的最重要属性进行了描述(部分基于我在使用它们时所观察到的细微差别),但请务必参考 关icial docs 对于那些。我的帖子的重点是显示每个控件的可视屏幕截图,并添加一些额外的提示/信息,而不是重复文档。

按钮(PropertyPaneButton)

如果您需要使用Web部件属性窗格中的按钮,那么好消息是有很多选择!

看起来像什么:

SNAGHTML2e77658e

顺便说一句,每个按钮之间的线都在那里,因为我’m使用水平规则(PropertyPaneHorizo​​ntalRule控件)将每个–您可以使用另一个有用的控件来帮助您呈现Web部件属性。

码:

所有按钮都有一些共同的属性,这很容易解释,但是请注意,某些属性仅适用于某些按钮类型。这里是一些关键的,但也看到了 ipropertypanebuttonprops 有关用于屏幕阅读器的'aria'属性的一些其他详细信息。

特性:

属性

描述

文本 按钮上显示的文字。
buttonType

从PropertyPaneButtonType枚举中指定要显示的按钮的类型:

  • 正常
  • 英雄
  • 复合
  • 命令
  • 图标
onClick 指向单击按钮时要执行的功能的指针。 N.B.与Web部件属性和上下文进行交互时,还有一些其他选项,请参见‘按钮和绑定属性’ and ‘Context – ‘this’ in click handler’部分以获取更多详细信息。
图标 仅用于英雄和图标按钮。指定一个与Office UI Fabric图标集中的图标名称匹配的值- //dev.office.com/fabric#/styles/icons#icons
描述 仅用于复合按钮–显示为辅助文本
残障人士 指定是否禁用控件。

按钮的其他方面

按钮和绑定属性

按钮可以绑定到Web部件的属性–这是可选的,可以通过为第一个参数指定一个与您定义的属性匹配的值来完成(请注意’对于上述示例中的大多数按钮而言,是一个空字符串)。我认为这是一种挂钩Web部件本身状态/属性的好方法。如果您需要在单击按钮时设置Web部件属性,这将很有用。–也许您想跟踪是否曾经单击过该按钮,以便可以启用/禁用其他控件或其他类似情况。您可以更新属性‘manually’自己在代码中,但是很高兴的是将旧值传递给您的onClick处理程序,然后从函数中返回值将设置新值,这使事情变得简单。该模式如下所示:

私人heroButtonClick(oldVal:任何):任何{
    if (oldVal === "Something old") {
      // do something..
    }
    return "Something new";
  }

在上面显示按钮声明的较大代码示例中,您可以看到大多数按钮未绑定到属性(第一个参数是一个空字符串),但是英雄按钮绑定到了一个名为的Web部件属性。‘btnHero’。这是在manifest.json文件中定义的,并且像任何Web部件属性一样,我可以在其中设置默认值。如果只需要一个简单的按钮单击处理程序,则可以在不使用参数且不返回值的情况下声明该函数。

语境– ‘this’ in click handler

如果您以常规方式指定点击处理程序(例如onClick:this.cobWPPropButtonClick),则在函数内部‘this’将代表按钮。如果您想知道哪个按钮触发了处理程序,这很有用,也许是因为您有多个共享同一回调的按钮。如果出于任何原因‘this’ to represent the overall web part class, you can bind with onClick: 这个.wpPropButtonClick.bind(this).

概要:

  • if you want context of button, bind with onClick: 这个.wpPropButtonClick
  • 如果您想停留在整体类/ Web部件的上下文中,请与  onClick: 这个.wpPropButtonClick.bind(this)
图示

若要使用一种使用图标的按钮类型(“英雄”或“图标”按钮),请在Office UI Fabric中引用命名的图标。这些可以在下面找到 //dev.office.com/fabric#/styles/icons#icons,并且有很多可供选择:

SNAGHTML353fe5

的确,我花了整整10分钟的时间来娱乐自己,创建带有一些较不寻常图标的按钮 微笑

SNAGHTMLeb041

哈哈!反正那里’那里有很多灵活性,’绝对有可能创建可带来良好用户体验的按钮。只是不要’t go too crazy 眨眼的微笑

切换控件(PropertyPaneToggle)

Toggle控件非常简单,并且适合任何可以打开或关闭,启用或禁用的布尔型变量。

看起来像什么:
SNAGHTMLd65894d SNAGHTMLd6630a9

请注意,有分别显示开状态和关状态的单独标签。如果在切换状态更改时需要执行一些代码,请注意,整个getPropertyPaneConfiguration()方法此时都在运行–实际上,只要控件在反应式属性窗格中更改状态,它就会执行此操作(但不会如此)。这应该提醒您,您需要保持此方法的精简,并且仅在绝对需要时才进行异步查找,而不是在每次执行时都进行。

码:
特性:

属性

描述

标签 控件旁边显示的文本。
onText

指定当在‘on’ state.

关Text

指定当在‘off’ state.

已检查 用于设置切换状态。
标识控件的唯一键。
残障人士 指定是否禁用控件。

滑块控件(PropertyPaneSlider)

当您要允许用户在值的范围(最小/最大)中进行选择时,滑块控件是完美的选择。它’可以选择‘step’值,例如以5、10或任何您需要的增量上升。

看起来像什么:
SNAGHTML9c6b7ad
码:
特性:

属性

描述

标签 控件旁边显示的文本。

指定最小值(下限)。

最高

指定最大值(上限)。

指定当拖动或单击滑块时可以增加值的增量。

showValue

如果当前值应显示在控件旁边(在我的图像中启用)。
指定初始值。
残障人士 指定是否禁用控件。

选择组控件(PropertyPaneChoiceGroup)

该控件允许用户进行选择,但带有单选按钮而不是下拉列表。它与DropdownList控件的工作方式相似,因为它需要一个选项数组。这里一个显着的区别是,如果您不这样做’如果不想使用普通的单选按钮,也可以使用图像。

外观(单选按钮):
SNAGHTMLeea9bf7
代码(上面显示的单选按钮选项):
外观(单选按钮):
SNAGHTML112bb4d7

请注意,实际上您可以为选择该选项时和未选择该选项时指定不同的图像。

代码(用于上面显示的图像):
特性:

属性

描述

标签 控件旁边显示的文本。
选项 IPropertyPaneChoiceGroupOption项的集合,用作选项。
IPropertyPaneChoiceGroupOption的属性:

属性

描述

项目的唯一键。
文本 该项目的文字。
imageSrc 使用图像而不是单选按钮时要使用的图像的URL。 (到目前为止,我只测试了绝对URL)
图片尺寸 包含height / width属性的对象,用于指定图像的大小。
已检查 Used to specify if 这个 item is selected.
残障人士 Specifies if 这个 item is 残障人士 (not available for selection).

链接控件(PropertyPaneLink)

一个简单的控件使您可以在Web部件属性窗格中放置链接-可以用于提供指向某些帮助或指南的链接。

看起来像什么:
SNAGHTML1af5543
码:
特性:

属性

描述

文本 链接的文字。
href 超链接目标。
目标 使用窗口–选项包括_self(默认),_ parent,_top和_blank。
popupWindowProps 一个对象,用于指定弹出窗口(IPopupWindowProps)的宽度,高度,标题和位置。
残障人士 指定是否禁用链接。

概要

There are lots of out-of-the-box controls you can use when implementing web part properties in the SharePoint Framework. In 这个 post we looked 在 the Button, Slider, Toggle, ChoiceGroup and Link controls –但也有其他的,包括 文字框,下拉框和复选框控件 这是我之前写的。提供可用的Web部件的很大一部分通常是围绕用户如何设置属性的注意事项,因此要知道’工具箱中的s对SharePoint开发人员很重要。