@fiscozen/行动

用于构建交互列表、菜单和可选择选项的 Versatile 动作组件.

特征

• 行动: 可作为按钮或链接的灵活动作组件
• 行动列表: 组织多种行动的集装箱
• Fz 行动科: 带标签的分区分隔符,用于组合动作
• 多个变体: textLeft, (中文(简体) ), textCenter, (中文(简体) ), onlyIcon
• 环境特有的结构: backoffice (契约)和 frontoffice (舒缓)
• 完全无障碍支持,可配置的ARIA角色
• 键盘导航和焦点管理
• 仅可读状态
• 带椭圆的文本调值
• 图标定位( 左, 右, 或仅图标)

安装

npm install @fiscozen/action

基本用途

Fz 动作作为按钮

<script setup>
import { FzAction } from '@fiscozen/action'
</script>

<template>
  <FzAction
    type="action"
    variant="textLeft"
    label="Click me"
    @click="handleClick"
  />
</template>

Fz 动作作为链接

<script setup>
import { FzAction } from '@fiscozen/action'
</script>

<template>
  <FzAction
    type="link"
    variant="textLeft"
    label="Go to page"
    to="/page"
  />
</template>

包含多个动作的 Fz 动作列表

<script setup>
import { FzActionList, FzAction } from '@fiscozen/action'
</script>

<template>
  <FzActionList>
    <FzAction type="action" variant="textLeft" label="Edit" />
    <FzAction type="action" variant="textLeft" label="Delete" />
    <FzAction type="action" variant="textLeft" label="Share" />
  </FzActionList>
</template>

Fz 分组行动科

<script setup>
import { FzActionList, FzAction, FzActionSection } from '@fiscozen/action'
</script>

<template>
  <FzActionList>
    <FzActionSection label="File" />
    <FzAction type="action" variant="textLeft" label="New" />
    <FzAction type="action" variant="textLeft" label="Open" />
    
    <FzActionSection label="Edit" />
    <FzAction type="action" variant="textLeft" label="Cut" />
    <FzAction type="action" variant="textLeft" label="Copy" />
  </FzActionList>
</template>

道具

行动

链接专用道具( 当 type="link":

只有图标的变体道具( 当 variant="onlyIcon":

行动列表

Fz 行动科

活动

行动

无障碍

ARIA 角色

这个 role 道具允许配置动作的语义作用 :

作为列表框选项( 如 FzSelect) :

<FzActionList role="listbox" aria-labelledby="select-label">
  <FzAction
    type="action"
    variant="textLeft"
    label="Option 1"
    role="option"
    :ariaSelected="true"
  />
  <FzAction
    type="action"
    variant="textLeft"
    label="Option 2"
    role="option"
    :ariaSelected="false"
  />
</FzActionList>

作为菜单 :

<FzActionList role="menu">
  <FzAction
    type="action"
    variant="textLeft"
    label="Edit"
    role="menuitem"
  />
  <FzAction
    type="action"
    variant="textLeft"
    label="Delete"
    role="menuitem"
  />
</FzActionList>

键盘导航

• 输入/ 空间: 触发动作( 当聚焦时)
• 标签: 将焦点移到下一个可聚焦元素
• 箭头键: 由母组件管理(例如FzSelect)

屏幕阅读器支持

• aria-disabled: 总是清晰地显示 "true" 或者说 "false" 数值
• aria-selected: 当 role="option" 以显示选择状态
• aria-label: 只为图标变量自动计算
• 文本截图: 可通过 title 属性

实例

仅限图标动作

<FzAction
  type="action"
  variant="onlyIcon"
  iconName="trash"
  iconVariant="solid"
  label="Delete"
  @click="handleDelete"
/>

带有图标的动作

<FzAction
  type="action"
  variant="textLeft"
  label="Settings"
  iconLeftName="gear"
  iconLeftVariant="solid"
  iconRightName="chevron-right"
  iconRightVariant="solid"
/>

使用子标签操作

<FzAction
  type="action"
  variant="textLeft"
  label="John Doe"
  subLabel="[email protected]"
  iconLeftName="user"
  iconLeftVariant="solid"
/>

残疾人行动

<FzAction
  type="action"
  variant="textLeft"
  label="Unavailable"
  disabled
/>

只读动作

<FzAction
  type="action"
  variant="textLeft"
  label="Read Only"
  readonly
/>

文本截断

<FzAction
  type="action"
  variant="textLeft"
  label="Very long text that will be truncated with ellipsis"
  isTextTruncated
/>

环境变式

<!-- Backoffice (compact) -->
<FzAction
  type="action"
  variant="textLeft"
  environment="backoffice"
  label="Compact action"
/>

<!-- Frontoffice (spacious) -->
<FzAction
  type="action"
  variant="textLeft"
  environment="frontoffice"
  label="Spacious action"
/>

页:1

• 默认环境数字 : backoffice (繁体语)
• 图标变体: 要求 @fiscozen/icons 软件包
• 链接功能: 要求 vue-router 财务报告和审定财务报表 @fiscozen/link 软件包
• ARIA 角色: 可选但建议在复杂组件中无障碍
• 文本切换: 适用于两者 label 财务报告和审定财务报表 subLabel
• 只读对已禁用:只读保持正常外观,但防止交互;已禁用显示灰色外观

相关构成部分

• Fz 选择: 用途 FzAction 与 role="option" 用于下拉选项
• 弗兹林克: 基准链接组件,当 type="link"
• 福兹康图标组件来自 @fiscozen/icons