Я пытаюсь реализовать вертикальный Swipeable / растягиваемый боковой nav-bar с угловым материалом в угловой 6. Но я застрял в реализации растяжения nav-bar с помощью мыши.Код указан ниже.
HTML-код указан ниже.
<mat-drawer-container class="example-container mat-typography" autosize>
<mat-drawer
#drawer
mode="side"
disableClose="true"
opened="true"
class="nav-bar-expandable"
>
<perfect-scrollbar [config]="config" [scrollIndicators]="true">
<div style="margin-top: 20px;">
<mat-nav-list
><mat-list-item>
<mat-icon
*ngIf="!_toggleIsExpend"
data-toggle="tooltip"
title="Employee"
mat-list-icon
>people</mat-icon
>
<span
*ngIf="_toggleIsExpend"
data-toggle="tooltip"
title="Employee"
(click)="getElementNameTest('Employee')"
>Employee</span
></mat-list-item
></mat-nav-list
>
<mat-nav-list
><mat-list-item>
<mat-icon
*ngIf="!_toggleIsExpend"
data-toggle="tooltip"
title="Tax Rates"
mat-list-icon
>money</mat-icon
>
<span
*ngIf="_toggleIsExpend"
data-toggle="tooltip"
title="Tax Rates"
(click)="getElementNameTest('Tax_Rates')"
>Tax Rates</span
></mat-list-item
></mat-nav-list
>
</div>
</perfect-scrollbar>
</mat-drawer>
</mat-drawer-container>
Scss указан ниже.
.example-container {
min-height: 592px;
height: 100%;
.nav-bar-expandable {
// background-color: aqua;
max-width: 160px;
.toggle-icon {
margin: 10px;
cursor: pointer;
}
}
}
.mat-nav-list {
padding-top: 0px !important;
.mat-list-item {
height: 100% !important;
margin: 10px 0;
color: white;
font-family: sans-serif;
font-size: 14px !important;
font-weight: bold !important;
.mat-list-item-content {
padding: 0 6px;
}
}
a {
white-space: nowrap;
width: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.nav-bar-expandable.mat-drawer {
background: rgba(204, 0, 0, 0.6784313725490196);
opacity: 0.9;
}
.mat-expansion-panel {
background: rgba(204, 0, 0, 0);
::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body {
padding: 0 2px 4px !important;
}
}
.mat-expansion-panel-header-title {
color: #ffffff;
font-weight: bold;
font-size: 14px;
font-family: sans-serif;
}
.nav-bar-accordian > .mat-expansion-indicator:after {
color: #ffffff !important;
}
.mat-expansion-panel-header {
padding: 0 2px !important;
}
Пожалуйста, помогите мне, спасибо заранее.Я тоже могу перейти в Bootstrap.