css 如何在Angular Material选项卡中设置自定义圆角下划线的样式

bvjxkvbb 于 2024-01-09 发布在 Angular

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

我们的设计师希望我们实现下划线，看起来像这样：

的数据
它本质上是一个圆角矩形的上半部分。然而，我们使用的是Angular Material，我没有任何运气来设计现有组件（https://material.angular.io/components/tabs/examples）。
我可以通过将这些设置为变量来使默认下划线变厚，并带有圆角：
第一个月
--mdc-tab-indicator-active-indicator-shape: 10px;个
这是我目前拥有的：

的
我甚至不知道如何搜索我在这里要做的事情。在我跳过使用材质组件并自己构建一些东西之前，任何提示都很感激。

css

来源：https://stackoverflow.com/questions/77761925/how-to-style-a-custom-rounded-underline-in-a-angular-material-tab

1条答案

按热度按时间

6vl6ewon1#

@Thuan提到，下面是用CSS做的，有一个工作示例！

.mdc-tab-indicator .mdc-tab-indicator__content {
  color: #a31b56 !important;
  border-color: #a31b56 !important;
  border-top-width: 7px !important;
  border-top-right-radius: 5px !important;
  border-top-left-radius: 5px !important;
}

字符串
stackblitz

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何在Angular Material选项卡中设置自定义圆角下划线的样式

1条答案

相关问题

热门标签

最新问答