Merge pull request #368 from messenjer/feature/b-nav-dropdown-item-slots-to-child

feat(BNavItemDropdown): pass slots to the child BDropdown

Author: mariusa

src/App.vue

@@ -1659,22 +1659,40 @@
       >
     </div>
 
-    <!-- <b-nav pills>
-    <b-nav-item active>Active</b-nav-item>
-    <b-nav-item>Link</b-nav-item>
-    <b-nav-item-dropdown
-      id="my-nav-dropdown"
-      text="Dropdown"
-      toggle-class="nav-link-custom"
-      right
-    >
-      <b-dropdown-item>One</b-dropdown-item>
-      <b-dropdown-item>Two</b-dropdown-item>
-      <b-dropdown-divider></b-dropdown-divider>
-      <b-dropdown-item>Three</b-dropdown-item>
-    </b-nav-item-dropdown>
-    </b-nav>-->
-
+    <div class="my-2">
+      <h2>Nav</h2>
+      <h4 class="my-3">Nav with a dropdown</h4>
+      <div>
+        <b-nav pills>
+          <b-nav-item active>Active</b-nav-item>
+          <b-nav-item>Link</b-nav-item>
+          <b-nav-item-dropdown
+            id="my-nav-dropdown"
+            text="Dropdown"
+            toggle-class="nav-link-custom"
+            right
+          >
+            <b-dropdown-item>One</b-dropdown-item>
+            <b-dropdown-item>Two</b-dropdown-item>
+            <b-dropdown-divider></b-dropdown-divider>
+            <b-dropdown-item>Three</b-dropdown-item>
+          </b-nav-item-dropdown>
+        </b-nav>
+      </div>
+      <h4 class="m-2">Nav with a dropdown and a custom Button Icon</h4>
+      <div>
+        <b-nav pills>
+          <b-nav-item active>Active</b-nav-item>
+          <b-nav-item>Link</b-nav-item>
+          <b-nav-item-dropdown text="Custom Button Icon" no-caret variant="link">
+            <template #button-content>
+              <img src="./assets/logo.png" style="height: 1em" />
+            </template>
+            <b-dropdown-item href="#">Action</b-dropdown-item>
+          </b-nav-item-dropdown>
+        </b-nav>
+      </div>
+    </div>
     <!-- Tooltip -->
     <div class="my-2">
       <h2>Tooltip</h2>

src/components/BNavItemDropdown.vue

@@ -1,7 +1,9 @@
 <template>
   <li class="nav-item dropdown">
     <b-dropdown v-bind="$props">
-      <slot />
+      <template v-for="(_, slot) in $slots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope || {}" />
+      </template>
     </b-dropdown>
   </li>
 </template>