我正在使用Angular material design模板的angular6。目前,我的结果如下所示,
目前,我有固定的页眉和页脚,但是滚动数据集并不用户友好。
issue-data-html
是我的HTML文件,
<div class="mainDiv">
<div class="mat-elevation-z8 issueDataCard">
<div style="position: relative; z-index: 1; " class="app-list-header" fxLayout="row" fxLayoutAlign="start baseline"
fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
<div fxLayout="column" fxLayoutAlign="start baseline" fxLayoutGap="24px" fxFlex="grow" fxLayout.gt-xs="row">
<div class="app-list-name">
<h3>
Issue Statuses
</h3>
</div>
<div class="vl"></div>
<!--Search-->
<mat-form-field class="app-filter-input" floatPlaceholder="never" fxFlex>
<mat-icon class="app-filter-input-icon" matPrefix>search</mat-icon>
<input matInput #filter placeholder="Search…" (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div fxFlex="none">
<button mat-mini-fab style="background-color: #281c7b;" *ngIf="showAddIssueDataIcon"
(click)="addIssueData(null)" matTooltip="Add Issue Data">
<mat-icon>add</mat-icon>
</button>
</div>
<button class="app-column-filter" type="button" mat-icon-button [matMenuTriggerFor]="columnFilter">
<mat-icon style="font-size: 130%; color:#929292" matTooltip="Configure Table">settings</mat-icon>
</button>
<mat-menu #columnFilter="matMenu" yPosition="below" xPosition="before">
<button class="checkbox-item mat-menu-item" *ngFor="let column of displayedColumns"
(click)="toggleColumnVisibility(column, $event)">
<mat-checkbox [(ngModel)]="column.visible" (change)="columnFilterCheckboxClick($event)" class="checkbox"
#checkbox (click)="$event.stopPropagation()">
{{ column.name }}
</mat-checkbox>
</button>
</mat-menu>
<ng-content select=".actions"></ng-content>
</div>
<!--table-->
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- issueStatus Column -->
<ng-container matColumnDef="issueStatus">
<th mat-sort-header="name" mat-header-cell *matHeaderCellDef>ISSUE STATUS</th>
<td mat-cell *matCellDef="let element">
{{element.name}}
</td>
</ng-container>
<!-- showInBacklog Column -->
<ng-container matColumnDef="showInBacklog">
<th mat-sort-header="backlog" mat-header-cell *matHeaderCellDef>SHOW IN BACKLOG</th>
<td mat-cell *matCellDef="let element" style="text-transform: uppercase">
{{element.backlog}}
</td>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<th mat-sort-header="status" mat-header-cell *matHeaderCellDef>STATUS</th>
<td mat-cell *matCellDef="let element" style="text-transform: uppercase">
{{element.status}}
</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef class="action-cell" style="padding-right: 40px">ACTIONS</th>
<td mat-cell *matCellDef="let element; let i = index" class="action-cell">
<button mat-icon-button *ngIf="showAddIssueDataIcon" (click)="editIssueData(element)">
<mat-icon class="iconStyle" matTooltip="Edit Issue Data">edit</mat-icon>
</button>
<!-- -->
<a style="cursor: pointer" *ngIf="showEditIssue">
<i class="material-icons" style="color:#757575" [matMenuTriggerFor]="selectMenu"
matTooltip="More actions">more_vert</i></a>
<mat-menu #selectMenu="matMenu">
<button mat-menu-item *ngIf="element.status === 'INACTIVE'"
(click)="onClickEditStatus(element , true,i)">Make Active</button>
<button mat-menu-item *ngIf="element.status === 'ACTIVE'"
(click)="onClickEditStatus(element , false,i)">Make Inactive</button>
<button mat-menu-item (click)="deleteIssueData(element,i)">Delete</button>
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="visibleColumns"></tr>
<tr mat-row *matRowDef="let row; columns: visibleColumns;"
[ngClass]="{ hovered: row.hovered, highlighted: row.highlighted }" (click)="row.highlighted = !row.highlighted"
(mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></tr>
</table>
<mat-paginator [pageSize]="savedPageSize" (page)="columnFilterCheckboxClick($event)"
[pageSizeOptions]="[5, 10, 20, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
我的 CSS 文件如下所示,
.issueDataCard{
margin: 20px;
}
/* Structure */
table {
width: 100%;
}
.mat-sort-header-container {
align-items: center;
}
.mat-form-field {
font-size: 14px;
width: 98%;
margin: 10px;
}
@import "var";
.app-list-name {
color: $color;
border-right: 1px solid $theme-divider;
font-size: 20px;
line-height: 0px;
font-weight: 500;
padding-right: $spacing;
padding-left: $spacing;
@include media-xs {
border-right: none;
}
}
.iconStyle{
color:#281c7b;
cursor: pointer;
}
.slideToggleStyle{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.divMarginStyle{
margin-bottom: 20px;
margin-right: 20px;
}
.dataStyle{
text-align: center;
}
.dateStyle{
color:#5D6C7F;
font-size: 10px;
}
.actions{
padding-right: 30px;
}
.action-cell{
text-align: right;
}
.mat-cell{
align-items: center;
}
.mat-elevation-z8 {
display: flex;
flex-direction: column;
max-height: 500px;
width: 100%;
margin-bottom: 1.5%;
overflow: auto;
}
我不知道如何根据我的需求更改这些CSS类,任何帮助将不胜感激。