Vamos a crear un botón de tipo flotante en Vue Native o Vue, los famosos botones llamados como Float Action Button por sus siglas en inglés FAB son unos componentes que forman parte del Material Design y que por supuesto, podemos replicar en nuestras aplicaciones; te muestro como puedes crear uno de manera básica:
Componente: HTML y JS
<template>
<touchable-opacity :style="style.fab_extended_base" :on-press="callback">
<text :style="{ color: '#FFF' }"> {{ label }} </text>
</touchable-opacity>
</template>
<script>
import { style } from "../helpers/styles"
export default {
data() {
return {
style
}
},
props: {
label: {
type: String,
requerid: true,
},
callback: {
type: Function,
requerid: true,
},
},
};
</script>Como puedes ver, creamos un componentes, con cualquier nombre, y le asociamos unos props para personalizarlos; puedes pasarle tantos como necesites, por ejemplo, para variar el color, en este caso es para el callback o función que se ejecuta cuando le pegamos un clic (puedes emplear un evento también) y el label.
Es importante notar, que el código anterior lo puedes emplear perfectamente en un proyecto en Vue, claro que no existirá el touchable-opacity, pero en ese caso lo sustituyes por cualquier elemento HTML y el evento click.
Estilo
Para el estilo, lo puedes definir directamente en el componente o puedes colocarlo de manera global en un archivo de ayuda para que pueda ser usado en cualquier componente; estas son algunas de las formas que tenemos para definir los estilos:
helpers/style.js
import { StyleSheet } from "react-native"
module.exports.style = StyleSheet.create({
h1: {
fontSize: 30,
marginBottom: 8,
textAlign: 'center',
color: "#70227E"
},
container: {
marginTop: 5,
marginLeft: "auto",
marginRight: "auto",
width: "90%",
minHeight : "100%"
},
hr: {
backgroundColor: "#8f04a8",
width: "80%",
height: 2,
marginLeft: "auto",
marginRight: "auto",
marginBottom: 5,
}
})...Y con NativeBase
NativeBase es una libreria para dispositivos móviles componentes para React nativo y web que nos ayuda a construir una interfaz de usuario consistente en Android, iOS y Web.
También, existen paquetes que podemos emplear para usar este tipo de componentes, entre muchos, NativeBase, nos permite usar fácilmente este tipo de componentes, e inclusive definiéndolo de tipo extendido, para mostrar un árbol de botones de acciones:
<nb-fab
:active="false"
direction="up"
position="bottomRight"
:style="{ backgroundColor: 'green' }"
>
<nb-icon-nb name="close"></nb-icon-nb>
</nb-fab>Y extendido:
<nb-fab
:active="false"
direction="up"
position="bottomRight"
:style="{ backgroundColor: 'green' }"
>
<nb-icon-nb name="close"></nb-icon-nb>
<nb-button :style="{ elevation: 500, backgroundColor: 'green' }">
<nb-icon-nb name="logo-twitter"></nb-icon-nb>
</nb-button>
<nb-button :style="{ elevation: 500, backgroundColor: 'blue' }">
<nb-icon-nb name="logo-facebook"></nb-icon-nb>
</nb-button>
<nb-button
:on-press="
() => {
console.log('google');
}
"
:style="{
elevation: 500,
backgroundColor: 'red',
}"
>
<nb-icon-nb name="logo-google"></nb-icon-nb>
</nb-button>
</nb-fab>
Así que, ya con esto, conoces dos formas en las cuales puedes crear un botón de tipo flotante para tus apps en Vue Native, el cual es un componente de lo más flexible y adaptable que puedes usar en tus apps web y Android; ya que recuerda que no sería consistente emplear elementos del Material Design para tus apps en iOS.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter