Merge pull request #3290 from primefaces/issue-3217

Sidebar: Header slot added

api-generator/components/sidebar.js

@@ -60,11 +60,19 @@ const SidebarEvents = [
     }
 ];
 
+const SidebarSlots = [
+    {
+        name: "header",
+        description: "Custom content for the component's header"
+    }
+];
+
 module.exports = {
     sidebar: {
         name: "Sidebar",
         description: "Sidebar is a panel component displayed as an overlay at the edges of the screen.",
         props: SidebarProps,
-        events: SidebarEvents
+        events: SidebarEvents,
+        slots: SidebarSlots
     }
 };

src/components/sidebar/Sidebar.d.ts

@@ -13,6 +13,7 @@ declare class Sidebar extends Vue {
     $emit(eventName: 'hide'): this;
     $slots: {
         '': VNode[];
+        'header': VNode[];
     }
 }
 

src/components/sidebar/Sidebar.vue

@@ -2,6 +2,9 @@
     <transition name="p-sidebar" @enter="onEnter" @leave="onLeave" appear>
         <div :class="containerClass" v-if="visible" ref="container" role="complementary" :aria-modal="modal">
             <div class="p-sidebar-header">
+                <div v-if="$slots.header" class="p-sidebar-header-content">
+                    <slot name="header"></slot>
+                </div>
                 <button class="p-sidebar-close p-sidebar-icon p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
                     <span class="p-sidebar-close-icon pi pi-times" />
                 </button>

src/views/sidebar/SidebarDoc.vue

@@ -131,6 +131,24 @@ import Sidebar from 'primevue/sidebar';
 					</table>
 				</div>
 
+				<h5>Slots</h5>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>header</td>
+                                <td>-</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
 				<h5>Styling</h5>
 				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
 				<div class="doc-tablewrapper">

src/views/slider/SliderDoc.vue

@@ -223,4 +223,4 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
+</template>