Merge pull request #2478 from tugcekucukoglu/sidebar-header

Fixed #1939 - Sidebar new header templating

api-generator/components/sidebar.js

@@ -60,11 +60,19 @@ const SidebarEvents = [
     }
 ];
 
+const SidebarSlots = [
+    {
+        name: "header",
+        description: "Custom content for the component 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

@@ -51,6 +51,10 @@ export interface SidebarSlots {
      * Custom content template.
      */
     default: () => VNode[];
+    /**
+     * Custom header template.
+     */
+    header: () => VNode[];
 }
 
 export declare type SidebarEmits = {

src/components/sidebar/Sidebar.vue

@@ -3,6 +3,9 @@
         <transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
             <div :class="containerClass" v-if="visible" :ref="containerRef" role="complementary" :aria-modal="modal" v-bind="$attrs">
                 <div class="p-sidebar-header">
+                    <div class="p-sidebar-header-content" v-if="$slots.header">
+                        <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

@@ -141,6 +141,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">