w33ble/customer-manager-vue-demo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

turn the top nav into a component

Browse Source
This commit is contained in:
Joe Fleming
2017-02-14 20:23:44 -07:00
parent 0a14321a06
commit 3ee9fd9853
2 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.vue
View File

@@ -1,13 +1,7 @@
<template> <template>
<!-- top navigation --> <!-- top navigation -->
<div id="app" class="container"> <div id="app" class="container">
<nav class="nav has-shadow"> <top-nav title="Customer Management">
<div class="nav-left">
<div class="nav-item is-brand">
<router-link class="nav-item is-brand" to="/">Customer Management</router-link>
</div>
</div>
<!-- This "nav-toggle" hamburger menu is only visible on mobile --> <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" --> <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
<span class="nav-toggle"> <span class="nav-toggle">
@@ -35,7 +29,7 @@
</a> </a>
</span> </span>
</div> </div>
</nav> </top-nav>
<!-- main app container --> <!-- main app container -->
<router-view></router-view> <router-view></router-view>
@@ -43,8 +37,13 @@
</template> </template>
<script> <script>
import TopNav from './components/TopNav.vue';
export default { export default {
name: 'App', name: 'App',
components: {
'top-nav': TopNav,
}
} }
</script> </script>

21
src/components/TopNav.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<nav class="nav has-shadow">
<div class="nav-left">
<div class="nav-item is-brand">
<router-link class="nav-item is-brand" to="/">{{ title }}</router-link>
</div>
</div>
<!-- allow injection of items into the nav -->
<slot></slot>
</nav>
</template>
<script>
export default {
name: 'TopNav',
props: {
title: String,
}
}
</script>