Conversations
Conversations
Used to manage and view the conversation list
Importimport { Conversations } from "@ant-design/x"; |
Sourcecomponents/conversations |
Ant Design XImportimport { Conversations } from "@ant-design/x"; |
Sourcecomponents/conversations |
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| activeKey | Currently selected value | string | - | - |
| defaultActiveKey | Default selected value | string | - | - |
| items | Data source for conversation list | Conversation[] | - | - |
| onActiveChange | Callback for selection change | (value: string) => void | - | - |
| menu | Operation menu for conversations | MenuProps | ((value: Conversation) => MenuProps) | - | - |
| groupable | If grouping is supported, it defaults to the Conversation.group field | boolean | GroupableProps | - | - |
| styles | Semantic structure styles | Record<'item', React.CSSProperties> | - | - |
| classNames | Semantic structure class names | Record<'item', string> | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| key | Unique identifier | string | - | - |
| label | Conversation name | React.ReactNode | - | - |
| timestamp | Conversation timestamp | number | - | - |
| group | Conversation type, linked to ConversationsProps.groupable | string | - | - |
| icon | Conversation icon | React.ReactNode | - | - |
| disabled | Whether to disable | boolean | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
sort | Group sorter | (a: string, b: string) => number | - | - |
title | Semantic custom rendering | ((group: string, info: { components: { GroupTitle: React.ComponentType } }) => React.ReactNode) | - | - |
For more properties, see MenuProps.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
trigger | Customize menu trigger | React.ReactNode | ((conversation: Conversation, info: { originNode: React.ReactNode }) => React.ReactNode) | - | - |
Basic usage.
Use the menu property to configure conversation.
Customize the menu trigger.
Use the activeKey and onChange property to configure conversation.
After using groupable properties open group, open the default according to Conversation.Group field group
Use the groupable.sort property to sort groups, and the groupable.title property to customize group rendering.
The example of infinite load with react-infinite-scroll-component.
