Skip to content
Permalink
Browse files

Tabs Episode Complete

  • Loading branch information...
JeffreyWay committed Jul 22, 2019
1 parent e00302d commit b166c7696569d35bdb963fd6ad9455e0c4cc41b4
Showing with 116 additions and 1 deletion.
  1. +4 −0 resources/js/app.js
  2. +20 −0 resources/js/components/Tab.vue
  3. +52 −0 resources/js/components/Tabs.vue
  4. +38 −0 resources/views/tabs.php
  5. +2 −1 routes/web.php
@@ -7,6 +7,8 @@ import Dropdown from './components/Dropdown';
import Visible from './components/Visible';
import ConfirmButton from './components/ConfirmButton';
import ConfirmDialog from './components/ConfirmDialog';
import Tabs from './components/Tabs';
import Tab from './components/Tab';

window.Vue = Vue;

@@ -17,6 +19,8 @@ Vue.component('dropdown', Dropdown);
Vue.component('visible', Visible);
Vue.component('confirm-button', ConfirmButton);
Vue.component('confirm-dialog', ConfirmDialog);
Vue.component('tabs', Tabs);
Vue.component('tab', Tab);

new Vue({
el: '#app',
@@ -0,0 +1,20 @@
<template>
<div role="tabpanel" v-show="isActive">
<slot></slot>
</div>
</template>

<script>
export default {
props: {
title: {},
active: { type: Boolean, default: false }
},
data() {
return {
isActive: this.active
};
}
};
</script>
@@ -0,0 +1,52 @@
<template>
<div>
<ul class="flex mb-4 border-b border-gray-400" role="tablist">
<li
v-for="(tab, index) in tabs"
class="px-4 py-2 bg-white"
:class="{ 'border border-b-0 rounded-t-lg': tab.isActive }"
:style="tab.isActive ? 'margin-bottom: -1px' : ''"
>
<button
v-text="tab.title"
:class="{ 'font-bold': tab.isActive }"
class="focus:outline-none"
role="tab"
:aria-selected="tab.isActive"
@click="activeTab = tab"
></button>
</li>
</ul>

<slot></slot>
</div>
</template>

<script>
export default {
data() {
return {
tabs: [],
activeTab: null
};
},
mounted() {
this.tabs = this.$children;
this.setInitialActiveTab();
},
watch: {
activeTab(activeTab) {
this.tabs.map(tab => (tab.isActive = tab == activeTab));
}
},
methods: {
setInitialActiveTab() {
this.activeTab = this.tabs.find(tab => tab.active) || this.tabs[0];
}
}
};
</script>
@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Tabs</title>
</head>
<body>
<div id="app" class="p-8">
<h1 class="text-2xl font-bold mb-6">Tabs</h1>
<tabs>
<tab title="First">
<p>Hello world.</p>
</tab>
<tab title="Second">
<p>Hello world again.</p>
</tab>
<tab title="Third">
<p>Hello world and out.</p>
</tab>
<tab title="Wew" active>
<p>It works!</p>
</tab>
</tabs>
</div>
<script src="/js/app.js"></script>
</body>
</html>
@@ -16,7 +16,8 @@
'context-menu',
'conditional-visibility',
'modal',
'confirmation-button'
'confirmation-button',
'tabs'
];

0 comments on commit b166c76

Please sign in to comment.
You can’t perform that action at this time.