@fiscozen/ 行动列表
⚠️ 被折旧用于外用——仅由内部使用,直到消费者移民.
新代码必须使用
@fiscozen/action(单位:千美元)FzActionList+ 键FzActionSection+ 键FzAction相反.此软件包仍然在 npm 上发布, 并且仍然可以构建, 因为它仍然被内部消耗
@fiscozen/table在消费者迁移到@fiscozen/action。不开发新功能,也不会重新导入错误修正。 故事书页面Navigation/FzActionList已记录替换.
动作列表是交互式动作或选项的垂直列表. 由以一致,单列格式呈现的项目组成.
迁移到 @fiscozen/ action
FzActionlist 从本套件地图到从 @fiscozen/action数字 :
<!-- Before: @fiscozen/actionlist -->
<FzActionlist
:label="label"
:items="items"
@fzaction:click="onClick"
/>
<!-- After: @fiscozen/action -->
<FzActionList :listClass="listClass">
<FzActionSection :label="label">
<FzAction
v-for="(item, index) in items"
:key="index"
:type="item.type === 'link' ? 'link' : 'action'"
variant="textLeft"
:label="item.label"
v-bind="item"
@click="onClick(index, item)"
/>
</FzActionSection>
</FzActionList>
显著差异 :
| 概念 | @fiscozen/actionlist | @fiscozen/action |
|---|---|---|
| 集装箱 | FzActionlist (单一部分) | FzActionList + 键 FzActionSection (编) |
| 区域标签 | label 打开道具 FzActionlist | label 打开道具 FzActionSection |
| 项目类型歧视者 | item.type: 'button' | 'link' | FzAction type: 'action' | 'link' (说明) 'button' → 'action'(中文(简体) ) |
| 图标 API | 单人 iconName 编号 : iconVariant (继承自 FzNavlink(中文(简体) ) | iconLeftName 编号 : iconLeftVariant 编号 : iconRightName 编号 : iconRightVariant (或 iconName 页:1 variant="onlyIcon"(中文(简体) ) |
| 点击事件 | fzaction:click 与 (index, item) | 本地语言 click 每个 FzAction |
| 逐项时段 | #fzaction-item-${index} | 默认每个槽 FzAction |
| 额外特性 | —— 说 | subLabel, 文本截图, readonly, (中文(简体) ), environment, (中文(简体) ), role, (中文(简体) ), ariaSelected,多种视觉变体 |
见 apps/storybook/src/stories/navigation/Actionlist.stories.ts 写着反对替换的犬科实例.