如何在Ionic中为选中的Segment添加下划线？

没问题，要实现选中Segment按钮时显示下划线的效果，咱们可以借助Ionic自带的选中状态类来完成，结合你现有的代码，只需要调整SCSS部分就可以啦～

你的原有HTML代码（无需修改） #

<ion-segment value="All">
  <ion-segment-button value="All" class="mysegment">
    <ion-label>All</ion-label>
  </ion-segment-button>
  <ion-segment-button value="Favorite" class="mysegment">
    <ion-label>Favorite</ion-label>
  </ion-segment-button>
</ion-segment>

修改后的SCSS代码 #

.mysegment {
  color: white;
  /* 默认状态下确保没有下划线，避免样式冲突 */
  text-decoration: none;
}

/* 给选中的Segment按钮添加下划线 */
.mysegment.ion-checked {
  /* 基础下划线样式 */
  text-decoration: underline;
  
  /* 如果你想要更个性化的下划线，比如加粗、调整颜色，可以用下面的写法替换上面的text-decoration */
  /* text-decoration: underline 2px white; */
  
  /* 或者用border-bottom实现更灵活的样式，比如控制下划线的间距 */
  /* border-bottom: 2px solid white; */
  /* padding-bottom: 2px; */
}

原理说明 #

Ionic的ion-segment-button组件在被选中时，会自动给元素添加ion-checked这个内置类。我们只需要针对带有这个类的.mysegment元素设置下划线样式，就能实现选中时显示下划线的效果啦。

你可以根据自己的需求选择用text-decoration或者border-bottom来实现下划线，后者能更灵活地调整下划线的粗细、颜色和与文字的间距。

内容的提问来源于stack exchange，提问作者Margherita Garello