Last change
on this file since 35718 was 35714, checked in by cstephen, 3 years ago |
Add macroniser scaffolding.
Update translations.
|
File size:
969 bytes
|
Rev | Line | |
---|
[35714] | 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.