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:
Copyright © 2024 bananin.
Todos los Derechos Reservados.
Iniciar sesión | Términos y Condiciones
Desarrollado por: Bananin!!
Instala nuestra App. ¡Es gratis!