Permalink
Browse files

perf(navbar-toggle): convert template to render function (#1313)

* Update README.md

* [navbar-toggle] convert to render function

* Delete navbar-toggle.vue

* Update README.md
  • Loading branch information...
tmorehouse committed Nov 10, 2017
1 parent 20d7d0b commit 88657fba257e2d43b9ff1d848f6fd184c1c07074
Showing with 53 additions and 63 deletions.
  1. +4 −2 src/components/navbar/README.md
  2. +49 −2 src/components/navbar/navbar-toggle.js
  3. +0 −59 src/components/navbar/navbar-toggle.vue
@@ -272,10 +272,12 @@ Use the `<b-navbar-toggle>` component to control the collapse component, and set
Set the `toggleable` prop on `<b-navbar>` to the desired breakpoint you would like content
to automatically collapse at. Possible `toggleable`values are `sm`, `md`, and `lg`. Setting
`togleable` to `true` (or with no explicit value) will set the breakpoint to `sm`, while
`toggleable` to `true` (or with no explicit value) will set the breakpoint to `sm`, while
setting it to `false` will disable collapsing.
`<b-navbar-toggle>` should be placed _before_ any `<b-collapse is-nav>` component.
`<b-navbar-toggle>` components are left-aligned by default, but should they follow a sibling
element like `<b-navbar-brand>`, they’ll automatically be aligned to the far right. Reversing
your markup will reverse the placement of the toggler.
See the first example on this page for reference, and also refer to
[`<b-collapse>`](/docs/components/collapse) for details on the collapse component.
@@ -1,3 +1,50 @@
import bNavbarToggle from './navbar-toggle.vue';
import { listenOnRootMixin } from '../../mixins';
export default bNavbarToggle;
export default {
mixins: [listenOnRootMixin],
render(h) {
const t = this;
return h(
'button',
{
class: [ 'navbar-toggler' ],
attrs: {
type: 'button',
'aria-label': t.label,
'aria-controls': t.target,
'aria-expanded': t.toggleState ? 'true' : 'false'
},
on: { click: t.onClick }
},
[ t.$slots.default || h('span', { class: [ 'navbar-toggler-icon' ] }) ]
);
},
data() {
return {
toggleState: false
};
},
props: {
label: {
type: String,
default: 'Toggle navigation'
},
target: {
type: String,
required: true
}
},
methods: {
onClick() {
this.$root.$emit('bv::toggle::collapse', this.target);
},
handleStateEvt(id, state) {
if (id === this.target) {
this.toggleState = state;
}
}
},
created() {
this.listenOnRoot('bv::collapse::state', this.handleStateEvt);
}
};

This file was deleted.

Oops, something went wrong.

0 comments on commit 88657fb

Please sign in to comment.