bubble.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <script setup lang="tsx">
  2. import SemanticPreview from '../.vitepress/vitepress/components/semantic/preview.vue'
  3. import { Bubble } from 'ant-design-x-vue'
  4. import { Button, Space, Avatar, theme } from 'ant-design-vue';
  5. import {UserOutlined, SyncOutlined, CopyOutlined} from '@ant-design/icons-vue'
  6. const { token } = theme.useToken()
  7. defineRender(() => {
  8. return (
  9. <SemanticPreview semantics={[
  10. { name: 'avatar', desc: '头像的外层容器' },
  11. { name: 'header', desc: '头部的容器' },
  12. { name: 'content', desc: '聊天内容的容器' },
  13. { name: 'footer', desc: '底部的容器' },
  14. ]}
  15. >
  16. {({ classNames }) => {
  17. return (
  18. <Bubble
  19. classNames={classNames}
  20. content="Feel free to use Ant Design Vue !"
  21. avatar={<Avatar size={32} icon={<UserOutlined />} />}
  22. header="Ant Design X Vue"
  23. footer={
  24. <Space size={token.paddingXXS}>
  25. <Button type="default" size="small" icon={<SyncOutlined />} />
  26. <Button type="default" size="small" icon={<CopyOutlined />} />
  27. </Space>
  28. }
  29. />
  30. )
  31. }
  32. }
  33. </SemanticPreview>
  34. )
  35. })
  36. </script>