We are going to create a floating type button in Vue Native or Vue, the famous buttons called Float Action Button by their acronym in English FAB are components that are part of Material Design and that of course, we can replicate in our applications; I show you how you can create one in a basic way:
Component: HTML and 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>As you can see, we create a component, with any name, and we associate some props to customize them; you can pass as many as you need, for example, to vary the color, in this case it is for the callback or function that is executed when we click on it (you can also use an event) and the label.
It is important to note that you can use the previous code perfectly in a Vue project, of course the touchable-opacity will not exist, but in that case you replace it with any HTML element and the click event.
Style
For the style, you can define it directly in the component or you can place it globally in a help file so that it can be used in any component; these are some of the ways we have to define styles:
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,
}
})...And with NativeBase
NativeBase is a library for mobile components for React native and web that helps us build a consistent user interface on Android, iOS and Web.
Also, there are packages that we can use to use this type of components, among many, NativeBase, allows us to easily use this type of components, and even defining it as an extended type, to display a tree of action buttons:
<nb-fab
:active="false"
direction="up"
position="bottomRight"
:style="{ backgroundColor: 'green' }"
>
<nb-icon-nb name="close"></nb-icon-nb>
</nb-fab>And extended:
<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>
So, with this, you know two ways in which you can create a floating button for your apps in Vue Native, which is the most flexible and adaptable component that you can use in your web and Android apps; since remember that it would not be consistent to use Material Design elements for your apps on iOS.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter