列表中經常會遇到的問題大約幾下幾種:
當後台需要RWD,但欄位太多了,縮起來實在是太難看。
使用materia提供的MatPaginatorModule
,很難去翻譯它內建字串。
通常list上方都會有搜尋列,需要做搜尋列的驗證。
其實欄位多的 table,要做RWD的方式。
我認為最好的畫面呈現如下:
其實看過materia提供的table樣式似乎沒有這樣的排版,
於是乎就自己用css仿一個table。
assets/css/layout/_table.css
.table {
min-width: 100%;
text-align: center;
flex: 0 0 auto;
}
.table tbody button {
margin: 0 2px;
}
.table th,
.table td {
padding: 5px;
word-break: break-all;
}
.table .sticky-col {
position: sticky;
left: 0;
top: auto;
}
.table td {
height: 30px;
}
.table td.text-right {
text-align: right;
padding-right: 20px;
}
@media only screen and (max-width: 767px) {
.table {
display: block;
}
.table thead,
.table tbody,
.table tfoot,
.table th,
.table td,
.table tr {
display: block;
}
.table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.table tbody tr td {
height: auto;
min-height: 30px;
position: relative;
}
.table tbody tr td span,
.table tbody tr td a {
line-height: 34px;
}
.table td:before {
position: absolute;
top: 0;
left: 10px;
line-height: 40px;
}
.table td:before {
content: attr(data-title);
}
.table td span.spill {
display: inline-block;
width: 200px;
}
tfoot tr td {
position: relative;
}
/* spec */
.content-main .table tr,
.rank-container .table tr {
border-bottom: 1px solid #ba1830;
}
.content-main .table tr:first-child,
.rank-container .table tr:first-child {
border-top: 1px solid #ba1830;
}
}
實際運用時:
<table class="table"></table>
套上去後就會如圖
如果要改變分頁的翻譯,可以自定義providers
。
shared/materia/custom-mat-paginator-intl.ts
:新增一隻自定義的 paginator。
import { TranslateService } from "@ngx-translate/core";
import { MatPaginatorIntl } from "@angular/material";
import { Injectable } from "@angular/core";
@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
constructor(private translate: TranslateService) {
super();
this.translate.onLangChange.subscribe((e: Event) => {
this.getAndInitTranslations();
});
this.getAndInitTranslations();
}
getAndInitTranslations() {
this.translate
.get([
"items_per_page",
"next_page",
"previous_page",
"of_label"
])
.subscribe(translation => {
this.itemsPerPageLabel = translation["items_per_page"];
this.nextPageLabel = translation["next_page"];
this.previousPageLabel = translation["previous_page"];
this.changes.next();
});
}
getRangeLabel = (page: number, pageSize: number, length: number) => {
if (length === 0 || pageSize === 0) {
return `0 / ${length}`;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex =
startIndex < length ?
Math.min(startIndex + pageSize, length) : startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} / ${length}`;
};
}
--
shared/materia/materia.module.ts
:import {
...
MatPaginatorModule,
MatPaginatorIntl
} from "@angular/material";
import { CustomMatPaginatorIntl } from "./custom-mat-paginator-intl";
@NgModule({
imports: [
...
MatPaginatorModule,
...
],
exports: [
...
MatPaginatorModule,
...
],
declarations: [],
providers: [
{
provide: MatPaginatorIntl,
useClass: CustomMatPaginatorIntl
}
]
})
export class MateriaModule {}
然後在i18n資料夾下面新增
//assets/i18n/cn.json
"items_per_page": "笔数",
"next_page": "下一页",
"previous_page": "上一页",
"of_label": "of",
...
//assets/i18n/tw.json
"items_per_page": "筆數",
"next_page": "下一頁",
"previous_page": "上一頁",
"of_label": "of",
...
之後會在SearchModule
中詳細說明。