按钮 Btn
闵超 2020-05-28
# 基础用法
# 按钮大小(size)
巨大(giant) 特大(jumbo) 大(large) 正常(normal) 小(small) 微小(tiny)
<template>
<div class="btns">
<mc-btn class="btn-mg" :type="'primary'" :size="'giant'"
>巨大(giant)</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :size="'jumbo'"
>特大(jumbo)</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :size="'large'">大(large)</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :size="'normal'"
>正常(normal)</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :size="'small'">小(small)</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :size="'tiny'">微小(tiny)</mc-btn>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
显示代码 复制代码 复制代码
# 按钮自定义字体大小(fontSize)
fontSize
<template>
<div class="btns">
<mc-btn class="btn-mg" :fontSize="'34px'">fontSize</mc-btn>
</div>
</template>
1
2
3
4
5
2
3
4
5
显示代码 复制代码 复制代码
# 按钮自定义大小(basis)
basis
<template>
<div class="btns">
<mc-btn class="btn-mg" :basis="'100px'">basis</mc-btn>
</div>
</template>
1
2
3
4
5
2
3
4
5
显示代码 复制代码 复制代码
# 按钮类型(type)
none primary success info warning danger
<template>
<div class="btns">
<mc-btn class="btn-mg">none</mc-btn>
<mc-btn class="btn-mg" :type="'primary'">primary</mc-btn>
<mc-btn class="btn-mg" :type="'success'">success</mc-btn>
<mc-btn class="btn-mg" :type="'info'">info</mc-btn>
<mc-btn class="btn-mg" :type="'warning'">warning</mc-btn>
<mc-btn class="btn-mg" :type="'danger'">danger</mc-btn>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
显示代码 复制代码 复制代码
# 按钮自定义背景色(bgColor)
bgColor
<template>
<div class="btns">
<mc-btn class="btn-mg" :bgColor="'#f60'">bgColor</mc-btn>
</div>
</template>
1
2
3
4
5
2
3
4
5
显示代码 复制代码 复制代码
# 按钮形状(sharpe)
square rounded box pill circle
<template>
<div class="btns">
<mc-btn class="btn-mg" :type="'primary'" :sharpe="'square'">square</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :sharpe="'rounded'"
>rounded</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :sharpe="'box'">box</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :sharpe="'pill'">pill</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :sharpe="'circle'">circle</mc-btn>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
显示代码 复制代码 复制代码
# 不可点击按钮(disabled)
disabled
<template>
<div class="btns">
<mc-btn class="btn-mg" isdisabled>disabled</mc-btn>
</div>
</template>
1
2
3
4
5
2
3
4
5
显示代码 复制代码 复制代码
# 按钮 hover 动画(hover)
# 1、2D Transitions
Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out
<template>
<div class="btns">
<mc-btn class="btn-mg" :type="'primary'" :hover="'grow'">Grow</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'shrink'">Shrink</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'pulse'">Pulse</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'pulse-grow'"
>Pulse Grow</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'pulse-shrink'"
>Pulse Shrink</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'push'">Push</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'pop'">Pop</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'bounce-in'"
>Bounce In</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'bounce-out'"
>Bounce Out</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'rotate'">Rotate</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'grow-rotate'"
>Grow Rotate</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'float'">Float</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'sink'">Sink</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'bob'">Bob</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'hang'">Hang</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'skew'">Skew</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'skew-forward'"
>Skew Forward</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'skew-backward'"
>Skew Backward</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'wobble-horizontal'"
>Wobble Horizontal</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'wobble-vertical'"
>Wobble Vertical</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'wobble-to-bottom-right'"
>Wobble To Bottom Right</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'wobble-to-top-right'"
>Wobble To Top Right</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'wobble-top'"
>Wobble Top</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'wobble-bottom'"
>Wobble Bottom</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'wobble-skew'"
>Wobble Skew</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'buzz'">Buzz</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'buzz-out'"
>Buzz Out</mc-btn
>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
显示代码 复制代码 复制代码
# 2、Background Transitions
Fade Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical
<template>
<div class="btns">
<mc-btn class="btn-mg" :hover="'fade'">Fade</mc-btn>
<mc-btn class="btn-mg" :hover="'sweep-to-right'">Sweep To Right</mc-btn>
<mc-btn class="btn-mg" :hover="'sweep-to-left'">Sweep To Left</mc-btn>
<mc-btn class="btn-mg" :hover="'sweep-to-bottom'">Sweep To Bottom</mc-btn>
<mc-btn class="btn-mg" :hover="'sweep-to-top'">Sweep To Top</mc-btn>
<mc-btn class="btn-mg" :hover="'bounce-to-right'">Bounce To Right</mc-btn>
<mc-btn class="btn-mg" :hover="'bounce-to-left'">Bounce To Left</mc-btn>
<mc-btn class="btn-mg" :hover="'bounce-to-bottom'">Bounce To Bottom</mc-btn>
<mc-btn class="btn-mg" :hover="'bounce-to-top'">Bounce To Top</mc-btn>
<mc-btn class="btn-mg" :hover="'radial-out'">Radial Out</mc-btn>
<mc-btn class="btn-mg" :hover="'radial-in'">Radial In</mc-btn>
<mc-btn class="btn-mg" :hover="'rectangle-in'">Rectangle In</mc-btn>
<mc-btn class="btn-mg" :hover="'rectangle-out'">Rectangle Out</mc-btn>
<mc-btn class="btn-mg" :hover="'shutter-in-horizontal'"
>Shutter In Horizontal</mc-btn
>
<mc-btn class="btn-mg" :hover="'shutter-out-horizontal'"
>Shutter Out Horizontal</mc-btn
>
<mc-btn class="btn-mg" :hover="'shutter-in-vertical'"
>Shutter In Vertical</mc-btn
>
<mc-btn class="btn-mg" :hover="'shutter-out-vertical'"
>Shutter Out Vertical</mc-btn
>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
显示代码 复制代码 复制代码
# 3、Border Transitions
Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right
<template>
<div class="btns">
<mc-btn class="btn-mg" :hover="'border-fade'">Border Fade</mc-btn>
<mc-btn class="btn-mg" :hover="'hollow'">Hollow</mc-btn>
<mc-btn class="btn-mg" :hover="'trim'">Trim</mc-btn>
<mc-btn class="btn-mg" :hover="'ripple-out'">Ripple Out</mc-btn>
<mc-btn class="btn-mg" :hover="'ripple-in'">Ripple In</mc-btn>
<mc-btn class="btn-mg" :hover="'outline-out'">Outline Out</mc-btn>
<mc-btn class="btn-mg" :hover="'outline-in'">Outline In</mc-btn>
<mc-btn class="btn-mg" :hover="'round-corners'">Round Corners</mc-btn>
<mc-btn class="btn-mg" :hover="'underline-from-left'"
>Underline From Left</mc-btn
>
<mc-btn class="btn-mg" :hover="'underline-from-center'"
>Underline From Center</mc-btn
>
<mc-btn class="btn-mg" :hover="'underline-from-right'"
>Underline From Right</mc-btn
>
<mc-btn class="btn-mg" :hover="'reveal'">Reveal</mc-btn>
<mc-btn class="btn-mg" :hover="'underline-reveal'">Underline Reveal</mc-btn>
<mc-btn class="btn-mg" :hover="'overline-reveal'">Overline Reveal</mc-btn>
<mc-btn class="btn-mg" :hover="'overline-from-left'"
>Overline From Left</mc-btn
>
<mc-btn class="btn-mg" :hover="'overline-from-center'"
>Overline From Center</mc-btn
>
<mc-btn class="btn-mg" :hover="'overline-from-right'"
>Overline From Right</mc-btn
>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
显示代码 复制代码 复制代码
# 4、Shadow and Glow Transitions
Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset
<template>
<div class="btns">
<mc-btn class="btn-mg" :type="'primary'" :hover="'shadow'">Shadow</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'grow-shadow'"
>Grow Shadow</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'float-shadow'"
>Float Shadow</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'glow'">Glow</mc-btn>
<mc-btn class="btn-mg" :type="'primary'" :hover="'shadow-radial'"
>Shadow Radial</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'box-shadow-outset'"
>Box Shadow Outset</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'box-shadow-inset'"
>Box Shadow Inset</mc-btn
>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
显示代码 复制代码 复制代码
# 5、Curls
Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left
<template>
<div class="btns">
<mc-btn class="btn-mg" :type="'primary'" :hover="'curl-top-left'"
>Curl Top Left</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'curl-top-right'"
>Curl Top Right</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'curl-bottom-right'"
>Curl Bottom Right</mc-btn
>
<mc-btn class="btn-mg" :type="'primary'" :hover="'curl-bottom-left'"
>Curl Bottom Left</mc-btn
>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
显示代码 复制代码 复制代码
# 按钮属性(Btn Attributes)
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| size | 按钮大小 | String | normal | giant、jumbo、large、normal、small、tiny |
| fontSize | 按钮自定义字体大小 | String | - | - |
| basis | 按钮自定义大小 | String | - | - |
| type | 按钮类型 | String | none | none、primary、success、info、warning、danger |
| bgColor | 按钮自定义背景色 | String | - | - |
| sharpe | 按钮形状 | String | square | square、rounded、box、pill、circle |
| disabled | 按钮不可点击 | Boolean | false | true、false |
| hover | 鼠标悬浮过渡 | String | - | 参照示例 |