Vue.js Component for Semantic UI Basic Tabs
source link: http://siongui.github.io/2018/10/14/vuejs-component-for-semantic-ui-basic-tab/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue.js Component for Semantic UI Basic Tabs
October 14, 2018
Reusable Vue.js component for Semantic UI basic tab. Click the following tabs to see the demo.
The following is the source code for above demo.
HTML:
<!-- you can put the following line in your html head --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"> <div id="vueapp"> <semantic-ui-basic-tab :tabpanes="mytabpanes"></semantic-ui-basic-tab> </div> <!-- you can put the following line at the end of html body --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
We define a Vue.js component whose name is semantic-ui-basic-tab, and we pass data of tabs and panes to it.
JavaScript:
'use strict'; Vue.component("semantic-ui-basic-tab", { template: ` <div> <!-- Nav tabs --> <div class="ui top attached tabular menu"> <a class="item" v-for="(tabpane, index) in tabpanes" v-bind:class="{ 'active': tabsel == index }" @click="tabsel = index"> {{tabpane.nav}} </a> </div> <!-- Tab panes --> <div class="ui bottom attached tab segment" v-for="(tabpane, index) in tabpanes" v-bind:class="{ 'active': tabsel == index }"> {{tabpane.pane}} </div> </div> `, props: ["tabpanes"], data: function() { return { tabsel: 0 } } }); var app = new Vue({ el: '#vueapp', data: { mytabpanes: [ {nav: "tab1", pane:"tab1 content"}, {nav: "tab2", pane:"tab2 content"}, {nav: "tab3", pane:"tab3 content"}, {nav: "tab4", pane:"tab4 content"}, ] } });
The data passed to the component is an array consisting of nav and content of the tabs. we use v-for to create the actual HTML of the tabs in the component.
We use the variable tabsel to indicate current selected tab. When users click on the tab, update tabsel according to the tab index and hence show the selected tab pane according to the value of tabsel.
The active class of tabs will also be updated according to tabsel. Set tabsel to 0 in the initialization phase to make first tab as default tab.
If you do not want to use Vue.js or any JavaScript code, see [2] for pure CSS Semantic UI Basic tabs.
Tested on:
- Semantic UI 2.4.1
- Vue.js 2.5.17
- Chromium 69.0.3497.81 on Ubuntu 18.04 (64-bit)
References:
Recommend
-
48
If you’ve ever built a web app, there’s a good chance you’ve built a tabbed document interface at some point or another. Tabs allow you to break up complex interfaces into (presumably) more manageable subsections that a u...
-
46
README.md
-
6
Build a Sparkline Vue ComponentSparklines can be used to quickly visualize data variance. They are small and intuitive to understand.
-
8
Raymond CamdenA Vue Compo...
-
2
Basic Building Blocks of Semantic Web Reading Time: 4 minutesIn the first post, we talked about the
-
6
-
2
React Native Steps Component A basic React Native step component, very useful for multistep forms. How to install Paste the src/components/Steps folder into your own project components folder. Also,...
-
3
[Vue.js] Bulma Tabs Updated: October 08, 2018 Add more features to
-
4
Vue.js Component for Bulma Tabs October 08, 2018 Reusable
-
9
Pure CSS Semantic UI Basic Tabs September 30, 2018 CSS only toggle
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK