Bananin's Select

A Select normally looks like this

A bootstrap Select looks like this

The Select of the Bananin Box can look like this

<!-- head -->
<script src="https://unpkg.com/@bananin/bselect@latest/js/b-select.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@bananin/bselect@latest/css/b-select.css" />
<!-- html -->
<div class="mb-3" id="app">
    <b-select :items="itemsCompleto" ref="bSelect" :multiple="true" :max="20" id="bSel" name="bSel" @input="cambia()"></b-select>
    <p class="mb-0 mt-2" v-html="picados"></p>
</div>
    //Javascript
    const app = Vue.createApp({
        components: {
            "b-select": bSelect
        },
        data() {
            return {
                itemsCompleto:[
                    {v:"1",t:"Opción 1"},
                    {v:"2",t:"Opción 2",st:"Con Subtitulo"},
                    {v:"3",t:"Opción 3",st:"Con Imagen",a:"/img/cara.png"},
                    {v:"4",t:"Seleccionada",st:"Subtitulo",a:"/img/cara.png",s:true},
                    {v:"5",t:"Disabled",st:"Subtitulo",d:true}
                ]
            };
        },
        methods:{
            cambia(){
                this.picados=JSON.stringify(this.$refs.bSelect.values);
            }
        }
    }).mount("#app");

Options:

  • items: the options that the component will have has the attributes:
    • Mandatory:
      • v: option value
      • t: text to display
    • Optional:
      • st: subtitle
      • a: avatar/image
      • s: item selected by default
      • d: item disabled by default
  • ref: reference you will have to call the component from Vue
  • Multiple: you can select more than one item, by default it is disabled
  • buscar: little box to search inside the select, by default it is activated (you can also use a numeric variable to indicate the minimum number of items before the little box appears)
  • Max: maximum characters displayed from selected items before grouping into X selected items
  • Id: id to be assigned to the select
  • Name: name that is assigned to the select
  • disabled: is disabled?
  • input: event that fires when the select component changes
  • If you like it or want to try it visit the code at npmjs

Copyright © 2024 bananin.
Todos los Derechos Reservados.
Iniciar sesión | Términos y Condiciones

Desarrollado por: Bananin!!

Instala nuestra App. ¡Es gratis!