inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

info drawer fixes (#4529)

Browse Source
This commit is contained in:
Denys Vuika
2019-03-29 16:09:54 +00:00
committed by Eugenio Romano
parent be904dbe9b
commit 3b53184598
3 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/core/components/info-drawer-tab.component.md
View File

@@ -18,27 +18,28 @@ Render a tab with label:
```html ```html
<adf-info-drawer> <adf-info-drawer>
<adf-info-drawer-tab [label]="'Tab1'"> <adf-info-drawer-tab label="Tab1">
<div> Tab1 content</div> <div>Tab1 content</div>
</adf-info-drawer-tab> </adf-info-drawer-tab>
<adf-info-drawer-tab [label]="'Tab2'"> <adf-info-drawer-tab label="Tab2">
<div> Tab2 content</div> <div>Tab2 content</div>
</adf-info-drawer-tab> </adf-info-drawer-tab>
</adf-info-drawer> </adf-info-drawer>
``` ```
Render tab with icon instead of labels: Render tab with icons instead of labels:
```html ```html
<adf-info-drawer> <adf-info-drawer>
<adf-info-drawer-tab [label]="'Tab1'" icon="comment"> <adf-info-drawer-tab icon="comment">
<div> Tab1 content</div> <div>Tab1 content</div>
</adf-info-drawer-tab> </adf-info-drawer-tab>
<adf-info-drawer-tab [label]="'Tab2'" icon="people"> <adf-info-drawer-tab icon="people">
<div> Tab2 content</div> <div>Tab2 content</div>
</adf-info-drawer-tab> </adf-info-drawer-tab>
</adf-info-drawer> </adf-info-drawer>
@@ -46,6 +47,8 @@ Render tab with icon instead of labels:
![Info drawer screenshot](../../docassets/images/icon-tab.png) ![Info drawer screenshot](../../docassets/images/icon-tab.png)
You can also combine `icon` and `label` properties.
## Class members ## Class members
### Properties ### Properties

15
lib/core/info-drawer/info-drawer.component.html
View File

@@ -8,13 +8,14 @@
<ng-template #tabLayout> <ng-template #tabLayout>
<mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)"> <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
<mat-tab *ngFor="let contentBlock of contentBlocks" [label]="contentBlock.label" class="adf-info-drawer-tab"> <mat-tab *ngFor="let contentBlock of contentBlocks"
<ng-container *ngIf="contentBlock.icon"> [label]="contentBlock.label"
<ng-template mat-tab-label> class="adf-info-drawer-tab">
<mat-icon>{{ contentBlock.icon }}</mat-icon>
<span *ngIf="contentBlock.label">{{ contentBlock.label }}</span> <ng-template mat-tab-label>
</ng-template> <mat-icon *ngIf="contentBlock.icon">{{ contentBlock.icon }}</mat-icon>
</ng-container> <span *ngIf="contentBlock.label">{{ contentBlock.label }}</span>
</ng-template>
<ng-container *ngTemplateOutlet="contentBlock.content"></ng-container> <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
</mat-tab> </mat-tab>

5
lib/core/info-drawer/info-drawer.component.scss
View File

@@ -1,7 +1,12 @@
.adf { .adf {
&-info-drawer { &-info-drawer {
display: block; display: block;
.mat-tab-label {
min-width: 0;
}
& &-layout { & &-layout {
&-content { &-content {