logoAnt Design X

设计研发组件演示
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • ThoughtChain思维链
  • 工具
    • useXAgent模型调度
    • useXChat数据管理
    • XStream流
    • XRequest请求
    • XProvider全局化配置

Suggestion
快捷指令

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

相关资源

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

何时使用

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

代码演示

基本用法

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

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

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)