shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added label text for switch component

Browse Source
This commit is contained in:
Burak Civan
2022-12-30 14:49:13 +03:00
parent 1333ecc2f2
commit c4c92c9f32
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
resources/assets/js/components/AkauntingSwitch.vue
View File

@@ -1,10 +1,14 @@
<template>
<div class="relative lg:absolute w-12 flex items-center lg:ltr:right-0 lg:rtl:left-0 xl:-top-12 cursor-pointer">
<input type="radio" :name="name" v-show="selected == '0'" @click="enabled = 1" value="1" id="enabled-1" v-model="selected" class="w-full h-full absolute right-0 z-20 opacity-0 cursor-pointer">
<input type="radio" :name="name" v-show="selected == '1'" @click="enabled = 0" value="0" id="enabled-0" v-model="selected" class="w-full h-full absolute left-0 z-20 opacity-0 cursor-pointer">
<div class="lg:absolute w-12 lg:ltr:right-0 lg:rtl:left-0 xl:-top-12">
<label class="lg:hidden">{{ label }}</label>
<div class="absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition transform" :class="selected == '1' ? 'translate-x-full' : 'translate-x-0'"></div>
<div class="block w-full h-7 rounded-full transition transition-color" :class="selected == '1' ? 'bg-green' : 'bg-green-200'"></div>
<div class="relative full flex items-center cursor-pointer">
<input type="radio" :name="name" v-show="selected == '0'" @click="enabled = 1" value="1" id="enabled-1" v-model="selected" class="w-full h-full absolute right-0 z-20 opacity-0 cursor-pointer">
<input type="radio" :name="name" v-show="selected == '1'" @click="enabled = 0" value="0" id="enabled-0" v-model="selected" class="w-full h-full absolute left-0 z-20 opacity-0 cursor-pointer">
<div class="absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition transform" :class="selected == '1' ? 'translate-x-full' : 'translate-x-0'"></div>
<div class="block w-full h-7 rounded-full transition transition-color" :class="selected == '1' ? 'bg-green' : 'bg-green-200'"></div>
</div>
</div>
</template>
@@ -21,6 +25,11 @@ export default {
description: "Selectbox selected value"
},
label: {
type: String,
description: "Selectbox selected label"
},
model: {
type: [String, Number, Array, Object, Boolean],
default: '',