Simple tab navigation with Vue.js and Bulma
Yesterday while working on Cronhub, my new SaaS project (not officially launched yet) I needed a simple tab navigation to show a help window for different programming languages. Since I don’t use Bootstrap and Bulma is a CSS only framework I had to create the tab navigation by myself using either plain JS or Vue. My primary objective was to make it as simple as possible and do it quick so I chose Vue.
I have created a new Vue component that uses Vue’s class binding to set up the right class for the tab when it’s active. The v-on:click (shorthand@click) directive is super handy in this case because the <code> DOM element can listen to the click event and display the appropriate tab content.
Here is how the component looks like.
<template>
<div class="container">
<div class="columns">
<div class="column is-12">
<div class="tabs help-tabs">
<ul>
<li :class="[ lang === 'crontab' ? 'is-active' : '']"><a @click="lang='crontab'">Crontab</a>
</li>
<li :class="[ lang === 'php' ? 'is-active' : '']"><a @click="lang='php'">PHP</a></li>
<li :class="[ lang === 'bash' ? 'is-active' : '']"><a @click="lang='bash'">Bash</a></li>
<li :class="[ lang === 'python' ? 'is-active' : '']"><a @click="lang='python'">Python</a></li>
</ul>
</div><div class="box help-content">
<code v-if="lang ==='crontab'">
{{monitor.schedule}} your_script.sh && curl -fsS --retry 3 {{monitor.url_code}>
/dev/null
</code>
<code v-if="lang ==='php'">
file_get_contents({{monitor.url_code}});
</code>
<code v-if="lang ==='bash'">
curl --retry 2 {{monitor.url_code}}
</code>
<code v-if="lang ==='python'">
# using urllib2:
import urllib2
urllib2.urlopen("{{monitor.url_code}}")
</pre>
</div>
</div>
</div>
</div>
</template><script>
export default {
name: 'HelpComponent',
data() {
return {
monitor: {
schedule: '* * * * *',
url_code: 'https://cronhub.io/random_uuid',
},
lang: 'crontab',
}
},
}
</script><style lang="css" scoped>
.help-content {
background-color: white !important;
}
.help-tabs {
margin-bottom: 10px !important;
}
.tabs li.is-active a {
border-bottom-color: #000000;
color: #7763A9;
border-bottom: 3px solid;
font-weight: bold;
}
code, pre {
color: #1b1e21 !important;
background-color: white !important;
}
</style>
Here is the demo of the component and it just works!
Feel free to reuse this implementation in your next project. Here is a link to the github gist if you prefer to read the code there.
If you want to connect with me or say hi please do so on Twitter :)
