logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
    • Notification系统通知
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • Sources来源引用
    • Think思考过程
    • ThoughtChain思维链
  • 反馈
    • Actions操作列表
    • FileCard文件卡片
  • 其他
    • XProvider全局化配置

Sources
来源引用

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

何时使用

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

代码演示

API

通用属性参考：通用属性

SourcesProps

属性说明类型默认值版本
classNames样式类名Record<SemanticDOM, string>--
styles样式 styleRecord<SemanticDOM, CSSProperties>--
title标题内容React.ReactNode--
items来源内容SourcesItem[]--
expandIconPosition折叠图标位置'start' | 'end''start'-
defaultExpanded默认是否展开booleantrue-
expanded是否展开boolean--
onExpand展开事件(expand: boolean) => void--
onClick点击事件(item: SourcesItem) => void--
inline行内模式booleanfalse-
activeKey行内模式，激活的 keyReact.Key--
popoverOverlayWidth弹出层宽度number | string300-
typescript
interface SourcesItem {
  key?: React.Key;
  title: React.ReactNode;
  url?: string;
  icon?: React.ReactNode;
  description?: React.ReactNode;
}

Semantic DOM

主题变量（Design Token）

全局 Token如何定制？
Used 3 sources
  • 1. Data source
  • 2. Data source
  • 3. Data source
基础用法

基础用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Used 3 sources
  • Data source from twitter
  • Data source from youtube
  • Data source from github
使用图标

展示图标。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Used 3 sources
  • 1. Data source
  • 2. Data source
  • 3. Data source
展开

控制展开折叠状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Use the inline mode in the text
1
Use the inline mode in the text
2
行内模式

悬停时展示来源信息。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Used 3 sources
  • 1. Data source
  • 2. Data source
  • 3. Data source
  • root
    根节点
  • title
    标题区
  • content
    内容区