Sources

Data source references used to display AI response content.

Examples

Basic usage

Used 3 sources

• 1. Data source
• 2. Data source
• 3. Data source

Basic usage

Basic usage.

<script setup lang="tsx">
defineOptions({ name: 'AXSourcesBasicV2' });

import { Sources } from 'ant-design-x-vue';

const items = [
  {
    title: '1. Data source',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '2. Data source',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '3. Data source',
    url: 'https://x.ant.design/components/overview',
  },
];

defineRender(() => <Sources title="Used 3 sources" items={items} />);
</script>

Hide source

Show icon

Used 3 sources

• Data source from twitter
• Data source from youtube
• Data source from github

Show icon

Show an icon and choose expand-icon placement.

<script setup lang="tsx">
defineOptions({ name: 'AXSourcesIconV2' });

import { GithubOutlined, TwitterOutlined, YoutubeOutlined } from '@ant-design/icons-vue';
import { Sources } from 'ant-design-x-vue';

const items = [
  {
    title: 'Data source from twitter',
    url: 'https://x.ant.design/components/overview',
    icon: <TwitterOutlined />,
  },
  {
    title: 'Data source from youtube',
    url: 'https://x.ant.design/components/overview',
    icon: <YoutubeOutlined />,
  },
  {
    title: 'Data source from github',
    url: 'https://x.ant.design/components/overview',
    icon: <GithubOutlined />,
  },
];

defineRender(() => (
  <Sources title="Used 3 sources" items={items} expandIconPosition="end" />
));
</script>

Hide source

Control expand/collapse

Used 3 sources

• 1. Data source
• 2. Data source
• 3. Data source

Control expand/collapse

Control expand/collapse.

<script setup lang="tsx">
defineOptions({ name: 'AXSourcesExpandV2' });

import { Sources } from 'ant-design-x-vue';
import { Button } from 'ant-design-vue';
import { ref } from 'vue';

const items = [
  {
    title: '1. Data source',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '2. Data source',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '3. Data source',
    url: 'https://x.ant.design/components/overview',
  },
];

const expanded = ref(true);

defineRender(() => (
  <>
    <Button onClick={() => (expanded.value = !expanded.value)} style={{ marginBottom: '8px' }}>
      Change expand
    </Button>
    <br />
    <Sources
      title="Used 3 sources"
      items={items}
      expanded={expanded.value}
      onExpand={(val: boolean) => {
        expanded.value = val;
      }}
    />
  </>
));
</script>

Hide source

Inline mode

Use the inline mode in the text

1

Use the inline mode in the text

2

Inline mode

Show source info on hover.

<script setup lang="tsx">
defineOptions({ name: 'AXSourcesInlineV2' });

import { Sources } from 'ant-design-x-vue';

const items = [
  {
    title: '1. Data source',
    key: '1',
    url: 'https://x.ant.design/components/overview',
    description:
      'Artificial Intelligence, often abbreviated as AI, is a broad branch of computer science concerned with building smart machines capable of performing tasks that typically require human intelligence.',
  },
  {
    title: '2. Data source',
    key: '2',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '3. Data source',
    key: '3',
    url: 'https://x.ant.design/components/overview',
  },
];

defineRender(() => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <span>Use the inline mode in the text</span>
    <Sources title="1" activeKey="1" items={items} inline />
    <span>Use the inline mode in the text</span>
    <Sources title="2" activeKey="2" items={items} inline />
  </div>
));
</script>

Hide source

API

SourcesProps

Prop	Description	Type	Default	Version
prefixCls	Style class name prefix	string	-	-
title	Title	`VNode	string`	-
items	Data source list	SourcesItem[]	-	-
inline	Whether to use inline mode	boolean	false	-
expanded	Whether to Expand (Controlled)	boolean	-	-
defaultExpanded	Default Expand	boolean	true	-
onExpand	Expand/Fold Pullback	(expand: boolean) => void	-	-
expandIconPosition	Expand icon position	'start' | 'end'	'start'	-
activeKey	Key of the current active item (inline mode)	string | number	-	-
onClick	Click Data Source Item to Pullback	(item: SourcesItem) => void	-	-
popoverOverlayWidth	Popover Floating Card Width	number | string	300	-
classNames	Semantics class	Record\<SemanticType, string\>	-	-
styles	Semanticization style	Record\<SemanticType, CSSProperties\>	-	-
rootClassName	Root class name	string	-	-

SourcesItem

Prop	Description	Type	Default	Version
key	Unique Identifier	string | number	-	-
title	Title	`VNode	string`	-
url	Link Address	string	-	-
icon	Icon	VNode	-	-
description	Description (displayed in inline mode)	VNode | string	-	-

Sources Slots

Slot	Description
default	Custom content (used when items are not passed)

Sources Ref

Prop	Description	Type
nativeElement	Component Root DOM Element	HTMLDivElement

SemanticType

root | title | content

Semantic DOM

Sources

• Ant Design X Vue
• Ant Design Vue

• root

  来源组件的根容器

• title

  标题区域容器

• content

  来源内容区域容器

Design Token

This component has no custom Component Token. Customize it through global Design Tokens.