group.vue 819 B

1234567891011121314151617181920212223242526272829
  1. <script setup lang="tsx">
  2. import { theme } from 'ant-design-vue';
  3. import { Conversations, type ConversationsProps } from 'ant-design-x-vue';
  4. import { computed } from 'vue';
  5. defineOptions({ name: 'AXConversationsGroup' });
  6. const items: ConversationsProps['items'] = Array.from({ length: 4 }).map((_, index) => ({
  7. key: `item${index + 1}`,
  8. label: `Conversation Item ${index + 1}`,
  9. disabled: index === 3,
  10. group: index === 3 ? 'Group2' : 'Group1',
  11. }));
  12. const { token } = theme.useToken();
  13. // Customize the style of the container
  14. const style = computed(() => ({
  15. width: '256px',
  16. background: token.value.colorBgContainer,
  17. borderRadius: token.value.borderRadius,
  18. }));
  19. defineRender(() => {
  20. return (
  21. <Conversations items={items} defaultActiveKey="item1" style={style.value} groupable />
  22. )
  23. });
  24. </script>