Permalink
Browse files

feat(navbar-brand): New component <b-navbar-brand> (#710)

* [navbar-brand] New helper component

Add explicit component for `<b-navbar-brand>`

* [navbar-brand] add to index.js

* [navbar-brand] add to navbar docs

* [navbar] document b-navbar-brand in example
  • Loading branch information...
tmorehouse committed Jul 19, 2017
1 parent 9ff5567 commit 721292cad0a107b1884a5186a102e6d3d772fb90
Showing with 80 additions and 38 deletions.
  1. +38 −37 docs/components/navbar/README.md
  2. +2 −1 docs/components/navbar/meta.json
  3. +2 −0 lib/components/index.js
  4. +38 −0 lib/components/navbar-brand.vue
@@ -6,43 +6,44 @@
```html
<b-navbar toggleable type="inverse" variant="success">
<b-nav-toggle target="nav_collapse"></b-nav-toggle>
<b-link class="navbar-brand" to="#">
<span>BootstrapVue</span>
</b-link>
<b-collapse is-nav id="nav_collapse">
<b-nav is-nav-bar>
<b-nav-item>Support</b-nav-item>
<b-nav-item>Docs</b-nav-item>
<b-nav-item>Contact Us</b-nav-item>
</b-nav>
<b-nav is-nav-bar class="ml-auto">
<!-- Navbar dropdowns -->
<b-nav-item-dropdown id="lang_ddown" text="Lang" right>
<b-dropdown-item to="#">EN</b-dropdown-item>
<b-dropdown-item to="#">ES</b-dropdown-item>
<b-dropdown-item to="#">RU</b-dropdown-item>
<b-dropdown-item to="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown id="user_ddown" right>
<!-- Using button-content slot -->
<template slot="button-content">
<span style="font-weight: bold;">User</span>
</template>
<b-dropdown-item to="#">Profile</b-dropdown-item>
<b-dropdown-item to="#">Signout</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
</b-collapse>
<b-nav-toggle target="nav_collapse"></b-nav-toggle>
<!-- navbar-brand rendered as router link -->
<b-navbar-brand to="#">BootstrapVue</b-navbar-brand>
<!-- navbar-brand rendered as link -->
<!-- <b-navbar-brand href="#">BootstrapVue</b-navbar-brand> -->
<!-- navbar-brand rendered as div -->
<!-- <b-navbar-brand>BootstrapVue</b-navbar-brand> -->
<!-- navbar-brand rendered as h1 -->
<!-- <b-navbar-brand tag="h1">BootstrapVue</b-navbar-brand> -->
<b-collapse is-nav id="nav_collapse">
<b-nav is-nav-bar>
<b-nav-item>Support</b-nav-item>
<b-nav-item>Docs</b-nav-item>
<b-nav-item>Contact Us</b-nav-item>
</b-nav>
<b-nav is-nav-bar class="ml-auto">
<!-- Navbar dropdowns -->
<b-nav-item-dropdown id="lang_ddown" text="Lang" right>
<b-dropdown-item to="#">EN</b-dropdown-item>
<b-dropdown-item to="#">ES</b-dropdown-item>
<b-dropdown-item to="#">RU</b-dropdown-item>
<b-dropdown-item to="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown id="user_ddown" right>
<!-- Using button-content slot -->
<template slot="button-content">
<span style="font-weight: bold;">User</span>
</template>
<b-dropdown-item to="#">Profile</b-dropdown-item>
<b-dropdown-item to="#">Signout</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
</b-collapse>
</b-navbar>
<!-- navbar.vue -->
@@ -6,6 +6,7 @@
"bNavToggle",
"bNavItem",
"bNavText",
"bNavForm"
"bNavForm",
"bNavbarBrand"
]
}
@@ -36,6 +36,7 @@ import bNavItem from './nav-item.vue';
import bNavItemDropdown from './nav-item-dropdown.vue';
import bNavToggle from './nav-toggle.vue';
import bNavbar from './navbar.vue';
import bNavbarBrand from './navbar-brand.vue';
import bNavText from './nav-text.vue';
import bNavForm from './nav-form.vue';
import bPagination from './pagination.vue';
@@ -83,6 +84,7 @@ export {
bMedia,
bModal,
bNavbar,
bNavbarBrand,
bNavText,
bNavForm,
bPagination,
@@ -0,0 +1,38 @@
<template>
<b-link v-if="isLink"
class="navbar-brand"
v-bind="linkProps"
@click="$emit('click', $event)">
<slot></slot>
</b-link>
<componentv-else :is="tag" class="navbar-brand">
<slot></slot>
</component>
</template>
<script>
import bLink from './link.vue';
import { omitLinkProps, props as originalLinkProps, computed } from '../mixins/link';
import { assign } from '../utils/object';
// Grab a fresh object of link props (omitLinkProps does this)
// less the 'href', 'to', and 'tag' props
// that we will reconstruct without any defaults
// so our component functions properly
const linkProps = assign(omitLinkProps('href', 'to', 'tag'), {
href: { type: originalLinkProps.href.type },
to: { type: originalLinkProps.to.type },
tag: { type: String, default: 'div' }
});
export default {
components: { bLink },
props: linkProps,
computed: {
linkProps: computed.linkProps,
isLink() {
return this.to || this.href;
}
}
};
</script>

0 comments on commit 721292c

Please sign in to comment.