Napsal jsem si a odladil komponentu sloužící jako přepínač (toggle). Mám pro ni použití ve své aplikaci, kterou píšu s využitím Framework7 a VueJS.
Pro přepínač má Framework7 implementovaný switch:
<div class="item-title label">Switch</div>
<div class="item-input">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
Nepodařilo se mi ho upravit podle mých potřeb, proto jsem se rozhodl ho nahradit vlastní komponentou. Pro zamýšlené použití se hodí SVG.
Vue.component("toggle-name", {
props: {
value: {
type: Boolean,
default: false
},
name: {
type: String,
default: ""
},
coloroff: {
type: String,
default: "white"
},
coloron: {
type: String,
default: "#886aea"
},
},
methods: {
toggleValue: function(){
this.value = !this.value;
this.$emit("update:value", this.value);
},
},
computed: {
cx: function(){
return this.value ? 36 : 16
},
fill: function(){
return this.value ? this.coloron : this.coloroff
}
},
template: '<svg @click="toggleValue()" width="52" height="32"><g ><rect x="0" y="0" width="52" height="32" rx="16" ry="16" stroke="lightgray" :fill="fill" /><circle :cx="cx" cy="16" r="16" stroke="lightgray" fill="white"/><text :x="cx" y="22" text-anchor="middle" font-size="16">{{name}}</text></g></svg>'
})
V části props jsou definovány vlastnosti (properties), jako value (hodnota přepínače false/true = off/on), name (jednoznakové jméno, A, B, C, ...), coloron (barva v poloze true), coloroff (barva v poloze false).
V části methods se při přepnutí volá metoda toggleValue, která kromě změny hodnoty emituje událost se změnou (two-way-databinding), aby se změnila i hodnota proměnné, se kterou je přepínač svázán.
V části computed se vypočítá x-ová poloha jezdce - cx, a barva výplně přepínače podle hodnoty (false/true) - fill.
V části template je definován vzhled přepínače, jedná se o grafiku SVG. Přepínač se skládá z obdélníku se zaoblenými rohy a kružnice, která mění svoji polohu v závislosti na stavu přepínače (false/true). Dovnitř kružnice je vepsán název přepínače (jedno písmeno) - name.
V HTML kódu se komponenta použije např. takhle:
<toggle-name :value.sync="A" name="A" class="toggle"></toggle-name>
