Skip to content

Commit

Permalink
Merge pull request #12118 from primefaces/issue/12117
Browse files Browse the repository at this point in the history 
Fixed #12117 Sidebar | Add footer template
  • Loading branch information
@cetincakiroglu
cetincakiroglu authored Nov 2, 2022
2 parents 12e6988 + dc8327f commit 3c9b00a
Show file tree
Hide file tree
Showing 44 changed files with 891 additions and 857 deletions.
8 changes: 8 additions & 0 deletions src/app/components/sidebar/sidebar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
<ng-content></ng-content>
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</div>
<div class="p-sidebar-footer">
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
</div>
</div>
`,
animations: [trigger('panelState', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])],
Expand Down Expand Up @@ -127,6 +130,8 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {

headerTemplate: TemplateRef<any>;

footerTemplate: TemplateRef<any>;

constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}

ngAfterViewInit() {
Expand All @@ -142,6 +147,9 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
case 'header':
this.headerTemplate = item.template;
break;
case 'footer':
this.footerTemplate = item.template;
break;
default:
this.contentTemplate = item.template;
break;
Expand Down
13 changes: 13 additions & 0 deletions src/app/showcase/components/sidebar/sidebardemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,15 @@ <h5>Full Screen</h5>
&lt;p-sidebar [(visible)]="display" [fullScreen]="true"&gt;
Content
&lt;/p-sidebar&gt;
</app-code>

<h5>Custom Content</h5>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-sidebar [(visible)]="display"&gt;
&emsp; &lt;ng-template pTemplate="header"&gt;Header Content&lt;/ng-template&gt;
&emsp; &lt;ng-template pTemplate="content"&gt;Body Content&lt;/ng-template&gt;
&emsp; &lt;ng-template pTemplate="footer"&gt;Footer Content&lt;/ng-template&gt;
&lt;/p-sidebar&gt;
</app-code>

<h5>Properties</h5>
Expand Down Expand Up @@ -242,6 +251,10 @@ <h5>Templates</h5>
<td>content</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
Expand Down
11 changes: 6 additions & 5 deletions src/assets/components/themes/arya-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,6 @@
}
.p-autocomplete .p-autocomplete-multiple-container {
padding: 0.25rem 0.5rem;
gap: 0.5rem;
}
.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
border-color: #64B5F6;
Expand All @@ -266,6 +265,7 @@
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(100, 181, 246, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {

.p-chips .p-chips-multiple-container {
padding: 0.25rem 0.5rem;
gap: 0.5rem;
}
.p-chips .p-chips-multiple-container:not(.p-disabled):hover {
border-color: #64B5F6;
Expand All @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
}
.p-chips .p-chips-multiple-container .p-chips-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(100, 181, 246, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(100, 181, 246, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
.p-sidebar .p-sidebar-content {
padding: 1rem;
}
.p-sidebar .p-sidebar-footer {
padding: 1rem;
}

.p-tooltip .p-tooltip-text {
background: #383838;
Expand Down
11 changes: 6 additions & 5 deletions src/assets/components/themes/arya-green/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,6 @@
}
.p-autocomplete .p-autocomplete-multiple-container {
padding: 0.25rem 0.5rem;
gap: 0.5rem;
}
.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
border-color: #81C784;
Expand All @@ -266,6 +265,7 @@
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(129, 199, 132, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {

.p-chips .p-chips-multiple-container {
padding: 0.25rem 0.5rem;
gap: 0.5rem;
}
.p-chips .p-chips-multiple-container:not(.p-disabled):hover {
border-color: #81C784;
Expand All @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
}
.p-chips .p-chips-multiple-container .p-chips-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(129, 199, 132, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(129, 199, 132, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
.p-sidebar .p-sidebar-content {
padding: 1rem;
}
.p-sidebar .p-sidebar-footer {
padding: 1rem;
}

.p-tooltip .p-tooltip-text {
background: #383838;
Expand Down
11 changes: 6 additions & 5 deletions src/assets/components/themes/arya-orange/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,6 @@
}
.p-autocomplete .p-autocomplete-multiple-container {
padding: 0.25rem 0.5rem;
gap: 0.5rem;
}
.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
border-color: #FFD54F;
Expand All @@ -266,6 +265,7 @@
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(255, 213, 79, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {

.p-chips .p-chips-multiple-container {
padding: 0.25rem 0.5rem;
gap: 0.5rem;
}
.p-chips .p-chips-multiple-container:not(.p-disabled):hover {
border-color: #FFD54F;
Expand All @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
}
.p-chips .p-chips-multiple-container .p-chips-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(255, 213, 79, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(255, 213, 79, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
.p-sidebar .p-sidebar-content {
padding: 1rem;
}
.p-sidebar .p-sidebar-footer {
padding: 1rem;
}

.p-tooltip .p-tooltip-text {
background: #383838;
Expand Down
11 changes: 6 additions & 5 deletions src/assets/components/themes/arya-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,6 @@
}
.p-autocomplete .p-autocomplete-multiple-container {
padding: 0.25rem 0.5rem;
gap: 0.5rem;
}
.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
border-color: #BA68C8;
Expand All @@ -266,6 +265,7 @@
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(186, 104, 200, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {

.p-chips .p-chips-multiple-container {
padding: 0.25rem 0.5rem;
gap: 0.5rem;
}
.p-chips .p-chips-multiple-container:not(.p-disabled):hover {
border-color: #BA68C8;
Expand All @@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
}
.p-chips .p-chips-multiple-container .p-chips-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(186, 104, 200, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(186, 104, 200, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
Expand Down Expand Up @@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
.p-sidebar .p-sidebar-content {
padding: 1rem;
}
.p-sidebar .p-sidebar-footer {
padding: 1rem;
}

.p-tooltip .p-tooltip-text {
background: #383838;
Expand Down
11 changes: 6 additions & 5 deletions src/assets/components/themes/bootstrap4-dark-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,6 @@
}
.p-autocomplete .p-autocomplete-multiple-container {
padding: 0.25rem 0.75rem;
gap: 0.5rem;
}
.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
border-color: #3f4b5b;
Expand All @@ -266,6 +265,7 @@
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #8dd0ff;
color: #151515;
border-radius: 4px;
Expand Down Expand Up @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {

.p-chips .p-chips-multiple-container {
padding: 0.25rem 0.75rem;
gap: 0.5rem;
}
.p-chips .p-chips-multiple-container:not(.p-disabled):hover {
border-color: #3f4b5b;
Expand All @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
}
.p-chips .p-chips-multiple-container .p-chips-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #8dd0ff;
color: #151515;
border-radius: 4px;
Expand Down Expand Up @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #8dd0ff;
color: #151515;
border-radius: 4px;
Expand Down Expand Up @@ -4534,6 +4532,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
.p-sidebar .p-sidebar-content {
padding: 1.25rem;
}
.p-sidebar .p-sidebar-footer {
padding: 1rem 1.25rem;
}

.p-tooltip .p-tooltip-text {
background: #3f4b5b;
Expand Down
11 changes: 6 additions & 5 deletions src/assets/components/themes/bootstrap4-dark-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,6 @@
}
.p-autocomplete .p-autocomplete-multiple-container {
padding: 0.25rem 0.75rem;
gap: 0.5rem;
}
.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
border-color: #3f4b5b;
Expand All @@ -266,6 +265,7 @@
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #c298d8;
color: #151515;
border-radius: 4px;
Expand Down Expand Up @@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {

.p-chips .p-chips-multiple-container {
padding: 0.25rem 0.75rem;
gap: 0.5rem;
}
.p-chips .p-chips-multiple-container:not(.p-disabled):hover {
border-color: #3f4b5b;
Expand All @@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
}
.p-chips .p-chips-multiple-container .p-chips-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #c298d8;
color: #151515;
border-radius: 4px;
Expand Down Expand Up @@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #c298d8;
color: #151515;
border-radius: 4px;
Expand Down Expand Up @@ -4534,6 +4532,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
.p-sidebar .p-sidebar-content {
padding: 1.25rem;
}
.p-sidebar .p-sidebar-footer {
padding: 1rem 1.25rem;
}

.p-tooltip .p-tooltip-text {
background: #3f4b5b;
Expand Down
Loading

0 comments on commit 3c9b00a

Please sign in to comment.