# Chip

<template lang="html">
  <div class="centerx">
    <vs-chip>
        Basic Chip
      </vs-chip>
      <vs-chip>
        <vs-avatar text="LD"/>
        Avatar Text
      </vs-chip>
      <vs-chip>
        <vs-avatar />
        Avatar Icon
      </vs-chip>
      <vs-chip>
        <vs-avatar src="https://randomuser.me/api/portraits/men/4.jpg"/>
        Avatar Image
      </vs-chip>
      <vs-chip closable>
        Closable chip
      </vs-chip>
  </div>
</template>

<script>
export default {
}
</script>

<template lang="html">
  <div class="centerx">
      <vs-chip color="primary">
        Basic Chip
      </vs-chip>
      <vs-chip color="success">
        <vs-avatar text="LD"/>
        Avatar Text
      </vs-chip>
      <vs-chip color="danger">
        <vs-avatar />
        Avatar Icon
      </vs-chip>
      <vs-chip color="warning">
        <vs-avatar src="https://randomuser.me/api/portraits/men/4.jpg"/>
        Avatar Image
      </vs-chip >
      <vs-chip closable color="dark">
        Closable chip
      </vs-chip>
      <vs-chip closable color="#24c1a0" close-icon="close">
        <vs-avatar src="https://randomuser.me/api/portraits/men/16.jpg"/>
        Closable chip
      </vs-chip>
  </div>
</template>

<script>
export default {
}
</script>

<template lang="html">
  <template #demo>
<div>
    <vs-chip transparent color="primary">
      Basic Chip
    </vs-chip>
    <vs-chip transparent color="success">
      <vs-avatar text="LD"/>
      Avatar Text
    </vs-chip>
    <vs-chip transparent color="danger">
      <vs-avatar />
      Avatar Icon
    </vs-chip>
    <vs-chip transparent color="warning">
      <vs-avatar src="https://randomuser.me/api/portraits/men/4.jpg"/>
      Avatar Image
    </vs-chip >
    <vs-chip transparent closable color="dark">
      Closable chip
    </vs-chip>
    <vs-chip transparent closable color="#24c1a0" close-icon="close">
      <vs-avatar src="https://randomuser.me/api/portraits/men/16.jpg"/>
      Closable chip
    </vs-chip>
  </div>
</template>

<template lang="html">
  <div class="centerx">
    <vs-chip>
      <vs-avatar />
      Icon Default
    </vs-chip>
    <vs-chip color="primary">
      <vs-avatar icon="send" />
      Icon send
    </vs-chip>
    <vs-chip color="success">
      <vs-avatar icon="markunread" />
      Icon markunread
    </vs-chip>
    <vs-chip color="danger">
      <vs-avatar icon="link_off" />
      Icon link_off
    </vs-chip>
    <vs-chip color="warning">
      <vs-avatar icon="battery_alert" />
      Icon battery_alert
    </vs-chip>
    <vs-chip color="dark">
      <vs-avatar icon="edit" />
      Icon edit
    </vs-chip>
  </div>
</template>

<script>
export default {
}
</script>

<template lang="html">
  <div class="centerx">
    <vs-button v-if="chips.length == 0" @click="reset" type="filled">Reset Chips</vs-button>
    <vs-chip @click="remove(chip)" v-for="chip in chips" closable>
      {{ chip }}
    </vs-chip>

  </div>
</template>

<script>
export default {
  data(){
    return {
      chips:[
        'Dribbble',
        'GitHub',
        'Behance',
        'Vuejs',
        'Vuesax',
      ],
    }
  },
  methods: {
    reset () {
      this.chips = [
        'Dribbble',
        'GitHub',
        'Behance',
        'Vuejs',
        'Vuesax',
      ]
    },
    remove (item) {
      this.chips.splice(this.chips.indexOf(item), 1)
    }
  }
}
</script>

<style lang="css">
.total {
  width: 100%
}
</style>

<template lang="html">
  <div class="total">
    <div class="modelx">
      {{chips}}
    </div>
    <vs-chips color="rgb(145, 32, 159)" placeholder="New Element" v-model="chips">
      <vs-chip
        :key="chip"
        @click="remove(chip)"
        v-for="chip in chips" closable>
        {{ chip }}
      </vs-chip>
    </vs-chips>
  </div>
</template>

<script>
export default {
  data(){
    return {
      chips:[
        "Vuejs",
        "Node",
        "Vuesax"
      ]
    }
  },
  methods: {
    remove (item) {
      this.chips.splice(this.chips.indexOf(item), 1)
    }
  }
}
</script>

<style lang="css">
.total {
  width: 100%
}
</style>

<template lang="html">
  <div class="total">
    <div class="modelx">
      {{chips}}
    </div>
    <vs-chips color="rgb(145, 32, 159)" placeholder="New Element" v-model="chips" remove-icon="delete_forever">
      <vs-chip
        :key="chip"
        @click="remove(chip)"
        v-for="chip in chips" closable close-icon="delete">
        {{ chip }}
      </vs-chip>
    </vs-chips>
  </div>
</template>

<script>
export default {
  data(){
    return {
      chips:[
        "Vuejs",
        "Node",
        "Vuesax"
      ]
    }
  },
  methods: {
    remove (item) {
      this.chips.splice(this.chips.indexOf(item), 1)
    }
  }
}
</script>

<style lang="css">
.total {
  width: 100%
}
</style>