<template>
<div style="width: 600px">
<bl-select placeholder="Select country">
    <bl-select-option label="U.S.A" value="1"></bl-select-option>
    <bl-select-option label="Russia" value="2"></bl-select-option>
    <!--<bl-select-option label="Canada" value="3"></bl-select-option>-->
    <!--<bl-select-option label="China" value="4"></bl-select-option>-->
    <!--<bl-select-option label="Japan" value="5"></bl-select-option>-->
    <!--<bl-select-option label="Malausia" value="6"></bl-select-option>-->
    <!--<bl-select-option label="France" value="7"></bl-select-option>-->
</bl-select>
    <br><br>
    <bl-select icon="fas fa-globe" placeholder="Select country">
        <bl-select-option label="U.S.A" value="1"></bl-select-option>
        <bl-select-option label="Russia" value="2"></bl-select-option>
        <bl-select-option label="Canada" value="3"></bl-select-option>
        <bl-select-option label="China" value="4"></bl-select-option>
        <bl-select-option label="Japan" value="5"></bl-select-option>
        <bl-select-option label="Malausia" value="6"></bl-select-option>
        <bl-select-option label="France" value="7"></bl-select-option>
    </bl-select>
</div>
</template>

<script>
  import BlSelect from './components/BulveyzSelect'
  import BlSelectOption from './components/BulveyzSelectOption'
  export default {
    data() {
      return {
        lol: {
          width: '600px'
        }
      }
    },
    components: {
      BlSelect,
      BlSelectOption,
    }
  }
</script>

<style>

</style>
