En esta entrada quería hablarte sobre algunos temas interesantes que puedes aplicar para hacer elementos adaptativos o responsive, y es empleando ya sea clases o en este caso la directiva de style que ya vimos con anterioridad; para eso vamos a tomar como caso de estudio un elemento de Vue Native, pero que perfectamente puedes aplicar a Vue básico.
El elemento de Vue Native viene siendo el llamado touchable opacity, pero puede ser cualquier elemento que quieras hacer adaptativo que funcione para Vue básico.
Validar el props
Lo interesante, es que estamos aplicando una sencillas condiciones con un prop, para indicar si queremos que ocupe toda la pantalla o solo una sección:
props: {
type: {
type: String,
default: "sm",
validator: function (value) {
// El valor debe coincidir con una de estas cadenas de texto
return ["sm", "normal", ].indexOf(value) !== -1;
},
},
},Es un props el que estamos empleando para indicar el tipo, colocamos modo sm (siguiendo un poco el panorama que nos ofrece frameworks como Bootstrap o Tailwind para indicar elementos pequeños que colocamos en pantallas reducidas -o no, todo depende de nuestro diseño-) o normal, para variar el estilo según alguna regla que queramos definir.
Aquí el props con valores fijos es fundamental ya que no queremos que nuestro usuario nos envíe cualquier cosa, sino valores específicos que nosotros podamos realizar comprobaciones y variar nuestro diseño a antojo.
Los condicionales, el factor clave
Como puedes suponer, el uso de los condicionales es el factor clave en todo esto para indicar cuándo quieres mostrar una opción a otra; supongamos que tienes tu interfaz costa de un menú lateral y un listado:
- Si la pantalla es pequeña (ej 640px o menos), el menú lateral está oculto.
- Si la pantalla es mayor a estas dimensiones, lo muestran junto al listado.
En nuestro caso, vamos un poco más atrás, y desde este componente, mediante un props, definimos que diseñó mostramos de los (por ejemplo) dos permitidos aqui (sm y normal) y verificamos mediante condiciones:
<template>
<view :style="[type == 'sm' ? { alignSelf: 'center' } : {}]">
<TouchableOpacity
:style="[type == 'sm' ? { alignSelf: 'flex-start' } : {}]"
:onPress="
() => {
console.log('Hola MUndo');
}
"
class="buttonContainer"
>
<Text class="buttonText">asas sm</Text>
</TouchableOpacity>
</view>
</template>Validar el props
Los props, podemos pasar tantos como necesitemos, en este caso como para el tipo, solamente vamos a aceptar que sean de dos tipos; y esto lo hacemos con el validator:
<script>
export default {
props: {
type: {
type: String,
default: "sm",
validator: function (value) {
// El valor debe coincidir con una de estas cadenas de texto
return ["sm", "normal", ].indexOf(value) !== -1;
},
},
},
};
</script>Para los estilos, puedes adaptarlo como necesites para que tu diseño funcione como necesites: por ejemplo, para nuestro caso unos sencillos botones con estilos fijos.
Las variaciones las puedes hacer tanto a nivel de clases como a nivel del props de style:
<style scoped>
.buttonContainer {
elevation: 8;
background-color: blue;
border-radius: 10;
padding-vertical: 10;
padding-horizontal: 12;
}
.buttonText {
font-size: 18;
color: #fff;
color: #9105a7;
letter-spacing: 1;
font-weight: bold;
align-self: center;
text-transform: uppercase;
}
</style>
<ButtonModern type="sm"/>Si le pasas un valor al props que no corresponda, te dará el siguiente error:
<ButtonModern type="otro"/>
[Vue warn]: Invalid prop: custom validator check failed for prop "type".
found in
Finalmente, nuestro botones quedas así; para este par de ejemplos:
<ButtonModern />
<ButtonModern type="normal" :style="{marginTop:15}"/>
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter