Conversations
Used to manage and view the conversation list
Import |
Sourcecomponents/conversations |
Ant Design XImport |
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) | - | - |
Basic usage.
Use the menu property to configure conversation.
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.
