refactor: height 100% and back btn
This commit is contained in:
@@ -1,4 +1,11 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
|
<header>
|
||||||
|
@if(withBackBtn()){
|
||||||
|
<button class="icon" (click)="location.back()">
|
||||||
|
<mat-icon>arrow_back</mat-icon>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
<h1>{{title()|translate|titlecase}}</h1>
|
<h1>{{title()|translate|titlecase}}</h1>
|
||||||
|
</header>
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
</div>
|
</div>
|
||||||
@@ -1,3 +1,19 @@
|
|||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
button {
|
||||||
|
background-color: unset;
|
||||||
|
border: unset;
|
||||||
|
}
|
||||||
|
& .icon {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
padding: 0px 16px;
|
padding: 0px 16px;
|
||||||
}
|
}
|
||||||
@@ -1,13 +1,18 @@
|
|||||||
import { TitleCasePipe } from '@angular/common';
|
import { TitleCasePipe } from '@angular/common';
|
||||||
import { Component, input } from '@angular/core';
|
import { Component, inject, input } from '@angular/core';
|
||||||
import { TranslatePipe } from '@ngx-translate/core';
|
import { TranslatePipe } from '@ngx-translate/core';
|
||||||
|
import { RouterLink } from "@angular/router";
|
||||||
|
import { Location } from '@angular/common';
|
||||||
|
import { MatIcon } from "@angular/material/icon";
|
||||||
|
import { MatAnchor, MatButton } from "@angular/material/button";
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-simple-layout',
|
selector: 'app-simple-layout',
|
||||||
imports: [TranslatePipe, TitleCasePipe],
|
imports: [TranslatePipe, TitleCasePipe, MatIcon],
|
||||||
templateUrl: './simple-layout.html',
|
templateUrl: './simple-layout.html',
|
||||||
styleUrl: './simple-layout.scss',
|
styleUrl: './simple-layout.scss',
|
||||||
})
|
})
|
||||||
export class SimpleLayout {
|
export class SimpleLayout {
|
||||||
|
protected location = inject(Location)
|
||||||
readonly title = input('');
|
readonly title = input('');
|
||||||
|
readonly withBackBtn = input(false);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user