Ant Design X

Property	Description	Type	Default	Version
classNames	DOM class	Record<SemanticDOM, string>	-	-
styles	DOM style	Record<SemanticDOM, CSSProperties>	-	-
title	Title content	React.ReactNode	-	-
items	Sources Content list	SourcesItem[]	-	-
expandIconPosition	Icon position	'start' \| 'end'	'start'	-
defaultExpanded	Default Expand state	boolean	true	-
expanded	Expand state	boolean	-	-
onExpand	Callback when expand changes	(expand: boolean) => void	-	-
onClick	Callback when click	(item: SourcesItem) => void	-	-
inline	Inline mode	boolean	false	-
popoverOverlayWidth	popover overlay width	number \| string	300	-

typescript

interface SourcesItem {
  key?: React.Key;
  title: React.ReactNode;
  url?: string;
  icon?: React.ReactNode;
  description?: React.ReactNode;
}

Semantic DOM

Design Token

Global TokenHow to use?

When To Use

Show the referenced data source address in online search mode.

Examples

API

Common props ref：Common props

SourcesProps

Property	Description	Type	Default	Version
classNames	DOM class	Record<SemanticDOM, string>	-	-
styles	DOM style	Record<SemanticDOM, CSSProperties>	-	-
title	Title content	React.ReactNode	-	-
items	Sources Content list	SourcesItem[]	-	-
expandIconPosition	Icon position	'start' \| 'end'	'start'	-
defaultExpanded	Default Expand state	boolean	true	-
expanded	Expand state	boolean	-	-
onExpand	Callback when expand changes	(expand: boolean) => void	-	-
onClick	Callback when click	(item: SourcesItem) => void	-	-
inline	Inline mode	boolean	false	-
popoverOverlayWidth	popover overlay width	number \| string	300	-

typescript

interface SourcesItem {
  key?: React.Key;
  title: React.ReactNode;
  url?: string;
  icon?: React.ReactNode;
  description?: React.ReactNode;
}

Semantic DOM

Design Token

Global TokenHow to use?

Basic

Basic usage.

Icon

Show icon.

Expand

Control expand and collapse state.

Inline

Show source information on hover.

Basic

Basic usage.

Icon

Show icon.

Expand

Control expand and collapse state.

Inline

Show source information on hover.

Used 3 sources

Use the inline mode in the text

1

Used 3 sources

root
Root
title
Title
content
Content

Sources

Sources

When To Use

Examples

API

SourcesProps

Semantic DOM

Design Token

When To Use

Examples

API

SourcesProps

Semantic DOM

Design Token

root

title

content