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

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

@@ -8,13 +8,14 @@
<ng-template #tabLayout>
<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">
<ng-container *ngIf="contentBlock.icon">
<mat-tab *ngFor="let contentBlock of contentBlocks"
[label]="contentBlock.label"
class="adf-info-drawer-tab">
<ng-template mat-tab-label>
<mat-icon>{{ contentBlock.icon }}</mat-icon>
<mat-icon *ngIf="contentBlock.icon">{{ contentBlock.icon }}</mat-icon>
<span *ngIf="contentBlock.label">{{ contentBlock.label }}</span>
</ng-template>
</ng-container>
<ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
</mat-tab>

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

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