header-and-footer.vue 748 B

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