Last change
on this file since 35431 was 35431, checked in by cstephen, 3 years ago |
Add app bar and basic information
|
File size:
1.0 KB
|
Line | |
---|
1 | <template>
|
---|
2 | <button class="base" @click="toggle" :class="{ 'toggled': myValue }" type="button">
|
---|
3 | <slot />
|
---|
4 | </button>
|
---|
5 | </template>
|
---|
6 |
|
---|
7 | <style lang="scss" scoped>
|
---|
8 | .base {
|
---|
9 | @extend .btn-fab;
|
---|
10 | color: var(--primary-bg-color);
|
---|
11 | background-color: var(--paper-color);
|
---|
12 | border: 2px solid var(--primary-bg-color);
|
---|
13 | box-shadow: var(--primary-box-shadow-thin);
|
---|
14 | }
|
---|
15 |
|
---|
16 | .toggled {
|
---|
17 | color: var(--primary-fg-color);
|
---|
18 | background-color: var(--primary-bg-color);
|
---|
19 | }
|
---|
20 | </style>
|
---|
21 |
|
---|
22 | <script>
|
---|
23 | export default {
|
---|
24 | name: "ToggleButton",
|
---|
25 | props: {
|
---|
26 | modelValue: Boolean,
|
---|
27 | reverseState: Boolean
|
---|
28 | },
|
---|
29 | emits: [ "update:modelValue" ],
|
---|
30 | computed: {
|
---|
31 | myValue: {
|
---|
32 | get() {
|
---|
33 | return this.reverseState ? !this.modelValue : this.modelValue;
|
---|
34 | },
|
---|
35 | set(newValue) {
|
---|
36 | this.$emit("update:modelValue", this.reverseState ? !newValue : newValue);
|
---|
37 | }
|
---|
38 | }
|
---|
39 | },
|
---|
40 | methods: {
|
---|
41 | toggle() {
|
---|
42 | this.myValue = !this.myValue;
|
---|
43 | }
|
---|
44 | }
|
---|
45 | }
|
---|
46 | </script>
|
---|
Note:
See
TracBrowser
for help on using the repository browser.