# ant-design-components

# Button

Basic

With Icon




# icon

  • vue组件
<AntDesign-icon/>
  • 直接
<a-icon type="home" />
<a-icon type="setting" theme="filled" />
<a-icon type="smile" theme="outlined" />
<a-icon type="sync" spin />
<a-icon type="smile" :rotate="180" />
<a-icon type="loading" />
<a-icon type="smile" theme="twoTone" /> 
<a-icon type="heart" theme="twoTone" two-tone-color="#eb2f96" /> 
<a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" />
<a-icon type="star" theme="filled" />
<a-icon type="message" :style="{ fontSize: '16px', color: '#08c' }" />

# Grid

col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6

# layout

Header
Content
Footer
Hover me

# checkbox

  • input
<a-input placeholder="Basic usage" />
  • radio
<a-radio checked>Radio</a-radio>
  • rate
<a-rate :defaultValue="4.5" allowHalf />
  • Divider

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

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

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

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

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

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

TextLinkLink

# calendar

2021
Mar
SuMoTuWeThFrSa
28
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
09
10

# card

example
Card title
This is the description

1

# collapse

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

# comment

Han Solo
Hover me

# list

  • 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

# steps

1
First
2
Second
3
Last
First-content

# statistic

Countdown
48:00:29
Million Seconds
48:00:29:979
Day Level
2 天 0 时 0 分 29 秒

# tabs

Content of Tab 1

# tag

Unremovable Tag 2 Tag 3Tag 3Tag 3Tag 3... New Tag

# timeline

  • Create a services site 2015-09-01
  • Solve initial network problems 2015-09-01
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  • Network problems being solved 2015-09-01
  • Create a services site 2015-09-01
  • Technical testing 2015-09-01

# tree

  • parent 0
    • leaf 0-0
    • leaf 0-1
  • parent 1
    • leaf 1-0
    • leaf 1-1

Advanced