按钮组的 Angular-material 恒定宽度

Question

我试图让按钮组的宽度保持不变，它不应该受到按钮数量的影响。我正在粘贴我的 stackblitz 链接和我想要的结果图像。

https://stackblitz.com/edit/angular-r9zyb9?file=styles.css

正如你在图片中看到的，按钮的宽度因为它的数量而改变，但按钮组的宽度是恒定的/相同的

Answer 1

您可以应用一些 CSS 来完成此操作，出于演示目的，我通过 HTML 中的内联样式应用了它，因此您可以看到它在做什么，但如果您愿意，也可以使用自定义类。

您首先设置组的宽度和边距...这里我设置视口(viewport)宽度的 80%。

<mat-button-toggle-group name="fontStyle" aria-label="Font Style" style="width:80vw; margin:1%">

然后将所有按钮的宽度设置为 100%，它会根据按钮数量平均容器的总宽度。

<mat-button-toggle value="bold" style="width:100%">Bold</mat-button-toggle>

堆栈 Blitz

https://stackblitz.com/edit/angular-r9zyb9-j6nu3j?embed=1&file=app/button-toggle-overview-example.html