@micka_design: 对 AskUserQuestions 组件两个最常被请求的调整进行了一些生活质量改进： - 自由格式"…"

X AI KOLs Timeline 工具
component open-source ui quality-of-life community-driven react

摘要

AskUserQuestions 组件的体验优化：基于社区反馈，新增自由文本的“其他”文本框和左对齐的标签布局。

为 AskUserQuestions 组件做了两项呼声最高的改进，提升了使用体验： - 自由填写的“其他”选项现在是一个真正的文本输入框 - 新增左对齐的芯片布局变体 该组件的反响出乎意料的好，已经有团队在生产环境中使用，并引发了热烈的讨论。 这就是社区驱动的开源精神。 http://fluidfunctionalism.com/docs/ask-user-questions… 欢迎继续反馈，每一条都在塑造这个组件的发展方向。
查看原文
查看缓存全文

缓存时间: 2026/06/01 23:51

对 AskUserQuestions 组件进行了两项最受欢迎的优化，提升了生活质量：

  • “其他”自由输入选项现在是一个真正的文本域
  • 新增芯片布局变体（左对齐）

该组件的反响异常热烈，团队已将其应用于生产环境，并引发了大量讨论。这正是社区驱动开源的最佳体现。
http://fluidfunctionalism.com/docs/ask-user-questions…

请继续提供反馈，它正在塑造一切。

Fluid Functionalism

来源：https://www.fluidfunctionalism.com/docs/ask-user-questions

AskUserQuestions

带步骤的问题流，提供 2–5 个选项，支持单选或多选、内联“其他”输入、可选跳过以及多问题导航。

安装

示例

多个问题

多选

带其他输入

可跳过

芯片左对齐

堆叠布局

受控模式

API 参考 — AskUserQuestions

PropTypeDefaultDescription
questionsAskUserQuestion[]—按顺序排列的问题列表。建议每个问题提供 2–5 个选项。
currentIndexnumber—受控模式下当前活动问题的索引。
defaultCurrentIndexnumber0非受控模式下初始问题索引。
onCurrentIndexChange(index: number) => void—当活动问题改变时调用。
answersRecord<string, AskUserAnswer>—受控模式下按问题 ID 键控的答案映射。
defaultAnswersRecord<string, AskUserAnswer>—非受控模式下初始答案。
onAnswersChange(answers: Record<string, AskUserAnswer>) => void—当任何答案发生改变时调用。
onComplete(answers: Record<string, AskUserAnswer>) => void—当最后一个问题被回答或提交后调用。
onSkip(questionId: string, index: number) => void—当用户点击某个问题的“跳过”时调用。
skipLabelstring“Skip”头部跳过控件的标签。

API 参考 — AskUserQuestion

PropTypeDefaultDescription
idstring—用于标识答案的稳定 ID。若未提供则回退到位置索引。
titlestring—选项上方的问題文本。
optionsAskUserOption[]—2–5 个可供选择的选项。
multiSelectbooleanfalse是否允许选择多个选项。底部会添加“下一步”按钮。
allowOtherbooleanfalse是否渲染一个始终可见的内联文本域，用于自由格式的多行回答。在单选模式下按 Enter 提交；Shift+Enter 换行。
otherPlaceholderstring“Describe in your own words…”其他输入框的占位符。
skippablebooleantrue是否显示头部的跳过控件。
nextLabelstring—多选模式下“下一步”按钮的标签。默认为“Next”或“Finish”。
layout“inline” | “stacked”“inline”行布局。‘stacked’ 将描述放在标题下方的单独行上——适合描述较长需换行时使用。
chipPosition“left” | “right”“right”数字芯片在行中的位置。选择 ‘left’ 时，单选的提交箭头仍位于行的右侧边缘。适用于单选/多选、allowOther 以及 inline/stacked 布局。

API 参考 — AskUserOption

PropTypeDefaultDescription
idstring—在答案中返回的稳定 ID。若未提供则回退到位置索引。
titlestring—选项的加粗主标签。
descriptionstring—标题后面的次要灰色文本。

API 参考 — AskUserAnswer

PropTypeDefaultDescription
questionIdstring—该答案所属问题的 ID。
selectedIdsstring[]—所选选项的 ID 列表。单选时长度为 0–1，多选时为 0–N。
otherTextstring—来自“其他”输入框的自由格式文本（如果有）。
skippedboolean—当用户跳过了该问题时为 true。

相似文章