npm-package-base

Manual Installation Through Package Managers

npm package managers

npm install @team-decorate/select-tiles

Usage

Plugin install:

import Vue from 'vue'
import SelectTiles from '@team-decorate/select-tiles'

Vue.use(SelectTiles)

Or work on a Vue instance:

<select-tiles
      name="test"
      :items="items"
      v-model="selected"
      :old="[]">
      
          <template slot="label">
      　　　　<span>*</span>checkbox
      　　</template>
  </select-tiles>

<script>
    import SelectTiles from '@team-decorate/select-tiles'

    export default {
        data() {
            return {
                items: [
                    {id:1, value: 'test1'},
                    {id:2, value: 'test2'},
                    {id:3, value: 'test3'},
                    {id:4, value: 'test4'},
                    {id:5, value: 'test5'},
                ],
                selected: [],
            }
        },
        components: {
            SelectTiles,
        }
    }

</script>

Props

name	type	default	description
name	String	---	input name
items	Array	required: true	element list
mode	String	'checkbox'	change input type 'checkbox' or 'radio'
text-key	String	'value'	key for displaying text
id-key	---	'id'	Change items id key
value-key	---	'value'	Change items value key
inputShow	Boolean	false	input hidden status
old	Array	[]	initial value

Event

name	argument	type	description
@checkStatus	(status, value)	(Boolean, ~)	check status and value

<select-tiles
    @checkStatus="getStatus" />

methods: {
 getStatus(status, value) {
     console.log(status)
     console.log(value)
 }
},

Slot

<slot name='label><span>※</span>checkbox!</slot>

or

<template slot="label">
    <span>*</span>checkbox
</template>

Change items key

<select-tiles
      name="test2"
      :items="items"
      v-model="selected2"
      value-key="name"
      text-key="name"
      :old="['test1']"
>
</select-tiles>

<script>
    export default {
        data() {
            return {
                items: [
                    {id:1, name: 'user1'},
                    {id:2, name: 'user2'},
                    {id:3, name: 'user3'},
                ],
                selected2: [],
            }
        },
    }

</script>

scss

.select-tiles {

    &__title {
    
    }
    
    &__label {
      margin-right: 10px;
    }
    //check時
    .select-tiles__input:checked + .select-tiles__btn {
      border-color: red;
      color: red;
    }
    //default時
    &__btn {
      padding: 3px 7px;
      border-radius: 5px;
      border: 1px solid #909090;
      color: #909090;
    }
}