Skip to content

Commit 7a27609

Browse files
author
Pooya Parsa
committed
Improve nav-item-dropdown fixes bootstrap-vue#146 
1 parent d962393 commit 7a27609

File tree

2 files changed

+59
-63
lines changed

2 files changed

+59
-63
lines changed

‎components/nav-item-dropdown.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
href="" aria-haspopup="true"
66
:aria-expanded="show"
77
:disabled="disabled">
8-
<slot>{{ text }}</slot>
8+
<slot name="text">{{ text }}</slot>
99
</a>
1010
<div :class="{'dropdown-menu': true, 'dropdown-menu-right': rightAlignment}">
11-
<slot name="dropdown-menu">Slot "items"</slot>
11+
<slot></slot>
1212
</div>
1313
</li>
1414
</template>

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

Lines changed: 57 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
<layout :docs="docs">
33
<template slot="name">
44
Navbar
5+
56
</template>
67

78
<template slot="description">
89
The navbar is a wrapper that positions branding, navigation, and other elements into a concise header.
910
It’s easily extensible and thanks to our Collapse plugin, it can easily integrate responsive behaviors.
11+
1012
</template>
1113

1214
<template slot="demo">
@@ -26,26 +28,24 @@
2628
<b-nav-item>Contact Us</b-nav-item>
2729
</b-nav>
2830
<b-nav isNavBar class="ml-auto">
29-
<b-nav-item-dropdown text="Lang">
30-
<div slot="dropdown-menu">
31-
<a href class="dropdown-item active">
32-
EN
33-
</a>
34-
<a href class="dropdown-item">
35-
ES
36-
</a>
37-
</div>
31+
<b-nav-item-dropdown text="Lang" rightAlignment>
32+
<a href class="dropdown-item active">
33+
EN
34+
</a>
35+
<a href class="dropdown-item">
36+
ES
37+
</a>
3838
</b-nav-item-dropdown>
39-
<b-nav-item-dropdown>
40-
<span>User</span>
41-
<div slot="dropdown-menu">
42-
<a href class="dropdown-item">
43-
Profile
44-
</a>
45-
<a href class="dropdown-item">
46-
Sign out
47-
</a>
48-
</div>
39+
<b-nav-item-dropdown rightAlignment>
40+
<template slot="text">
41+
<span style="font-weight: bold;">User</span>
42+
</template>
43+
<a href class="dropdown-item">
44+
Profile
45+
</a>
46+
<a href class="dropdown-item">
47+
Sign out
48+
</a>
4949
</b-nav-item-dropdown>
5050
</b-nav>
5151
</b-collapse>
@@ -55,45 +55,41 @@
5555
</template>
5656

5757
<template slot="usage">
58-
&lt;b-navbar toggleable&gt;
58+
&lt;b-navbar toggleable type=&quot;inverse&quot; variant=&quot;inverse&quot;&gt;
5959

6060
&lt;b-nav-toggle target=&quot;nav_collapse&quot;/&gt;
6161

62-
&lt;a class=&quot;navbar-brand&quot; to=&quot;/&quot;&gt;
63-
&lt;span&gt;Bootstrap4&lt;/span&gt;
62+
&lt;a class=&quot;navbar-brand&quot; style=&quot;color:white&quot; to=&quot;/&quot;&gt;
63+
&lt;span&gt;Bootstrap&lt;/span&gt;
6464
&lt;/a&gt;
6565

6666
&lt;b-collapse isNav id=&quot;nav_collapse&quot;&gt;
6767
&lt;b-nav isNavBar&gt;
6868
&lt;b-nav-item&gt;Support&lt;/b-nav-item&gt;
6969
&lt;b-nav-item&gt;Docs&lt;/b-nav-item&gt;
7070
&lt;b-nav-item&gt;Contact Us&lt;/b-nav-item&gt;
71-
&lt;/b-nav&gt;
72-
73-
&lt;b-nav isNavBar class=&quot;ml-auto&quot;&gt;
74-
&lt;b-nav-item-dropdown text=&quot;Lang&quot;&gt;
75-
&lt;div slot=&quot;dropdown-menu&quot;&gt;
76-
&lt;a href class=&quot;dropdown-item active&quot;&gt;
77-
EN
78-
&lt;/a&gt;
79-
&lt;a href class=&quot;dropdown-item&quot;&gt;
80-
ES
81-
&lt;/a&gt;
82-
&lt;/div&gt;
83-
&lt;/b-nav-item-dropdown&gt;
84-
&lt;b-nav-item-dropdown&gt;
85-
&lt;span&gt;User&lt;/span&gt;
86-
&lt;div slot=&quot;dropdown-menu&quot;&gt;
87-
&lt;a href class=&quot;dropdown-item&quot;&gt;
88-
Profile
89-
&lt;/a&gt;
90-
&lt;a href class=&quot;dropdown-item&quot;&gt;
91-
Sign out
92-
&lt;/a&gt;
93-
&lt;/div&gt;
94-
&lt;/b-nav-item-dropdown&gt;
95-
&lt;/b-nav&gt;
96-
71+
&lt;/b-nav&gt;
72+
&lt;b-nav isNavBar class=&quot;ml-auto&quot;&gt;
73+
&lt;b-nav-item-dropdown text=&quot;Lang&quot; rightAlignment&gt;
74+
&lt;a href class=&quot;dropdown-item active&quot;&gt;
75+
EN
76+
&lt;/a&gt;
77+
&lt;a href class=&quot;dropdown-item&quot;&gt;
78+
ES
79+
&lt;/a&gt;
80+
&lt;/b-nav-item-dropdown&gt;
81+
&lt;b-nav-item-dropdown rightAlignment&gt;
82+
&lt;template slot=&quot;text&quot;&gt;
83+
&lt;span style=&quot;font-weight: bold;&quot;&gt;User&lt;/span&gt;
84+
&lt;/template&gt;
85+
&lt;a href class=&quot;dropdown-item&quot;&gt;
86+
Profile
87+
&lt;/a&gt;
88+
&lt;a href class=&quot;dropdown-item&quot;&gt;
89+
Sign out
90+
&lt;/a&gt;
91+
&lt;/b-nav-item-dropdown&gt;
92+
&lt;/b-nav&gt;
9793
&lt;/b-collapse&gt;
9894

9995
&lt;/b-navbar&gt;
@@ -103,17 +99,17 @@
10399
</template>
104100

105101
<script>
106-
import layout from '../../../layouts/components.vue';
107-
108-
export default {
109-
components: {layout},
110-
data() {
111-
return {
112-
docs: {
113-
component: 'bNavbar'
114-
}
115-
};
116-
},
117-
methods: {}
118-
};
102+
import layout from '../../../layouts/components.vue';
103+
104+
export default {
105+
components: {layout},
106+
data() {
107+
return {
108+
docs: {
109+
component: 'bNavbar'
110+
}
111+
};
112+
},
113+
methods: {}
114+
};
119115
</script>

0 commit comments

Comments
 (0)