Expanded en los o-input en Oruga UI + Vue 3 - 46

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.

 

Acepto recibir anuncios de interes sobre este Blog.

Vamos a emplear el atributo de expanded para expandir un input en oruga UI con Vue 3.

- Andrés Cruz

In english

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.