113 lines
2.6 KiB
PHP
113 lines
2.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Test 05 Vuex (Fitri)</title>
|
|
<link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
|
|
<link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div v-cloak id="app">
|
|
<v-app id="inspire">
|
|
<div>
|
|
<v-toolbar color="indigo accent-1" dark>
|
|
<v-btn icon class="hidden-xs-only">
|
|
<v-icon large>format_indent_increase</v-icon>
|
|
</v-btn>
|
|
<v-toolbar-title><div class="flex display-3 font-weight-bold">One</div></v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-toolbar-items class="hidden-sm-and-down">
|
|
<v-icon large>notifications_none</v-icon>
|
|
</v-toolbar-items>
|
|
</v-toolbar>
|
|
<v-tabs light
|
|
v-model="active"
|
|
color="green darken-2"
|
|
dark
|
|
slider-color="amber lighten-2"
|
|
fixed-tabs
|
|
>
|
|
<v-tab
|
|
v-for="item in items"
|
|
:key="item.id"
|
|
ripple
|
|
>
|
|
{{item.label}}
|
|
|
|
</v-tab>
|
|
<v-tab-item id="1"
|
|
|
|
>
|
|
<v-card color="blue-grey lighten-5" flat>
|
|
<v-card-text><bar></bar></v-card-text>
|
|
</v-card>
|
|
</v-tab-item>
|
|
<v-tab-item id="2"
|
|
|
|
>
|
|
<v-card flat>
|
|
<v-card-text><foo></foo></v-card-text>
|
|
</v-card>
|
|
</v-tab-item>
|
|
</v-tabs>
|
|
|
|
<div class="text-xs-center mt-3">
|
|
<v-btn @click="next">next tab</v-btn>
|
|
</div>
|
|
|
|
</div>
|
|
</v-app>
|
|
</div>
|
|
|
|
<!-- Vendor -->
|
|
<script src="../../../libs/vendor/axios.min.js"></script>
|
|
<script src="../../../libs/vendor/vue.js"></script>
|
|
<script src="../../../libs/vendor/vuex.js"></script>
|
|
<script src="../../../libs/vendor/vuetify.js"></script>
|
|
<!-- App Script -->
|
|
<?php
|
|
$ts = "?ts=" . Date("ymdhis");
|
|
?>
|
|
<script type="module">
|
|
import { store } from './store.js<?php echo $ts ?>';
|
|
import { barComponent } from './components/barComponent.js<?php echo $ts ?>';
|
|
import { fooComponent } from './components/fooComponent.js<?php echo $ts ?>';
|
|
//for testing
|
|
// window.store = store;
|
|
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
components: {
|
|
'bar': barComponent,
|
|
'foo': fooComponent,
|
|
},
|
|
data () {
|
|
return {
|
|
active: null,
|
|
items: [
|
|
{id:1,'label':'PASIEN','url':'#bar'},
|
|
{id:2,'label':'foo','url':'#foo'}
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
next () {
|
|
const active = parseInt(this.active)
|
|
this.active = (active < 2 ? active + 1 : 0)
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html>
|