Suggestion
Suggestion
A suggestion component for chat.
Importimport{ Suggestion }from"@ant-design/x"; |
Sourcecomponents/suggestion |
Ant Design XImportimport{ Suggestion }from"@ant-design/x"; |
Sourcecomponents/suggestion |
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| block | Take up the full width | boolean | false | - |
| children | Custom input box | ({ onTrigger, onKeyDown }) => ReactElement | - | - |
| items | Suggestion list | SuggestionItem[] | ((info: T) => SuggestionItem[]) | - | - |
| open | Controlled open panel | boolean | - | - |
| rootClassName | Root element class name | string | - | - |
| onSelect | Callback when the suggestion item is selected | (value: string) => void | - | - |
| onOpenChange | Callback when the panel open state changes | (open: boolean) => void | - | - |
type onTrigger<T> = (info: T | false) => void;
Suggestion accepts generics to customize the parameter type passed to items renderProps. When false is passed, the suggestion panel is closed.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| children | Child item for the suggestion item | SuggestionItem[] | - | - |
| extra | Extra content for the suggestion item | ReactNode | - | - |
| icon | Icon for the suggestion | ReactNode | - | - |
| label | Content to display for the suggestion | ReactNode | - | - |
| value | Value of the suggestion item | string | - | - |
Basic usage. State management in controlled. Custom trigger.
Set block to display in a whole row. extra can be used to configure additional information.
Dynamically display suggestions with multiple tags based on input.
