Expanded en los o-input en Oruga UI + Vue 3 - 46
Vamos a emplear el atributo de expanded para expandir un input en oruga UI con Vue 3.
Para poder mostrar los campos de Oruga UI expandidos, basta con colocar el atributo de expanded:
src/components/CRUD/Movies/SaveComponent.vue
***
<o-input v-model="form.title" expanded></o-input>
***
<o-input v-model="form.description" type="textarea" expanded></o-input>
***
<o-select v-model="form.category_id" expanded>Yo creo que eso es lo que tenemos que hacer si queremos hacer algún cambio lo primero que deberíamos de hacer es verificar la página oficial a ver qué nos recomienda en este caso ya tenemos un atributo que justamente hace lo que nosotros queremos hacer, expandir al 100% el ancho del campo, si no, hacer cambios mediante CSS, aunque, es importante aclarar que los componentes de Oruga no les puedes definir clases directamente, debes de o sobrescribir el estilo mediante CSS o modificar el estilo como indica la documentación oficial.
- Andrés Cruz
Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y Libro CodeIgniter 4 desde cero + integración con Bootstrap 4 o 5 - 2025.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter