小编Edr*_*ric的帖子

我有 2 个标签，我希望它们位于中间。Angular Material 提供了mat-align-tabs="center"根本不起作用的简单类。我在互联网上搜索找到了 md 的解决方案，这是旧版本的 Material。令人惊讶的是，没有人没有遇到同样的问题。

HTML：

<mat-tab-group [(selectedIndex)]="selectedTabIndex"  mat-align-tabs="center">
    <mat-tab id="Wyszuk" label="Wyszukiwanie" *ngIf="!leadOffer.isSent">
      <app-offer-search-candidates [offerId]="leadOffer.id" [leadId]="leadId" [offer]="leadOffer"
        [candidatesToVerification]="candidatesToVerificationDataSource.data" [awaitingCandidates]="awaitingCandidatesDataSource.data"
        (addCandidatesToVerification)="onAddCandidatesToVerification($event)" (addAwaitingCandidates)="onAddAwaitingCandidates($event)"
        (addCandidatesToCart)="onAddCandidatesToCart($event)" (searchSave)="onSearchSave($event)">
      </app-offer-search-candidates>
    </mat-tab>

    <mat-tab label="Koszyk ofertowy">
      <app-offer-cart [dataSource]="candidatesDataSource" [searchModel]="searchModel" [readOnly]="leadOffer.isSent"
        [attachmentsDataSource]="attachmentsDataSource" (refresh)="onRefreshCandidates()" (removeCandidates)="onRemoveCandidatesFromCart($event)"
        (sendOffer)="onSendOffer($event)" (removeAllCandidates)="onRemoveAllCandidates()" (removeCart)="onRemoveCart()"
        (generateOffer)="onGenerateOffer()" (attachmentsLoaded)="onAttachmentsLoaded($event)" (removeAttachments)="onRemoveAttachments($event)"
        (generateCvs)="onGenerateCvs($event)" (updateProjectRole)="onUpdateProjectRole($event)" (updateSuggestedPrice)="onUpdateSuggestedPrice($event)"
        (candidateCvLoaded)="onCandidateOfferCvLoaded($event)">
      </app-offer-cart>
    </mat-tab>
</mat-tab-group>

我想同时更改 Material 徽章的背景和文本颜色，而不是使用标准的 Material 颜色，我该怎么做？

<mat-icon matBadge="{{this.userService.numberOfCartItems}}" 
     matBadgePosition="above after" matBadgeColor="accent">
     shopping_cart
</mat-icon>

我正在尝试使用 Angular 的 mat-toolbar 创建导航栏。我用 mat-icon 添加了图标。当我尝试为它们添加标签时，文本与图标重叠。 工具栏 html 的屏幕：

<mat-toolbar color="warn">
    <mat-toolbar-row>
        <img src="/assets/img/logo.png" width="150">
        <span class="example-fill-remaining-space"></span>
        <button mat-icon-button>
            <mat-icon>home</mat-icon>
            <span>home</span>
        </button>

        <button mat-icon-button>
            <mat-icon>history</mat-icon>
            <span>home</span>
        </button>

        <span>
            <mat-menu #appMenu="matMenu">
                <span>language</span>
                <button mat-menu-item>ENGLISH</button>
                <button mat-menu-item>POLISH</button>
                <button mat-menu-item>ITALIAN</button>
            </mat-menu>
            <button mat-icon-button [matMenuTriggerFor]="appMenu">
                <mat-icon>language</mat-icon>
            </button>
        </span>
    </mat-toolbar-row>
</mat-toolbar>

CSS：

.example-fill-remaining-space {
    flex: 1 1 auto;
}

.mat-icon {
    font-size: 25px;
    height: auto !important;
}

.icon-text {
    display: flex;
}

有没有办法强制 Flutter Android 应用程序的行为就像在 iOS 设备上一样？

我指的不是库比蒂诺套餐。

这就是我所说的 Android/iOS 风格

iOS 风格：

安卓风格：

我正在尝试构建一个 Angular 侧边栏。目前，它具有切换效果，这意味着当我们单击它时，它会折叠。如果它被折叠，它就会扩展。现在我试图仅扩展悬停的项目。我需要一些帮助。

StackBlitz 演示

我正在尝试为我的应用程序使用适用于 Android 10 的暗模式主题支持。除了应用程序启动器图标之外，我可以在黑暗模式下使用所有其他东西。

作为参考，我使用以下链接

https://developer.android.com/guide/topics/ui/look-and-feel/darktheme

我知道没有提到根据 Day/Night 主题更改的 App Icon 更改。

只是为了确认，需要您的所有输入，是否可以根据主题从正常到黑暗的变化来更改应用程序图标，反之亦然。

提前致谢。

（工作演示在这里）

我制作了一个非常简单的组件，它显示一条 3 秒的消息，然后显示一条“完成”消息：

页脚.component.ts

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

  waiting = true;

  ngOnInit() {
    setTimeout(() => this.waiting = false, 3000);
  }

}

页脚.component.html

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

  waiting = true;

  ngOnInit() {
    setTimeout(() => this.waiting = false, 3000);
  }

}

当添加到带有app-footer.

但是，当使用 …

我试图让一个扩展面板只有在点击箭头时才展开，但是当我尝试编译它时，这个功能

private _isExpansionIndicator(target: EventTarget): boolean {
    const expansionIndicatorClass = 'mat-expansion-indicator';
    return (target.classList && target.classList.contains(expansionIndicatorClass) );
  } 

返回以下错误：

"Property 'classList' does not exist on type 'EventTarget'"

任何线索我如何克服这个错误，或者你知道任何其他解决方法来实现相同的功能吗？

我让它在 stackblitz 上工作，没有错误...... https://stackblitz.com/edit/basic-material-e6sh1r

我正在尝试将 Quill 编辑器与 Angular Material 集成，在此处实现自定义 MatFormFieldControl： https: //github.com/sermicromegas/learning-management-system/tree/master/frontend/src/app/shared/ui/quill-material

您可以在此处查看工作演示（请参阅“描述”字段）：https ://ser-learning-management-system.herokuapp.com/course/edit/5e2089a2c4fea300172bca3e

以下是创建自定义 MatFormFieldControl 的指南：https ://material.angular.io/guide/creating-a-custom-form-field-control

它有点有效，但不是应有的样子。例如（转到空表单：https://ser-learning-management-system.herokuapp.com/course/create）：

1. 如果点击标题字段，它仍然有效，在字段之外再次点击，它就失效了。但如果你点击Description，它就会立即失效
2. 在 quill-material.component.ts 的 writeValue() 方法中，我会避​​免执行类似this.editor.root.innerHTML = contents;将初始内容写入编辑器的操作，但我不知道该怎么做

有人可以帮助我改进 quill-material.component.ts 吗？如果你想尝试一下，请随意查看 fork 我的 github 代码。

非常感谢

我有一个mat-card内部组件模板：

<mat-card *ngFor="let p of products" (click)="viewProduct(p)">
    <mat-card-actions>
        <button mat-stroked-button (click)="addProductToCart(p)">Add to cart</button>
    </mat-card-actions>
</mat-card>

问题是，当单击按钮 angular 时，会同时调用addProductToCart和viewProduct。

我怎样才能防止这种情况？