Examples

• vue-chk
  • Boolean
  • String
  • Position
  • Styling
• vue-chk-list
  • List of string
  • List of objects

vue-chk

Boolean

Sample

Code example

props() {
  return {
    value: false
  }
}

<vue-chk label-position="after" v-model="value">
  Value is {{ String(value) }}
</vue-chk>

String

Sample

Code example

props() {
  return {
    value: ''
  }
}

<vue-chk
  label-position="after"
  v-model="value"
  value-true="checked"
  value-false="unchecked"
>
  Value is {{ String(value) }}
</vue-chk>

Position

Sample

Code example

props() {
  return {
    position: 'after',
    value: false
  }
}

<vue-chk
  :label-position="position"
  v-model="value"
>
  Positioning {{ position }}
</vue-chk>

Styling

Sample

Code example

props() {
  return {
    value: false
  }
}

<vue-chk v-model="value">
  Custom CSS
</vue-chk>

.vue-chk .vue-chk__check::after {
  background: #4fb1ff;
  border: 0;
  height: 0;
  transition: 0.2s;
  transform: rotate(0deg) translate(-50%, -50%);
  width: 0;
}

.vue-chk input:checked ~ .vue-chk__check::after {
  height: 12px;
  width: 12px;
}

vue-chk-list

List of string

Sample

Code example

props() {
  return {
    value: ['Bulldog'],
    values: ['Pug', 'Bulldog', 'Golden Retriever']
  }
}

<vue-chk-list
  v-model="value"
  :list="values"
/>

<p>Selected items:</p>

<ul>
  <li
    v-for="(item, index) in value"
    :key="index"
  >
    {{ item }}
  </li>
</ul>

List of objects

Sample

Code example

props() {
  return {
    value: [],
    values: [
      {
        id: 1,
        description: 'Pug'
      },
      {
        id: 2,
        description: 'Bulldog'
      },
      {
        id: 3,
        description: 'Golden Retriever'
      }
    ]
  }
}

<vue-chk-list
  v-model="value"
  :list="values"
>
  <template
    slot="item--slot"
    slot-scope="{ item }"
  >
    {{ item.description }}
  </template>
</vue-chk-list>

<p>Selected items:</p>

<ul>
  <li
    v-for="(item, index) in value"
    :key="index"
  >
    {{ item }}
  </li>
</ul>