Sources 引用来源

展示引用的数据来源地址。

何时使用

• 在联网搜索模式下展示引用的数据来源地址。

代码演示

基本

基础用法。

已参考 3 篇资料

• Ant Design
• Ant Design X
• Vue

<script setup lang="tsx">
import { Sources } from 'ant-design-x-vue';

defineOptions({ name: 'AXSourcesBasic' });

const items = [
  { key: '1', title: 'Ant Design', url: 'https://ant.design' },
  { key: '2', title: 'Ant Design X', url: 'https://x.ant.design' },
  { key: '3', title: 'Vue', url: 'https://vuejs.org' },
];

defineRender(() => {
  return <Sources title="已参考 3 篇资料" items={items} />;
});
</script>

隐藏源代码

展开

受控展开。

已参考 2 篇资料

• Ant Design
• Vue

<script setup lang="tsx">
import { Button } from 'ant-design-vue';
import { Sources } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXSourcesExpand' });

const expanded = ref(true);
const items = [
  { key: '1', title: 'Ant Design', url: 'https://ant.design' },
  { key: '2', title: 'Vue', url: 'https://vuejs.org' },
];

defineRender(() => {
  return (
    <>
      <Button onClick={() => (expanded.value = !expanded.value)} style={{ marginBottom: '12px' }}>
        Toggle
      </Button>
      <Sources
        title="已参考 2 篇资料"
        items={items}
        expanded={expanded.value}
        onExpand={(next) => {
          expanded.value = next;
        }}
      />
    </>
  );
});
</script>

隐藏源代码

API

SourcesProps

属性	说明	类型	默认值
title	标题内容	VNode | string	-
items	来源内容	SourcesItem[]	-
expandIconPosition	折叠图标位置	'start' | 'end'	'start'
defaultExpanded	默认是否展开	boolean	true
expanded	是否展开	boolean	-
onExpand	展开事件	(expand: boolean) => void	-
onClick	点击事件	(item: SourcesItem) => void	-
inline	行内模式	boolean	false
activeKey	行内模式激活 key	string | number	-
popoverOverlayWidth	弹出层宽度	number | string	300

interface SourcesItem {
  key?: string | number
  title: VNode | string
  url?: string
  icon?: VNode | string
  description?: VNode | string
}

贡献者

贡献者

正在加载贡献者信息...