Template (./src/components/navigation.vue)
<template>
<Navbar v-bind="navbarProps" />
</template>
<script src="./navigation.ts"></script>
Source Code (./src/components/navigation.ts)
- Search Box
- We will use the change and search events to update the search text in the store.
- Items
- "New Item" link will redirect to the create view
- The rest are dummy links for this example
- The help menu will have a code example for display a form in a modal dialog
import { Components, Helper } from "gd-sprest-bs";
import { Navbar } from "gd-sprest-bs-vue";
import Vue from "vue";
import { Views } from "../router";
export default Vue.extend({
components: { Navbar },
data() {
return {
navbarProps: {
brand: "Dashboard",
type: Components.NavbarTypes.Primary,
searchBox: {
hideButton: true,
value: this.$store.state.searchText,
onChange: value => {
// Update the search property
this.$store.commit("setSearch", value);
},
onSearch: value => {
// Update the search property
this.$store.commit("setSearch", value);
}
},
items: [
{
text: "New Item",
onClick: () => {
// Show the new form
Views.CreateItem();
}
},
{
text: "Reports",
onClick: () => { }
},
{
text: "Administration",
onClick: () => { }
},
{
text: "Help",
items: [
{
text: "Common Questions",
href: "#"
},
{
text: "How To",
href: "#"
},
{
text: "Contact",
href: "#"
}
],
onClick: (item, ev) => {
// Prevent postback
ev.preventDefault();
// Display the page in a modal
Helper.SP.ModalDialog.showModalDialog({
showMaximized: true,
title: item.text,
url: item.href
});
}
}
]
} as Components.INavbarProps
}
}
});