@magicgol/polyjuice 0.43.0 → 0.44.0
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
|
@@ -5,7 +5,13 @@ export default {
|
|
|
5
5
|
title: 'Badge/Badge',
|
|
6
6
|
component: MgBadge,
|
|
7
7
|
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
|
8
|
-
argTypes: {
|
|
8
|
+
argTypes: {
|
|
9
|
+
size: {
|
|
10
|
+
control: { type: 'select' },
|
|
11
|
+
options: ['normal', 'large'],
|
|
12
|
+
defaultValue: 'normal'
|
|
13
|
+
},
|
|
14
|
+
},
|
|
9
15
|
};
|
|
10
16
|
|
|
11
17
|
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
|
@@ -9,10 +9,22 @@
|
|
|
9
9
|
export default {
|
|
10
10
|
name: 'mg-badge',
|
|
11
11
|
|
|
12
|
+
props: {
|
|
13
|
+
size: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: 'normal',
|
|
16
|
+
validator: function (value) {
|
|
17
|
+
return ['normal', 'large'].indexOf(value) !== -1;
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
|
|
12
22
|
computed: {
|
|
13
23
|
classes() {
|
|
14
24
|
return {
|
|
15
25
|
'mg-badge': true,
|
|
26
|
+
'mg-badge--size-normal': this.size === 'normal',
|
|
27
|
+
'mg-badge--size-large': this.size === 'large',
|
|
16
28
|
};
|
|
17
29
|
},
|
|
18
30
|
},
|
|
@@ -27,7 +39,18 @@ export default {
|
|
|
27
39
|
font-family: 'Ubuntu', sans-serif;
|
|
28
40
|
font-size: 1rem;
|
|
29
41
|
font-weight: 500;
|
|
30
|
-
|
|
31
|
-
|
|
42
|
+
|
|
43
|
+
&--size{
|
|
44
|
+
&-normal {
|
|
45
|
+
height: 2rem;
|
|
46
|
+
width: 2rem;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&-large {
|
|
50
|
+
font-size: 2.625rem;
|
|
51
|
+
height: 5rem;
|
|
52
|
+
width: 5rem;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
32
55
|
}
|
|
33
56
|
</style>
|