mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-08 19:45:08 +00:00
(fuse/fullscreen) Added [tooltip] & [iconTpl] inputs for customizing the Fullscreen trigger button
This commit is contained in:
parent
9005f08ac7
commit
945d0a2240
|
@ -1,7 +1,12 @@
|
||||||
<!-- Button -->
|
<!-- Button -->
|
||||||
<button
|
<button
|
||||||
mat-icon-button
|
mat-icon-button
|
||||||
[matTooltip]="'Toggle Fullscreen'"
|
[matTooltip]="tooltip || 'Toggle Fullscreen'"
|
||||||
(click)="toggleFullscreen()">
|
(click)="toggleFullscreen()">
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
|
<ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<!-- Default icon -->
|
||||||
|
<ng-template #defaultIconTpl>
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
|
||||||
|
</ng-template>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
|
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
|
||||||
import { DOCUMENT } from '@angular/common';
|
import { DOCUMENT } from '@angular/common';
|
||||||
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
|
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
|
||||||
|
|
||||||
|
@ -11,6 +11,8 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
|
||||||
})
|
})
|
||||||
export class FuseFullscreenComponent implements OnInit
|
export class FuseFullscreenComponent implements OnInit
|
||||||
{
|
{
|
||||||
|
@Input() iconTpl: TemplateRef<any>;
|
||||||
|
@Input() tooltip: string;
|
||||||
private _fsDoc: FSDocument;
|
private _fsDoc: FSDocument;
|
||||||
private _fsDocEl: FSDocumentElement;
|
private _fsDocEl: FSDocumentElement;
|
||||||
private _isFullscreen: boolean = false;
|
private _isFullscreen: boolean = false;
|
||||||
|
|
|
@ -3,15 +3,17 @@ import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
|
import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
FuseFullscreenComponent
|
FuseFullscreenComponent
|
||||||
],
|
],
|
||||||
imports : [
|
imports: [
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
MatTooltipModule
|
MatTooltipModule,
|
||||||
|
CommonModule
|
||||||
],
|
],
|
||||||
exports : [
|
exports : [
|
||||||
FuseFullscreenComponent
|
FuseFullscreenComponent
|
||||||
|
|
Loading…
Reference in New Issue
Block a user