Theme EditorTheme Editor
  • Theme Editor
  • Previewer
  • Others
⌘ K
Previewer
Previewer Controlled
Previewer Token Panel
最后更新时间：
帮助改进此文档
Copyright © 2025 | Powered by dumi
‌
‌
‌
‌

Previewer Controlled

主题预览器

Alias Token 预览显示所有

Common Color 通用颜色
Text Color 文本颜色
Background Color 背景颜色
Fill Color 填充颜色
Split Color 分割线颜色
Font 文本
Radius 圆角
Space 间距
Screen 屏幕
Line 线
Motion 动画
Control 控件
Others 未分类
General
Button
Icon
Typography
Layout
Divider
Grid
Layout
Space
Navigation
Anchor
Breadcrumb
Dropdown
Menu
Pagination
Steps
Data Entry
AutoComplete
Cascader
Checkbox
DatePicker
Form
Input
InputNumber
Mentions
Radio
Rate
Select
Slider
Switch
TimePicker
Transfer
TreeSelect
Upload
Data Display
Avatar
Badge
Calendar
Card
Carousel
Collapse
Descriptions
Empty
Image
List
Popover
Segmented
Statistic
Table
Tabs
Tag
Timeline
Tooltip
Tree
Feedback
Alert
Drawer
Message
Modal
Notification
Popconfirm
Progress
Result
Skeleton
Spin
组件尺寸：
禁用：
Button
关联 Token: colorText, colorPrimary...

关联 Token: colorPrimary
关联 Token: colorError, colorErrorActive...
关联 Token: colorBgContainer
关联 Token: colorTextDisabled, colorBgContainerDisabled

Icon
Typography
关联 Token: colorSuccess

《故乡》

——鲁迅
深蓝的天空中挂着一轮金黄的圆月，下面是海边的沙地，都种着一望无际的碧绿的西瓜，其间有一个十一二岁的少年，项带银圈，手捏一柄钢叉，向一匹猹尽力的刺去，那猹却将身一扭，反从他的胯下逃走了。
  • 狂人日记
  • 呐喊
  • 彷徨
关联 Token: fontSizeHeading4

Heading 4

关联 Token: colorError, colorErrorHover...

Error Title

error Text
关联 Token: colorWarning

Error Title

error Text
关联 Token: colorSuccess

Success Title

success Text
Divider
关联 Token: colorSplit, colorText

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Left Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Right Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Grid
col
col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6
Layout
  • nav 1
  • nav 2
  • nav 3
  • subnav 1
    • option1
    • option2
    • option3
    • option4
  • subnav 2
  • subnav 3
  1. Home
  2. /
  3. List
  4. /
  5. App
Content
Space
Space
Anchor
关联 Token: colorPrimary, colorSplit...
Basic demo
Static demo
API
Anchor Props
Link Props
关联 Token: colorSplit
Basic demo
Static demo
API
Anchor Props
Link Props
Breadcrumb
关联 Token: colorText, colorPrimary...
  1. Home
  2. /
  3. Application Center
  4. /
  5. Application List
  6. /
  7. An Application
Dropdown
关联 Token: colorPrimary, colorError...
Hover me
Menu
关联 Token: colorPrimary, colorBgContainer...
  • Navigation One
    • Item 1
      • Option 1
      • Option 2
    • Item 2
      • Option 3
      • Option 4
  • Navigation Two
    • Option 5
    • Option 6
    • Submenu
  • Navigation Three
关联 Token: colorError, colorErrorHover...
  • 危险
  • 危险选中
  • 危险禁用
关联 Token: colorSplit
  • Navigation One
    • Item 1
      • Option 1
      • Option 2
    • Item 2
      • Option 3
      • Option 4
  • Navigation Two
  • Navigation Three
Pagination
关联 Token: colorPrimary, colorPrimaryHover...
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 / page
    Go toPage
  • /0
关联 Token: controlItemBgActiveDisabled, colorBgContainerDisabled...
  • 1
关联 Token: colorPrimary, controlOutline...
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 10
  • Go toPage
Steps
关联 Token: colorPrimary, colorBgContainer
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
关联 Token: colorError
Error
This is a description.
In Progress
Left 00:00:08
This is a description.
AutoComplete
关联 Token:
input here


control mode
Cascader
关联 Token: colorBgContainer, colorPrimary
Please select
关联 Token: colorHighlight
Please select
关联 Token: colorBgContainerDisabled
Please select
Checkbox
关联 Token: colorPrimary, colorText...
关联 Token: colorTextDisabled, colorBgContainerDisabled
DatePicker
关联 Token: colorPrimary, colorPrimaryBorder...
关联 Token: colorError, colorErrorBorder...
关联 Token: colorWarning, colorWarningBorder...
关联 Token: colorIcon, colorIconHover
关联 Token: colorBgContainerDisabled, colorTextDisabled
Form
关联 Token: colorError, controlOutline...
关联 Token: colorWarning
关联 Token: colorError, colorErrorBorder...
Input
关联 Token: colorPrimary, colorPrimaryHover...
关联 Token: colorIcon, colorIconHover
关联 Token: colorError, colorErrorOutline...
关联 Token: colorWarning, colorWarningBorder...
关联 Token: colorFillAlter
http://.com
关联 Token: colorBgContainerDisabled
InputNumber
关联 Token: colorPrimaryBorder, controlOutline...
关联 Token: colorErrorBorder, colorErrorOutline...
关联 Token: colorWarning, colorWarningBorder...
关联 Token: colorBgContainerDisabled
Mentions
关联 Token: colorBgContainer, colorBorder...
关联 Token: colorError, colorErrorOutline...
关联 Token: colorWarning, colorWarningBorder...
关联 Token: colorBgContainerDisabled, colorTextDisabled
Radio
关联 Token: colorPrimary, controlOutline...
关联 Token: colorPrimaryActive, colorPrimaryHover
关联 Token: colorBgContainerDisabled
Rate
关联 Token: colorFillContent
Select
关联 Token: controlOutline, colorPrimary...
Lucy
Lucy
Lucy
Lucy
关联 Token: colorPrimary, colorFillSecondary
a10
c12
e14
 
关联 Token: colorError, colorErrorOutline...
a10
c12
 
关联 Token: colorWarningHover, colorWarningOutline
a10
c12
 
关联 Token: colorIcon, colorIconHover
a10
关联 Token: colorBgContainerDisabled, colorTextDisabled
a10
c12
 
Slider
关联 Token: colorFillSecondary, colorFillContentHover...
关联 Token: colorFillSecondary, colorFillContentHover...
Switch
关联 Token: colorPrimary, controlOutline...
TimePicker
关联 Token: colorPrimary
Transfer
关联 Token: controlItemBgActiveHover, controlItemBgActive...
2/11 itemsSource
  • content1
  • content2
  • content3
  • content4
  • content5
  • content6
  • content7
  • content8
  • content9
  • content10
  • content11
9 itemsTarget
  • content12
  • content13
  • content14
  • content15
  • content16
  • content17
  • content18
  • content19
  • content20
关联 Token: colorWarning
11 itemsSource
  • content1
  • content2
  • content3
  • content4
  • content5
  • content6
  • content7
  • content8
  • content9
  • content10
  • content11
9 itemsTarget
  • content12
  • content13
  • content14
  • content15
  • content16
  • content17
  • content18
  • content19
  • content20
关联 Token: colorError
11 itemsSource
  • content1
  • content2
  • content3
  • content4
  • content5
  • content6
  • content7
  • content8
  • content9
  • content10
  • content11
9 itemsTarget
  • content12
  • content13
  • content14
  • content15
  • content16
  • content17
  • content18
  • content19
  • content20
关联 Token: colorBgContainerDisabled
11 itemsSource
  • content1
  • content2
  • content3
  • content4
  • content5
  • content6
  • content7
  • content8
  • content9
  • content10
  • content11
9 itemsTarget
  • content12
  • content13
  • content14
  • content15
  • content16
  • content17
  • content18
  • content19
  • content20
TreeSelect
关联 Token: colorPrimary, colorPrimaryActive...
Please select
关联 Token: colorTextDisabled, colorBgContainerDisabled
Please select
Upload
关联 Token: colorPrimary, colorPrimaryHover...
关联 Token: colorError, colorErrorBg
zzz.png
zzz.png
关联 Token: colorFillAlter
Upload
Avatar
Badge
关联 Token: colorError, colorBorderBg...
5
0
关联 Token: colorPrimary
Process
关联 Token: colorWarning
Warning
关联 Token: colorSuccess
Success
Calendar
关联 Token: colorPrimary, colorPrimaryHover...
2025
Oct
SuMoTuWeThFrSa
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
关联 Token: colorBgContainerDisabled, colorTextDisabled
2025
Oct
SuMoTuWeThFrSa
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
Card
关联 Token: colorText, colorTextHeading...
Default size card
More

Card content

Card content

Card content

Small size card
More
关联 Token: colorFillAlter
Inner Card title
Inner Card content
关联 Token: colorBorderSecondary
Card Title
Content
Content
Content
Content
Content
Content
Content
Carousel
关联 Token: colorText, colorBgContainer

4

1

2

3

4

1

2

3

4

Collapse
关联 Token: colorTextSecondary, colorText...
This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2
This is panel header 3
Descriptions
关联 Token: colorSplit, colorText...
User Info
ProductCloud DatabaseBilling ModePrepaidAutomatic RenewalYES
Order time2018-04-24 18:00:00
Empty
关联 Token: colorTextDisabled
No data
No data
Image
关联 Token: colorBgMask
关联 Token: colorBgContainerDisabled
List
关联 Token:

  • Ant Design Title 1

    Ant Design, a design language for background applications, is refined by Ant UED Team

  • Ant Design Title 2

    Ant Design, a design language for background applications, is refined by Ant UED Team

  • Ant Design Title 3

    Ant Design, a design language for background applications, is refined by Ant UED Team

  • Ant Design Title 4

    Ant Design, a design language for background applications, is refined by Ant UED Team
Popover
关联 Token: colorBgElevated
Title

Content

Content

Segmented
关联 Token:
Statistic
关联 Token: colorPrimary
Active Users
112,893
Account Balance (CNY)
112,893.00
Active Users

Table
关联 Token: colorPrimaryActive, colorBgContainer
NameAgeAddressTagsAction
John Brown32New York No. 1 Lake ParkNICEDEVELOPER
Invite John Brown
Delete
Jim Green42London No. 1 Lake ParkLOSER
Invite Jim Green
Delete
Joe Black32Sidney No. 1 Lake ParkCOOLTEACHER
Invite Joe Black
Delete
关联 Token: colorFillSecondary, colorFillContentHover...
Name
Age
Address
Jim Green42London No. 1 Lake Park
John Brown32New York No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park
Jim Red32London No. 2 Lake Park
  • 1
Tabs
关联 Token: colorPrimary, colorPrimaryHover...
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
关联 Token: colorFillAlter
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Tag
关联 Token: blue-1, blue-3...
magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple
magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple
关联 Token: colorError, colorErrorBg...
Error
关联 Token: colorInfo, colorInfoBg...
Info
关联 Token: colorSuccess, colorSuccessBg...
Success
关联 Token: colorWarning, colorWarningBg...
Warning
关联 Token: colorPrimary, colorPrimaryHover...
ErrorError
关联 Token: colorFillAlter, colorIcon...
Error
Timeline
关联 Token: colorPrimary, colorText...
  1. Create a services site 2015-09-01
  2. Solve initial network problems 2015-09-01
  3. Technical testing 2015-09-01
关联 Token: colorError
  1. Create a services site 2015-09-01
  2. Solve initial network problems 2015-09-01
  3. Technical testing 2015-09-01
  4. Network problems being solved 2015-09-01
关联 Token: colorSuccess
  1. Create a services site 2015-09-01
  2. Solve initial network problems 2015-09-01
  3. Technical testing 2015-09-01
  4. Network problems being solved 2015-09-01
Tooltip
关联 Token: colorBgSpotlight, colorTextLightSolid
prompt text
Tooltip will show on mouse enter.
Tree
关联 Token: colorPrimary, controlOutline...
parent 1
parent 1-0
leaf
leaf
parent 1-1
sss
关联 Token: colorTextDisabled, colorBgContainerDisabled
parent 1
parent 1-0
leaf
leaf
parent 1-1
sss
Alert
关联 Token: colorIconHover, colorIcon...
Success Tips
Informational Notes
Warning
Error
关联 Token: colorErrorBg, colorErrorBorder...
Error
Error
This is an error message about copywriting.
关联 Token: colorInfo, colorInfoBorder...
Informational Notes
Informational Notes
Additional description and information about copywriting.
关联 Token: colorSuccess, colorSuccessBorder...
Success Tips
Success Tips
Detailed description and advice about successful copywriting.
关联 Token: colorWarning, colorWarningBorder...
Warning
Warning
This is a warning notice about copywriting.
Drawer
关联 Token: colorBgMask, colorBgElevated
Message
关联 Token: colorText, colorBgElevated
Hello, Ant Design!
关联 Token: colorError
这是一条异常消息，会主动消失
关联 Token: colorInfo
Info
关联 Token: colorSuccess
这是一条成功消息，会主动消失
关联 Token: colorWarning
这是一条警告消息，会主动消失
Modal
关联 Token: colorBgElevated
Basic Modal

Some contents...

Some contents...

Some contents...

关联 Token: colorInfo
Basic Modal

Some contents...

Some contents...

Some contents...

关联 Token: colorBgMask
关联 Token: colorWarning
Confirm This?
Some descriptions.
关联 Token: colorSuccess
A good news!
Notification
关联 Token: colorIcon, colorIconHover...
Notification Title
This is the content of the notification. This is the content of the notification. This is the content of the notification.
关联 Token: colorInfo
Notification Title
This is the content of the notification. This is the content of the notification. This is the content of the notification.
关联 Token: colorError
Notification Title
This is the content of the notification. This is the content of the notification. This is the content of the notification.
关联 Token: colorSuccess
Notification Title
This is the content of the notification. This is the content of the notification. This is the content of the notification.
关联 Token: colorWarning
Notification Title
This is the content of the notification. This is the content of the notification. This is the content of the notification.
Popconfirm
关联 Token: colorBgElevated, colorWarning
Are you sure to delete this task?
Progress
关联 Token: colorFillSecondary, colorText...
30%
50%
0%
关联 Token: colorInfo
30%
50%
70%
80%
30%
关联 Token: colorError
关联 Token: colorSuccess
关联 Token: colorFillSecondary, colorText...
30%
50%
0%
Result
关联 Token: colorSuccess
Successfully Purchased Cloud Server ECS!
Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
关联 Token: colorInfo
Demo示意
status 为info
关联 Token: colorWarning
Demo示意
status 为warning
关联 Token: colorError
Demo示意
status 为 error
关联 Token: colorFillAlter
Demo示意
背景色为 colorFillAlter
Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
Skeleton
关联 Token: colorFillContent, colorTextPlaceholder

Spin
关联 Token: colorPrimary, colorBgContainer