使用angular 2中的flex box css在xs屏幕尺寸上调整mat-table [英] Adjusting mat-table on xs screen size using flex box css in angular 2
本文介绍了使用angular 2中的flex box css在xs屏幕尺寸上调整mat-table的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用 flexbox css 实现了一个简单的有角度的材料表.
在桌面上，我的表格视图如下所示.
在 md 屏幕尺寸中，视图为
在 xs 屏幕尺寸中，它的视图是
当我在 XS 屏幕视图中看到表格时，表格列之间的间距没有正确调整..
有没有办法通过指定表格的最小宽度并在 XS 和 SM 屏幕尺寸时添加水平滚动来添加水平滚动以正确分隔表格列.
下面显示的是我的 .html 文件
<mat-table #table [dataSource]="dataSource"><!-- 复选框列--><ng-container matColumnDef="select"><mat-header-cell *matHeaderCellDef><mat-checkbox (change)="$event ? masterToggle() : null"[检查]="selection.hasValue() && isAllSelected()"[不确定]="selection.hasValue() && !isAllSelected()"></mat-checkbox></mat-header-cell><mat-cell *matCellDef="let row"><mat-checkbox (click)="$event.stopPropagation()"(change)="$event ? selection.toggle(row) : null"[选中]="selection.isSelected(row)"></mat-checkbox></mat-cell></ng-容器><!-- 位置列--><ng-container matColumnDef="position"><mat-header-cell *matHeaderCellDef>号</mat-header-cell><mat-cell *matCellDef="let element">{{element.position}} </mat-cell></ng-容器><!-- 名称列--><ng-container matColumnDef="name"><mat-header-cell *matHeaderCellDef>名称</mat-header-cell><mat-cell *matCellDef="let element">{{element.name}} </mat-cell></ng-容器><!-- 权重栏--><ng-container matColumnDef="weight"><mat-header-cell *matHeaderCellDef>重量</mat-header-cell><mat-cell *matCellDef="let element">{{element.weight}} </mat-cell></ng-容器><!-- 符号列--><ng-container matColumnDef="symbol"><mat-header-cell *matHeaderCellDef>符号</mat-header-cell><mat-cell *matCellDef="let element">{{element.symbol}} </mat-cell></ng-容器><mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row><mat-row *matRowDef="let row; columns:displayedColumns;"></mat-row></mat-table><mat-paginator #paginator[页面大小]="10"[pageSizeOptions]="[5, 10, 20]"></mat-paginator>下面是我的 .css 文件
.example-container {显示:弹性；弹性方向:列；最小宽度:300px；边距:10px；}.mat-table {溢出:自动；最大高度:250px；}mat-header-cell，mat-header-row，.mat-header-cell-def{背景:#f2f4f7;最小高度:15px；字体系列:Verdana，无衬线；字体粗细:粗体；字体大小:13px；颜色:#1a084c；底边距:5px；顶部:0；位置:粘性；z-索引:1；}垫排{最小高度:20px；字体系列:Verdana，无衬线；字体大小:11px；颜色:#1a084c；}垫单元{高度:20px；字体系列:Verdana，无衬线；字体大小:11px；颜色:#1a084c；}下面是我的 .ts 文件
import { Component, OnInit,Inject, ViewChild } from '@angular/core';从'../showmenu.service'导入{ShowmenuService}；从@angular/material"导入 {MatTableDataSource, MatPaginator}；从@angular/cdk/collections"导入{SelectionModel}；从@angular/router"导入 { ActivatedRoute, Params };从'@angular/material/dialog' 导入 { MAT_DIALOG_DATA, MatDialogRef, MatDialog };@成分({选择器:'app-space-admin'，templateUrl: './space-admin.component.html',styleUrls: ['./space-admin.component.css']})导出类 SpaceAdminComponent 实现 OnInit {构造函数(公共showmenu:ShowmenuService，私有_activateroute:ActivatedRoute，公共对话框:MatDialog){}ngOnInit() {this.showmenu.show();this.showmenu.show1();}displayColumns = ['select','position','name','weight','symbol'];dataSource = new MatTableDataSource(ELEMENT_DATA);selection = new SelectionModel(true, []);@ViewChild(MatPaginator) 分页器:MatPaginator；/*** 在视图初始化之后设置分页器，因为该组件将* 能够查询其视图以获取已初始化的分页器.*/ngAfterViewInit() {this.dataSource.paginator = this.paginator;}/** 被选元素的数量是否与总行数匹配.*/isAllSelected() {const numSelected = this.selection.selected.length;const numRows = this.dataSource.data.length;返回 numSelected === numRows;}/** 如果没有全部选中，则选中所有行；否则明确选择.*/主切换(){this.isAllSelected() ?this.selection.clear() :this.dataSource.data.forEach(row => this.selection.select(row));}}导出接口元素{名称:字符串；位置:编号；重量:数量；符号:字符串；}const ELEMENT_DATA: 元素 [] = [{位置:1，名称:'氢'，重量:1.0079，符号:'H'}，{位置:2，名称:'Helium'，重量:4.0026，符号:'He'}，{位置:3，名称:'锂'，重量:6.941，符号:'锂'}，{位置:4，名称:'铍'，重量:9.0122，符号:'Be'}，{位置:5，名称:'硼'，重量:10.811，符号:'B'}，{位置:6，名称:'碳'，重量:12.0107，符号:'C'}，{位置:7，名称:'氮'，重量:14.0067，符号:'N'}，{位置:8，名称:'氧气'，重量:15.9994，符号:'O'}，{位置:9，名称:'氟'，重量:18.9984，符号:'F'}，{位置:10，名称:'霓虹'，重量:20.1797，符号:'Ne'}，{位置:11，名称:'钠'，重量:22.9897，符号:'Na'}，{位置:12，名称:'镁'，重量:24.305，符号:'镁'}，{位置:13，名称:'铝'，重量:26.9815，符号:'铝'}，{位置:14，名称:'硅'，重量:28.0855，符号:'Si'}，{位置:15，名称:'磷'，重量:30.9738，符号:'P'}，{位置:16，名称:'硫'，重量:32.065，符号:'S'}，{位置:17，名称:'氯'，重量:35.453，符号:'Cl'}，{位置:18，名称:'氩'，重量:39.948，符号:'Ar'}，{位置:19，名称:'钾'，重量:39.0983，符号:'K'}，{位置:20，名称:'钙'，重量:40.078，符号:'Ca'}，]; 在 xs 视图中修改表
解决方案
要调整列之间的间距，请在 mat-cell 上设置最小宽度并使用媒体查询.
例如对于小屏幕:
@media only screen and (max-width: 736px) and (orientation:portrait) {垫头行，垫行{宽度:200%；//你也可以在px、em等中设置...}}I have implemented a simple angular material table using flexbox css.
In the desktop my table view is as shown below.
In md screen size the view is
In xs screen size its view is
When i see the table in XS screen view ,the spacing between the table columns is not properly adjusted..
Is there a way out where i can add a horizontal scroll to space the table columns properly by specifying a min width to my table and adding a horizontal scroll when in XS and SM screen sizes.
Below shown is my .html file
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</div>
Below is my .css file
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
margin:10px;
}
.mat-table {
overflow: auto;
max-height: 250px;
}
mat-header-cell, mat-header-row, .mat-header-cell-def{
background:#f2f4f7;
min-height:15px;
font-family:Verdana,sans-serif;
font-weight:bold;
font-size:13px;
color: #1a084c;
margin-bottom:5px;
top: 0;
position: sticky;
z-index: 1;
}
mat-row{
min-height:20px;
font-family:Verdana,sans-serif;
font-size:11px;
color: #1a084c;
}
mat-cell{
height:20px;
font-family:Verdana,sans-serif;
font-size:11px;
color: #1a084c;
}
Below is my .ts file
import { Component, OnInit,Inject, ViewChild } from '@angular/core';
import {ShowmenuService} from '../showmenu.service';
import {MatTableDataSource, MatPaginator} from '@angular/material';
import {SelectionModel} from '@angular/cdk/collections';
import { ActivatedRoute, Params } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
@Component({
selector: 'app-space-admin',
templateUrl: './space-admin.component.html',
styleUrls: ['./space-admin.component.css']
})
export class SpaceAdminComponent implements OnInit {
constructor(public showmenu:ShowmenuService, private _activateroute: ActivatedRoute, public dialog: MatDialog) { }
ngOnInit() {
this.showmenu.show();
this.showmenu.show1();
}
displayedColumns = ['select','position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
selection = new SelectionModel<Element>(true, []);
@ViewChild(MatPaginator) paginator: MatPaginator;
/**
* Set the paginator after the view init since this component will
* be able to query its view for the initialized paginator.
*/
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
}
export interface Element {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];
modified table in xs view
解决方案
To adjust the spacing between the columns, set min width on mat-cell and use media queries.
For example for small screens:
@media only screen and (max-width: 736px) and (orientation:portrait) {
mat-header-row, mat-row {
width: 200%; //you can also set it in px,em, etc...
}
}
这篇关于使用angular 2中的flex box css在xs屏幕尺寸上调整mat-table的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
