File tree Expand file tree Collapse file tree 4 files changed +43
-8
lines changed Expand file tree Collapse file tree 4 files changed +43
-8
lines changed Original file line number Diff line number Diff line change @@ -10,7 +10,7 @@ var vm = new Vue({
10
10
buttonDisabled: false
11
11
},
12
12
methods: {
13
- onClick () {... }
13
+ onClick () {... }
14
14
}
15
15
})
16
16
```
@@ -27,6 +27,7 @@ var vm = new Vue({
27
27
| prop | Type | Default | Description |
28
28
| -------| ------| ---------| -------------|
29
29
| ` disabled ` | String|| disable the button |
30
+ | ` accent ` | Boolean|| secondary color theme |
30
31
| ` raised ` | Boolean|| a contained button that is elevated upon the surface |
31
32
| ` unelevated ` | Boolean|| a contained button that is flush with the surface |
32
33
| ` stroked ` | Boolean|| a contained button that is flush with the surface and has a visible border(* )|
Original file line number Diff line number Diff line change 3
3
<div class =" mdc-demo--container" >
4
4
<div class =" mdc-demo-button" >
5
5
<mdc-button :dense =" dense" :compact =" compact" :disabled =" disabled"
6
- :raised =" raised" :stroked =" stroked" :unelevated =" unelevated" >Button</mdc-button >
6
+ :raised =" raised" :stroked =" stroked" :unelevated =" unelevated"
7
+ :accent =" accent" >Button</mdc-button >
7
8
<mdc-button :dense =" dense" :compact =" compact" :disabled =" disabled"
8
- :raised =" raised" :stroked =" stroked" :unelevated =" unelevated" >Button</mdc-button >
9
+ :raised =" raised" :stroked =" stroked" :unelevated =" unelevated"
10
+ :accent =" accent" >Button</mdc-button >
9
11
<mdc-button :dense =" dense" :compact =" compact" :disabled =" disabled"
10
- :raised =" raised" :stroked =" stroked" :unelevated =" unelevated" >Button</mdc-button >
12
+ :raised =" raised" :stroked =" stroked" :unelevated =" unelevated"
13
+ :accent =" accent" >Button</mdc-button >
11
14
</div >
12
15
</div >
13
16
23
26
<mdc-checkbox label =" disabled" v-model =" disabled" ></mdc-checkbox >
24
27
<mdc-checkbox label =" compact" v-model =" compact" ></mdc-checkbox >
25
28
<mdc-checkbox label =" dense" v-model =" dense" ></mdc-checkbox >
29
+ <mdc-checkbox label =" accent" v-model =" accent" ></mdc-checkbox >
26
30
</div >
27
31
</div >
28
32
</div >
31
35
<script >
32
36
export default {
33
37
data () {
34
- return {type: ' ' , dense: false , compact: false , disabled: false }
38
+ return {
39
+ type: ' ' ,
40
+ dense: false ,
41
+ compact: false ,
42
+ disabled: false ,
43
+ accent: false
44
+ }
35
45
},
36
46
computed: {
37
47
raised () { return this .type == ' raised' },
Original file line number Diff line number Diff line change @@ -9,7 +9,8 @@ export default {
9
9
unelevated: Boolean ,
10
10
stroked: Boolean ,
11
11
dense: Boolean ,
12
- compact: Boolean
12
+ compact: Boolean ,
13
+ accent: Boolean
13
14
},
14
15
data () {
15
16
return {
@@ -19,7 +20,8 @@ export default {
19
20
' mdc-button--unelevated' : this .unelevated ,
20
21
' mdc-button--stroked' : this .stroked ,
21
22
' mdc-button--dense' : this .dense ,
22
- ' mdc-button--compact' : this .compact
23
+ ' mdc-button--compact' : this .compact ,
24
+ ' mdc-button--accent' : this .accent
23
25
}
24
26
}
25
27
},
@@ -39,6 +41,9 @@ export default {
39
41
compact () {
40
42
this .$set (this .classes , ' mdc-button--compact' , this .compact )
41
43
},
44
+ accent () {
45
+ this .$set (this .classes , ' mdc-button--accent' , this .accent )
46
+ },
42
47
}
43
48
}
44
49
</script >
Original file line number Diff line number Diff line change 1
1
@import " @material/button/mdc-button" ;
2
2
3
+ .mdc-button--accent {
4
+
5
+ & .mdc-button {
6
+ @include mdc-button-ink-color (secondary);
7
+ @include mdc-states (secondary);
8
+ }
9
+
10
+ & .mdc-button--raised ,
11
+ & .mdc-button--unelevated {
12
+ @include mdc-button-container-fill-color (secondary);
13
+ @include mdc-button-ink-color (text- primary- on- secondary);
14
+ @include mdc-states (text- primary- on- secondary);
15
+ }
16
+
17
+ & .mdc-button--stroked {
18
+ @include mdc-button-stroke-color (secondary);
19
+ }
20
+
21
+ }
3
22
4
23
.mdc-button {
5
24
.mdc-icon {
6
25
@extend .mdc-button__icon ;
7
26
}
8
- }
27
+ }
You can’t perform that action at this time.
0 commit comments