ChoiceCard 选项卡片

安装

pnpm add @talex-touch/tuffex

import { TxChoiceCard } from '@talex-touch/tuffex/choice-card'
import '@talex-touch/tuffex/choice-card/style.css'
// 卡片内部渲染 TxIcon 与 TxSkeleton，它们的样式表需单独引入
import '@talex-touch/tuffex/icon/style.css'
import '@talex-touch/tuffex/skeleton/style.css'
import '@talex-touch/tuffex/base.css' // 设计令牌与重置样式，全应用引入一次

用法

单个问题

selected 标出已选项；设置 disabled 的选项不可选。

分步引导

宿主在 select 中更新 v-model:step 翻页；columns="2" 让选项两个一行。

加载中

loading 在选项行自己的盒子里绘制骨架行，选项到达时页面不跳动。

最佳实践

• 每步只问一个问题，给三到六个答案。
• 在 select 中更新 v-model:step 翻页；selected 传当前页的答案，回到上一步时仍能看到。
• loading 经 useDeferredLoading 绑定，loadingRows 设为即将到来的答案数。
• 需要前置条件的选项保留为禁用，并在说明里写明条件。
• 按页面语言传入 prevLabel、nextLabel、stepLabel；卡片只带英文默认值。

API 参考

属性

事件

插槽

类型

ChoiceStep，steps 中的一项：

ChoiceOption，一个答案：

import type {
  ChoiceCardColumns, // 1 | 2
  ChoiceCardEmits,
  ChoiceCardProps,
  ChoiceOption,
  ChoiceSelectPayload, // { step, stepIndex, option }
  ChoiceStep,
  ChoiceStepLabelFormatter, // (current, total) => string
  TxChoiceCardInstance,
} from '@talex-touch/tuffex/choice-card'

CSS 变量

这些变量可设在卡片或任意祖先元素上；组件只在每行写入 --tx-choice-card-index（入场错落序号）。

概述

• 语义：以问题命名的 <section>，选项是 <ul role="list"> 中的原生 <button>，名称取自标题、描述取自说明；已选项打勾并带 aria-current="true"，颜色不是唯一标记。
• select 从不翻页。不传 step 时卡片自行记页并派发 update:step；至少两页才渲染分页，计数是 role="status" 区域。
• 键盘：列表只占一个 Tab 落点（已选项，否则第一个可用项）；上下键循环移动，两列时左右键按阅读顺序移动，Home / End 到首尾，跳过禁用项。
• 翻页时焦点若在列表内，移到新页的落点；正在使用的箭头变为禁用时，焦点移到另一个箭头。
• 两列在卡片窄于 480px 时退回一列（容器查询），方向键按实际渲染的列数移动。
• 入场与翻页动画都是新节点上的 CSS 动画，选项第一帧即可点击；减少动态效果时不播放。

技术实现

• 骨架行沿用选项行自己的容器，内放 TxSkeleton 骨架条。
• 源码：packages/tuffex/packages/components/src/choice-card/。

使用场景

• 助手的开场引导：「我们先从哪件事开始？」，每步一个问题。
• 卡片出现后才到达的「为你准备」推荐列表。
• 回看已回答的问题：selected 标出当时的选择。

相关组件