TinyRobot SuggestionPills紧凑型建议按钮组组件新版功能特性解析

TinyRobot SuggestionPills：紧凑的建议按钮组组件

在 AI 对话界面中，用户常常需要在入口处快速选取预设的操作或提问方向。传统的下拉菜单或长列表虽然能容纳大量选项，但交互路径长，不够直观。而采用 Pill 风格的建议按钮，则提供了一种更紧凑、更直观的方案——将建议项以胶囊按钮的形式排列展示，用户一目了然，点击即达。

SuggestionPills 正是 TinyRobot 为这一场景提供的组件，它具备以下核心能力：

• 紧凑排列：多个建议项以胶囊按钮横向排列，节省纵向空间。
• 溢出处理：当建议项超出容器宽度时，支持展开（expand）或横向滚动（scroll）两种模式。
• 展开/收起：通过 showAll 控制是否展开全部项，并支持 hover 和 always 两种"更多"按钮显示时机。
• 自动滚动：支持鼠标悬停或点击时自动滚动到可见区域。
• 自定义按钮：每个药丸按钮可自定义文本和图标，还支持与 DropdownMenu 组合使用。
• 点击外部：提供 click-outside 事件，方便实现点击组件外部收起等交互。

基本用法：带 items 的 SuggestionPills

最简单的用法是在 SuggestionPills 内直接放置多个 SuggestionPillButton，每个按钮对应一个建议项。

SuggestionPillItem 类型定义了每个按钮的数据结构，text 和 icon 至少需要提供一个：

type SuggestionPillItem =
  | { text: string; icon?: VNode | Component }
  | { text?: string; icon: VNode | Component }

showAll 切换：展开收起折叠项

当建议项较多时，SuggestionPills 默认只显示容器宽度范围内的项，超出的部分被折叠。通过 v-model:showAll 可以控制是否展开全部项。

showAllButtonOn 属性控制"更多"按钮的显示时机：

• 'hover'（默认）：鼠标悬停在组件上时才显示"更多"按钮。
• 'always'：始终显示"更多"按钮。

overflowMode：展开 vs 滚动

overflowMode 决定了当建议项超出容器宽度时的展示方式，有两个选项：

• 'expand'（默认）：超出的项折叠隐藏，通过 showAll 展开。
• 'scroll'：所有项横向排列，通过横向滚动查看。

自定义药丸按钮：带图标

SuggestionPillButton 支持通过 icon 插槽或 item.icon 属性添加图标。下面演示使用 icon 插槽自定义图标：

也可以通过 item 属性直接传入图标组件，无需使用插槽：

autoScrollOn 行为

autoScrollOn 属性控制药丸按钮在溢出容器时是否自动滚动到可见区域，支持两种触发方式：

• 'mouseenter'：鼠标悬停到按钮上时自动滚动。
• 'click'：点击按钮时自动滚动。

配合 DropdownMenu 实现更多选项

在实际场景中，药丸按钮点击后可能需要展示更多操作选项。这时可以将 TrSuggestionPillButton 作为 TrDropdownMenu 的触发器，实现"按钮点击 → 弹出下拉菜单"的交互。

API 参考

SuggestionPillsProps

SuggestionPillButtonProps

Slots

SuggestionPills 插槽：

SuggestionPillButton 插槽：

Events

Types

type SuggestionPillItem =
  | { text: string; icon?: VNode | Component }
  | { text?: string; icon: VNode | Component }