angular-material 相关问题

Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。

如何为 Angular Material Timepicker 显示秒数

我正在使用 Angular Material Timepicker，但它只显示小时和分钟。我也想显示秒。 https://material.angular.io/components/timepicker/overview 可以吗？

angular angular-material angular-cdk

回答 1 投票 0

如何合并matDatepicker和父表单的验证错误

我目前正在使用角度材料库中的日期选择器构建自定义月份选择器组件。月份选择器应该能够与这样的反应形式一起使用。应用程序组件.ts 形式...

angular angular-material controlvalueaccessor

回答 1 投票 0

如何将 id（如索引值）放在 tr 上

我需要在我的 tr 中放置一个代表该行数的 id 我把这段代码 ...

angular angular-material angular-material-table

回答 1 投票 0

在 mat-paginator 中 pageSizeOptions 不起作用

我正在使用 Angular Material 开发 Angular 项目。我正在尝试在表视图中显示数据，使用分页，因为很多数据。问题是分页的 pageSizeOptions 选项不可用...

angular angular-material angular-ui-router angular-material2 angular-material-6

回答 3 投票 0

Material Angular 扩展面板示例不起作用

我对 Material Angular 很陌生，我正在尝试向我的项目添加一些组件。现在我正在尝试将扩展面板组件示例添加到对话框中，但该组件不...

html angular typescript angular-material

回答 3 投票 0

Angular 材料表上的列过滤器

有人知道是否可以在角度材料表上添加列过滤器（如附图所示）？我已经搜索过官方文档，但没有找到任何有用的东西。谢谢

angular typescript angular-material

回答 1 投票 0

Angular 19 中使用 lighten() 的 Material 自定义主题的弃用警告

我最近将 Angular 应用程序更新到版本 19，并且还更新了 Angular Material。更新后，我遇到了 theme.scss 中定义的自定义主题的弃用警告。该警告是相关的...

angular sass material-ui angular-material angular-material-18

回答 2 投票 0

Angular：Material Datepicker：月视图中的日期范围选择

我正在使用 Angular/Material 版本 19（独立）。当我想在月视图中显示日历时，这是我的模板代码：我正在使用 Angular/Material 版本 19（独立）。当我想在月视图中显示日历时，这是我的模板代码： <mat-calendar #calendar [(selected)]="selected" [dateClass]="dateClass" (selectedChange)="onDateSelected($event)"> </mat-calendar> 一切都工作正常。当我想显示日期范围选择的日历时，这是模板代码： <mat-form-field> <mat-label>Select a date range</mat-label> <mat-date-range-input [formGroup]="range" [rangePicker]="picker"> <input matStartDate formControlName="start" placeholder="Start date" readonly /> <input matEndDate formControlName="end" placeholder="End date" readonly /> </mat-date-range-input> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-date-range-picker #picker></mat-date-range-picker> </mat-form-field> 一切都工作得很好。但现在，我需要将它们组合起来 - 我需要在月视图中显示日历，但让用户选择日期范围而不仅仅是单个特定日期。我具体该怎么做？如果可以的话，当然可以。我们可以结合 Angular 材料 - datepicker 中的两个示例。 Datepicker emulating a Year and month picker 和 Basic date range picker。我们可以合并它们，所以你需要provideMomentDateAdapter来显示MM/YYYY格式。此外，我们在 HTML 中有 startView，这对 year 非常有用，但对 month 不起作用，这可能是一个错误，您可以提出 github 问题来验证。 HTML： <mat-form-field> <mat-label>Enter a date range</mat-label> <mat-date-range-input [formGroup]="range" [rangePicker]="picker"> <input matStartDate formControlName="start" placeholder="Start date" /> <input matEndDate formControlName="end" placeholder="End date" /> </mat-date-range-input> <mat-hint>MM/YYYY – MM/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-date-range-picker startView="multi-year" #picker></mat-date-range-picker> @if (range.controls.start.hasError('matStartDateInvalid')) { <mat-error>Invalid start date</mat-error> } @if (range.controls.end.hasError('matEndDateInvalid')) { <mat-error>Invalid end date</mat-error> } </mat-form-field> <p>Selected range: {{range.value | json}}</p> TS： import { JsonPipe } from '@angular/common'; import { ChangeDetectionStrategy, Component } from '@angular/core'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, } from '@angular/forms'; import { provideNativeDateAdapter } from '@angular/material/core'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatFormFieldModule } from '@angular/material/form-field'; import * as _moment from 'moment'; // tslint:disable-next-line:no-duplicate-imports import { default as _rollupMoment, Moment } from 'moment'; import { MatInputModule } from '@angular/material/input'; import { provideMomentDateAdapter } from '@angular/material-moment-adapter'; const moment = _rollupMoment || _moment; // See the Moment.js docs for the meaning of these formats: // https://momentjs.com/docs/#/displaying/format/ export const MY_FORMATS = { parse: { dateInput: 'MM/YYYY', }, display: { dateInput: 'MM/YYYY', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', }, }; /** @title Date range picker forms integration */ @Component({ selector: 'date-range-picker-forms-example', templateUrl: 'date-range-picker-forms-example.html', providers: [ // Moment can be provided globally to your app by adding `provideMomentDateAdapter` // to your app config. We provide it at the component level here, due to limitations // of our example generation script. provideMomentDateAdapter(MY_FORMATS), ], imports: [ MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule, JsonPipe, ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DateRangePickerFormsExample { readonly range = new FormGroup({ start: new FormControl<Date | null>(null), end: new FormControl<Date | null>(null), }); } Stackblitz 演示

angular angular-material datepicker angular-material-datetimepicker materialdatepicker

回答 1 投票 0

配置角度材质输入的高度

我需要将角度材质输入的高度修改为最小值。这是因为我需要在一个小盒子（500px，位于屏幕底部）中插入许多输入，但我...

angularjs angular-material

回答 1 投票 0

如何主题化角度材质组件形状？

有什么方法可以用角度材料来主题组件形状吗？我知道材料设计有一个形状概念，可以让您为所有小型/中型产品创建更圆润、更圆润甚至切角的...

angular-material material-design angular-material-6 angular-material-5 angular-material-7

回答 2 投票 0

我们可以使用Mat-card 和Anchor Tag 吗？

我想让垫卡可点击，当我将鼠标悬停在垫卡上时，我想显示链接光标。有很多卡片，当我点击其中一张卡片时我想要导航到另一页。嗬...