fusion-wc-people 
说明
用于选择和查看具有高级搜索功能和多种显示模式的人/用户的综合网络组件库.
构成部分
<fwc-people-picker>
具有搜索,键盘导航和多选择支持的交互人物选择器.
<fwc-people-viewer>
在列表或表格格式中以自定义列显示选中的人.
安装
npm install @equinor/fusion-wc-people
实例
<!-- Simple picker -->
<fwc-people-picker></fwc-people-picker>
<!-- Viewer with pre-loaded people -->
<fwc-people-viewer
resolveIds="azure-id-1,azure-id-2,azure-id-3"
viewMode="table">
</fwc-people-viewer>
活动
这个 fwc-people-picker 财务报告和审定财务报表 fwc-people-viewer 两者分享相同的事件.
<!--
Selection events
@selection-changed: PersonInfo[]
@person-added: PersonInfo
@person-removed: PersonInfo
-->
<fwc-people-picker
@selection-changed=${handler}
@person-added=${handler}
@person-removed=${handler}
></fwc-people-picker>
提供人员
它要求将这些组件用 fwc-person-provider 组件.
提供者通常由门户网站或cli提供,但也可以创建自定义提供者.
<!-- Wrap components in person provider -->
<fwc-person-provider>
<fwc-people-picker></fwc-people-picker>
</fwc-person-provider>
关键特性
- QQ 键盘导航( Arrow keys, Enter, Escape)
- QQ 取消搜索( 300ms)
- 👤 单/多选择模式
- 列表和表格视图模式
- QQ 神通定制
- 服务主要支助
属性
fwc - 人 - 拣取器
| 财产 | 类型 | 说明 |
|---|---|---|
people | PersonInfo[] | 将 PersonInfo 对象组设置为拾取器中选中的人 。 主要用于使用PersonPicker作为受控组件. |
resolveIds | string[] | 组合人物 azureIds 预解并显示为被选中的人 。 PS:只会在挂载时解决. |
placeholder | string | 搜索输入中显示的占位符文本 . |
multiple | boolean | 能否选择多人 。 默认为 true。 。 。 . |
showSelectedPeople | boolean | 是否显示输入下面的选定人员 。 默认为 true。这必须与 multiple 以行之有效. |
subtitle | keyof PersonInfo | PersonInfo的子标题文本字段在People Pills上显示. |
secondarySubtitle | keyof PersonInfo | 搜索结果列表中显示的 PersonInfo 的副字幕字段 . |
noResultTitle | string | 当建议的任务没有结果时显示标题 |
noResultSubtitle | string | 当建议任务没有结果时显示的字幕 |
fwc - 人民观看器
| 财产 | 类型 | 说明 |
|---|---|---|
people | PersonInfo[] | 查看器中要显示的 PersonInfo 对象矩阵 . |
resolveIds | string[] | 组合人物 azureIds 预解并显示为被选中的人 。 PS:只会在挂载时解决. |
viewMode | 'list | table' | 显示人群的视图模式 。 默认为 'list'。 。 。 . |
showViewMode | boolean | 是否显示视图模式选择器 。 默认为 true。 。 。 . |
tableColumns | string[] | 表格中要显示的列名组。 默认为 ['avatar', 'name', 'type', 'email', 'mobilePhone', 'jobTitle', 'department', 'manager', 'remove']。 。 。 . |
subtitle | keyof PersonInfo | PersonInfo的子标题文本字段在People Pills上显示. |