typescript 将带有mat-expansion-panel的组件添加到mat-accordian

4jb9z9bj 于 2023-05-08 发布在 TypeScript

关注(0)|答案(1)|浏览(93)

我有一个mat-expansion-component的组件，我想把这个组件放在mat-accordian中。这是一种除了造型之外的工作。

<mat-accordion>
    <app-panel1></app-panel1>
    <app-panel2></app-panel2>
</mat-accordion>

app-panel.html panel1和panel2具有相同的格式。

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
        <mat-panel-title>
            Title
        </mat-panel-title>
        <mat-panel-description>
            Description
        </mat-panel-description>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
        Content
    </ng-template>
</mat-expansion-panel>

正在发生的事情：

我想要的：

taken from the angular material docs

typescript

来源：https://stackoverflow.com/questions/76162864/adding-a-component-with-mat-expansion-panel-to-mat-accordian

1条答案

按热度按时间

uurv41yg1#

您的问题来自：

.mat-accordion .mat-expansion-panel:last-of-type {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.mat-accordion .mat-expansion-panel:first-of-type {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

既然它是这样显示的，它就在申请开始和结束

<app-panel1>
    <mat-expansion-panel></mat-expansion-panel>
</app-panel1>

所以你可以在你的组件中覆盖，这个属性不被应用。例如app-panel1.component.scss

:host{
  .mat-expansion-panel:last-of-type {
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }
}

赞(0）回复(0）举报 2023-05-08

我来回答

typescript 将带有mat-expansion-panel的组件添加到mat-accordian

1条答案

相关问题

热门标签

最新问答