如何将凸起的按钮定义到材质扩展面板中？答案

【问题标题】：How to define raised buttons into Material ExpansionPanel?如何将凸起的按钮定义到材质扩展面板中？
【发布时间】：2020-01-08 14:58:09
【问题描述】：

如何定义Material ExpansionPanel中的Save和Cancel按钮？

我正在寻找类似 Material Button 的行为：

我没有找到应用这种行为的 mixin。

【问题讨论】：

【解决方案1】：

对不起，我把它作为一个单独的答案，因为你不能真正将代码放在注释中，但这只是对第一个答案的澄清。

除非您希望应用中的所有材质扩展面板都具有凸起的按钮，否则您不需要第一个 ::ng-deep。

这应该可行：

@import 'package:angular_components/material_button/mixins';

material-expansionpanel{
  @include raised-button('material-button')
}

此外，任何只能在 CSS 中完成的事情，我们都会尝试保持这种方式，因为转发输入会增加额外的不必要的代码权重。我什至喜欢从按钮中删除它不需要的凸起输入，这只会导致额外的代码大小，但现在更改它并不值得，因为我们有很多代码依赖它。

【讨论】：

它有效，谢谢。只是对“转发输入”的澄清：我们应该使用 CSS 而不是 mixins？
对不起，我不明白 mixins 到底是 CSS。如果您问是否应该使用 ::ng-deep 来设置通用组件的样式？我会避免它，因为我们会保持 mixins 是最新的。
对不起。我没有在这个问题上说清楚。当您说“转发输入会增加额外的不需要的代码权重”时，这些额外的代码究竟会生成什么？使用 :: ng-deep，使用 raise 属性，还是使用 mixins？
在父级上放置一个@Input 以获取一个值以在子级上设置一个@Input 依此类推，在组件中添加飞镖代码，在生成的模板中，并生成更改检测所有这些都在运行时运行，这比投入更多的 CSS 更昂贵。

【解决方案2】：

@import 'package:angular_components/material_button/mixins';

::ng-deep material-expansionpanel{
  @include raised-button('material-button')
}

他们没有一直暴露raised 输入，因此您必须选择带有::ng-deep 的按钮。不过要小心，缩小选择器的范围，以确保您只定位您想要提升的按钮。

【讨论】：