mc-ui

# 基础用法

# 按钮大小(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
Expand Copy

# 按钮自定义字体大小(fontSize)

fontSize
<template>
  <div class="btns">
    <mc-btn class="btn-mg" :fontSize="'34px'">fontSize</mc-btn>
  </div>
</template>
1
2
3
4
5
Expand Copy

# 按钮自定义大小(basis)

basis
<template>
  <div class="btns">
    <mc-btn class="btn-mg" :basis="'100px'">basis</mc-btn>
  </div>
</template>
1
2
3
4
5
Expand Copy

# 按钮类型(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
Expand Copy

# 按钮自定义背景色(bgColor)

bgColor
<template>
  <div class="btns">
    <mc-btn class="btn-mg" :bgColor="'#f60'">bgColor</mc-btn>
  </div>
</template>
1
2
3
4
5
Expand Copy

# 按钮形状(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
Expand Copy

# 不可点击按钮(disabled)

disabled
<template>
  <div class="btns">
    <mc-btn class="btn-mg" isdisabled>disabled</mc-btn>
  </div>
</template>
1
2
3
4
5
Expand Copy

# 按钮 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
Expand Copy

# 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
Expand Copy

# 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
Expand Copy

# 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
Expand Copy

# 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
Expand Copy

# 按钮属性(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 - 参照示例

← 输入框 Input →