Upon viewing the screenshot provided, it can be observed that there is a tab located at the bottom of a webpage. The desired functionality is for this tab to slide underneath the <div> element containing the word "Test" using Angular animations. The challenge lies in creating a responsive design where pixel values cannot be utilized due to varying page sizes. Attempts have been made with percentage values, however, the issue persists as these values are relative to the tab container instead of the overall height.
Component Implementation:
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
animations: [
trigger('tabState', [state('default', style({
transform: 'translateY(0)'
})
),
state('open', style({
transform: 'translateY(-100%)'
})),
transition('default <=> open', animate(500))
])
]})
export class TestComponent {
state = 'default';
onComeIn() {
this.state === 'default' ? this.state = 'open' : this.state = 'default';
}
}
HTML Layout:
<div class="mainContainer">
<mat-toolbar color="primary">
<div class="d-flex align-items-center justify-content-between">
<span>Test</span>
</div>
</mat-toolbar>
<div class="mainContentContainer">
<div class="d-flex flex-column" style="height: 100%">
<div>content</div>
<div class="mt-auto">
<div class="tabContainer" [@tabState]="state">
<div class="tab" (click)="onComeIn()">Tab</div>
</div>
</div>
</div>
CSS Styles:
.tab {
box-sizing: border-box;
height: 4.2em;
width: 33%;
background-color: white;
padding: 1em 1.2em 0.45em 1.2em;
border-radius: 0.5em 0.5em 0 0;
box-shadow: 0 0.05em #b7b7b7;
}
.mainContainer {
width: 100%;
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mainContentContainer {
flex: 1;
background-color: #455864;
}