header-and-footer.vue 788 B

1234567891011121314151617181920212223242526272829
  1. <script setup lang="ts">
  2. import {
  3. CopyOutlined,
  4. SyncOutlined,
  5. UserOutlined,
  6. } from '@ant-design/icons-vue';
  7. import { Bubble } from 'ant-design-x-vue';
  8. import { Button, Space, theme, Avatar } from 'ant-design-vue';
  9. import { h } from 'vue';
  10. defineOptions({ name: 'AXBubbleHeaderAndFooterSetup' });
  11. const { token } = theme.useToken();
  12. </script>
  13. <template>
  14. <Bubble
  15. content="Hello, welcome to use Ant Design X! Just ask if you have any questions."
  16. :avatar="{ icon: h(UserOutlined) }"
  17. header="Ant Design X"
  18. >
  19. <template #footer>
  20. <Space :size="token.paddingXXS">
  21. <Button type="text" size="small" :icon="h(SyncOutlined)"></Button>
  22. <Button type="text" size="small" :icon="h(CopyOutlined)" />
  23. </Space>
  24. </template>
  25. </Bubble>
  26. </template>