logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
    • Notification系统通知
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • Sources来源引用
    • Think思考过程
    • ThoughtChain思维链
  • 反馈
    • Actions操作列表
    • FileCard文件卡片
  • 其他
    • XProvider全局化配置

Suggestion
快捷指令

用于给予用户快捷提示的组件
使用import { Suggestion } from "@ant-design/x";
源码components/suggestion
文档
编辑此页...
更新日志

何时使用

  • 需要构建一个对话场景下的输入框

代码演示

API

通用属性参考:通用属性

SuggestionsProps

属性说明类型默认值版本
block是否整行宽度booleanfalse-
children自定义输入框({ onTrigger, onKeyDown }) => ReactElement--
items建议项列表SuggestionItem[] | ((info: T) => SuggestionItem[])--
open受控打开面板boolean--
rootClassName根元素样式类名string--
onSelect选中建议项回调(value: string) => void--
onOpenChange面板打开状态变化回调(open: boolean) => void--

onTrigger

typescript
type onTrigger<T> = (info: T | false) => void;

Suggestion 接受泛型以自定义传递给 items renderProps 的参数类型,当传递 false 时,则关闭建议面板。

SuggestionItem

属性说明类型默认值版本
children子项目SuggestionItem[]--
extra建议项额外内容ReactNode--
icon建议项图标ReactNode--
label建议项显示内容ReactNode--
value建议项值string--

主题变量(Design Token)

全局 Token如何定制?
基本用法

基础用法,受控进行状态管理。自定义触发器。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
整行宽度

通过 block 改为整行展示,extra 可用于配置额外信息。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
 
可任意输入 / 与 # 多次获取建议
自定义

根据输入动态展示建议项的多标签示例。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code