html - 样式化 Angular 材质分页器
问题描述
我有一个 Angular Material Paginator 看起来像
我想设计它,它应该看起来像
我很难为它设计样式。我只能移动分页器中的元素(开始和结束位置),除此之外我无法修改任何东西。
请让我知道如何做所需的样式?
这是 stackblitz 链接https://stackblitz.com/edit/angular-tjhkpo
解决方案
使用这个 css(更多样式打开 F12 并覆盖材料声明):
::ng-deep .mat-paginator-page-size-select {
width: 27px!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
background-color: transparent;
}
::ng-deep .mat-select-value {
color: #005999;
font-weight: bold;
font-size: 15px;
}
::ng-deep .mat-select-arrow {
color: #005999;
}
::ng-deep .mat-option{
padding: 0!important;
}
::ng-deep .mat-option-text {
text-align: right;
}
对于字幕修改,您应该提供 MatPaginatorIntl。例子
推荐阅读
- html - iframe 调整为动态内容
- reactjs - 删除动态添加的表格行 - 反应js
- python - 在 Python 中将 CSV 数据转换为嵌套的 JSON
- android - 抛出 java.net.ProtocolException:流的意外结束
- html - 使用 html 和 css 将鼠标悬停在图标上时在右侧显示文本
- jquery - 如何在 MVC razor 视图中将表格元素复制到另一个?
- html - 在主块内垂直对齐两个块中间
- spring-boot - springboot2.0集成hikariCP2.7.9,抛出“默认事务隔离级别检测失败(代理警告-靠近“。”:语法错误)。”
- python - 在python中重叠滑动窗口
- java - Hashmap Json 保存和加载