1.2.4 • Published 10 months ago
switch-check-button v1.2.4
switch-check-button
Install
npm install switch-check-button --save
Usage
<template>
<div>
<!-- The Props All -->
<SwitchButton
v-model="checked1"
label="Open the Switch"
classes="my-class-name"
type="fill"
:disabled="false"
:showText="true"
:checkedText="['No', 'Yes']"
:checkedColors="['#ff4949', '#13ce66']"></SwitchButton>
<!-- v-modal && change Event -->
<SwitchButton v-model="checked1" @change="changeHandler"></SwitchButton>
<!-- value && input Event -->
<SwitchButton :value="checked2" @input="inpChangeHandler"></SwitchButton>
</div>
</template>
import SwitchButton from 'switch-check-button'
export default {
// ...
components: { SwitchButton },
data() {
return {
checked1: false,
checked2: false
}
},
methods: {
changeHandler(val) {
console.log(val)
},
inpChangeHandler() {
this.checked2 = !this.checked2
}
}
// ...
}
API
key | value | information |
---|---|---|
value | Boolean or String or Number | Default value is false. When Boolean(value) is true, checked. |
name | String | Default value is null. |
label | String | Default value is null. If it is not empty, it will show the label. |
classes | String | Default value is null. Customer className. |
disabled | Boolean | Default value is false. When disabled value is true, it could not be clicked. |
checkedText | Array | Default value is 'close', 'open', index=0 is false text, index=1 is true text. When showText prop is true, it will be shown. |
showText | Boolean | Default value is false. When it is true, the text will be shown. |
checkedColors | Array | Default 'red', 'green' |
type | String | Default value is 'fill', and it could be chosen between fill and outline. |
@change | Function | Function that could get the checked status. |
1.2.4
10 months ago
1.2.3
10 months ago
1.2.2
10 months ago
1.2.1
10 months ago
1.1.10
10 months ago
1.1.9
10 months ago
1.1.8
10 months ago
1.1.6
10 months ago
1.1.5
10 months ago
1.1.4
10 months ago
1.1.3
10 months ago
1.1.2
10 months ago
1.1.1
10 months ago
1.0.4
10 months ago
1.0.3
10 months ago
1.0.1
10 months ago
1.0.0
10 months ago