8000 Bootstrap 4 alpha 6 support : Nav & Navbar · thomasfowler/bootstrap-vue@765ee39 · GitHub
[go: up one dir, main page]
Skip to content

Commit 765ee39

Browse files
author
Pooya Parsa
committed
Bootstrap 4 alpha 6 support : Nav & Navbar
1 parent 3c0f927 commit 765ee39

File tree

5 files changed

+57
-31
lines changed

5 files changed

+57
-31
lines changed

‎components/form.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<form :class="classObject">
3+
<slot></slot>
4+
</form>
5+
</template>
6+
7+
<script>
8+
export default {
9+
computed: {
10+
classObject(){
11+
return [
12+
this.inline ? 'form-inline' : ''
13+
];
14+
},
15+
},
16+
props: {
17+
inline: {
18+
type:Boolean,
19+
default: false,
20+
}
21+
},
22+
}
23+
</script>

‎components/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import bCollapse from './collapse.vue'
1111
import bCollapseToggle from './collapse-toggle.vue'
1212
import bDropdown from './dropdown.vue'
1313
import bDropdownSelect from './dropdown-select.vue'
14+
import bForm from './form.vue'
1415
import bFormFieldset from './form-fieldset.vue'
1516
import bFormCheckbox from './form-checkbox.vue'
1617
import bFormRadio from './form-radio.vue'
@@ -45,6 +46,7 @@ export {
4546
bCard,
4647
bDropdown,
4748
bDropdownSelect,
49+
bForm,
4850
bFormCheckbox,
4951
bFormFieldset,
5052
8000 bFormRadio,

‎components/nav.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
2-
<nav :class="classObject">
2+
<div :class="classObject">
33
<slot></slot>
4-
</nav>
4+
</div>
55
</template>
66

7-
87
<script>
98
109
export default {
1110
computed: {
1211
classObject(){
1312
return [
14-
'nav',
13+
'navbar-nav',
14+
'mr-auto',
1515
this.inline ? 'nav-inline' : '',
1616
this.tabs ? 'nav-tabs' : '',
1717
this.pills ? 'nav-pills' : '',

‎components/navbar.vue

Lines changed: 17 additions & 1 deletion
< 9E88 td data-grid-cell-id="diff-6b7e7b8175dd6130983dc472b3f3ff12268706e1a304a05fb8c286020e81f56a-39-54-0" data-selected="false" role="gridcell" style="background-color:var(--diffBlob-additionNum-bgColor, var(--diffBlob-addition-bgColor-num));text-align:center" tabindex="-1" valign="top" class="focusable-grid-cell diff-line-number position-relative left-side">
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
<template>
22
<nav :class="classObject">
3+
4+
<button class="navbar-toggler navbar-toggler-right"
5+
type="button"
6+
aria-expanded="false"
7+
aria-label="Toggle navigation"
8+
v-if="toggleable"
9+
>
10+
<span class="navbar-toggler-icon"></span>
11+
</button>
12+
313
<slot></slot>
14+
415
</nav>
516
</template>
617

@@ -15,7 +26,8 @@
1526
this.navbarType,
1627
this.navbarVariant,
1728
this.navbarfixed,
18-
this.full ? 'navbar-full' : ''
29+
this.full ? 'navbar-full' : '',
30+
'navbar-toggleable-md',
1931
];
2032
},
2133
navbarType() {
@@ -37,6 +49,10 @@
3749
type: String,
3850
default: 'faded',
3951
},
52+
toggleable: {
53+
type: Boolean,
54+
default: false,
55+
},
4056
fixed: {
4157
type: String,
4258
default: '',

‎docs/pages/docs/components/navbar.vue

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,54 +15,39 @@
1515

1616
<a class="navbar-brand" href="#">BootStrap VUE</a>
1717

18-
<b-nav class="navbar-nav">
18+
<b-nav>
1919
<b-nav-item link="#" active>Home <span class="sr-only">(current)</span></b-nav-item>
2020
<b-nav-item link="#">Features</b-nav-item>
2121
<b-nav-item link="#">Pricing</b-nav-item>
2222
<b-nav-item link="#">About</b-nav-item>
2323
</b-nav>
24-
<form class="form-inline float-xs-right">
25-
<input class="form-control" type="text" placeholder="Search">
26-
<b-btn>Search</b-btn>
27-
</form>
28-
</b-navbar>
29-
30-
<br>
31-
<br>
32-
<br>
33-
<br>
34-
35-
<b-navbar fixed="bottom" type="dark" variant="inverse" full>
3624

37-
<a class="navbar-brand" href="#">Footer</a>
25+
<b-form inline>
26+
<input class="form-control mr-sm-2" type="text" placeholder="Search">
27+
<b-btn class="my-2 my-sm-0">Search</b-btn>
28+
</b-form>
3829

39-
<b-nav class="navbar-nav">
40-
<b-nav-item link="#" active>Home <span class="sr-only">(current)</span></b-nav-item>
41-
<b-nav-item link="#">Features</b-nav-item>
42-
<b-nav-item link="#">Pricing</b-nav-item>
43-
<b-nav-item link="#">About</b-nav-item>
44-
</b-nav>
45-
<form class="form-inline float-xs-right">
46-
<input class="form-control" type="text" placeholder="Search">
47-
<b-btn>Search</b-btn>
48-
</form>
4930
</b-navbar>
5031

51-
5232
</template>
5333

5434
<template slot="usage">
5535
&lt;b-navbar fixed=&quot;top&quot; type=&quot;light&quot; full&gt;
5636

5737
&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;BootStrap VUE&lt;/a&gt;
5838

59-
&lt;b-nav class=&quot;navbar-nav&quot;&gt;
39+
&lt;b-nav&gt;
6040
&lt;b-nav-item link=&quot;#&quot; active&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/b-nav-item&gt;
6141
&lt;b-nav-item link=&quot;#&quot;&gt;Features&lt;/b-nav-item&gt;
6242
&lt;b-nav-item link=&quot;#&quot;&gt;Pricing&lt;/b-nav-item&gt;
6343
&lt;b-nav-item link=&quot;#&quot;&gt;About&lt;/b-nav-item&gt;
6444
&lt;/b-nav&gt;
6545

46+
&lt;b-form inline&gt;
47+
&lt;input class=&quot;form-control mr-sm-2&quot; type=&quot;text&quot; placeholder=&quot;Search&quot;&gt;
48+
&lt;b-btn class=&quot;my-2 my-sm-0&quot;&gt;Search&lt;/b-btn&gt;
49+
&lt;/b-form&gt;
50+
6651
&lt;/b-navbar&gt;
6752
</template>
6853

0 commit comments

Comments
 (0)
0