Last change
on this file since 35714 was 35714, checked in by cstephen, 2 years ago |
Add macroniser scaffolding.
Update translations.
|
File size:
969 bytes
|
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(--bg-color);
|
---|
11 | background-color: var(--paper-color);
|
---|
12 | box-shadow: var(--primary-box-shadow-thin);
|
---|
13 | }
|
---|
14 |
|
---|
15 | .toggled {
|
---|
16 | color: var(--fg-color);
|
---|
17 | background-color: var(--bg-color);
|
---|
18 | }
|
---|
19 | </style>
|
---|
20 |
|
---|
21 | <script>
|
---|
22 | export default {
|
---|
23 | name: "ToggleButton",
|
---|
24 | props: {
|
---|
25 | modelValue: Boolean,
|
---|
26 | reverseState: Boolean
|
---|
27 | },
|
---|
28 | emits: [ "update:modelValue" ],
|
---|
29 | computed: {
|
---|
30 | myValue: {
|
---|
31 | get() {
|
---|
32 | return this.reverseState ? !this.modelValue : this.modelValue;
|
---|
33 | },
|
---|
34 | set(newValue) {
|
---|
35 | this.$emit("update:modelValue", this.reverseState ? !newValue : newValue);
|
---|
36 | }
|
---|
37 | }
|
---|
38 | },
|
---|
39 | methods: {
|
---|
40 | toggle() {
|
---|
41 | this.myValue = !this.myValue;
|
---|
42 | }
|
---|
43 | }
|
---|
44 | }
|
---|
45 | </script>
|
---|
Note:
See
TracBrowser
for help on using the repository browser.