如何在 Angular/Ionic 中构建圆形段？

Question

我正在尝试使用<ion-segment> 和<ion-segment-button> 组件构建一个圆形段。 我在 Stack 上发现了同样的问题，但它不是那么有用，我也没有找到实现它的方法。

这是我对分段组件的尝试：

<ion-grid>
   <ion-row class="ion-align-items-center">
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g1']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g2']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g3']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g4']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g5']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g6']}}</ion-label>
     </ion-col>
   </ion-row>

   <ion-row class="ion-align-items-center">
     <ion-segment (ionChange)="segmentChanged($event)">
       <ion-col size="2">
         <ion-segment-button>
           <ion-label>{{date['d1']}}</ion-label>
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d2']}}
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d3']}}
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d4']}}
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d5']}}
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d6']}}
         </ion-segment-button>
       </ion-col>
     </ion-segment>
   </ion-row>
 </ion-grid>

这是我得到的结果：

除了对齐（由于段按钮的宽度，超出了列）我知道这些组件可能不允许我这样做， 所以我尝试使用按钮构建相同的：

<ion-grid>
   <ion-row class="ion-align-items-center">
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g1']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g2']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g3']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g4']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g5']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g6']}}</ion-label>
     </ion-col>
   </ion-row>

   <ion-row class="ion-align-items-center">
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d1']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d2']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d3']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d4']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d5']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d6']}}
       </ion-button>
     </ion-col>
   </ion-row>
 </ion-grid>`

图形上是我正在寻找的，但由于这些是按钮，我不知道如何实现选择器行为（按下一个按钮时，更改其 CSS 以使其选中，按下另一个按钮时，删除 CSS 并将其添加到按下的按钮）

就像在this 问题中一样，这是我想要构建的最终结果。

Answer 1

圆是关于 CSS 的，边框半径为 with 和 height 的一半组成一个圆。您可以使用 after 制作一个随元素浮动的圆圈。只需在 ionic DOM 中选择一个元素，并使用这样的类作为目标。

.selected {
  width: 30px;
  height: 30px;
  color: white;
  text-align: center;
  background-color: red;
  border-radius: 15px;
  padding-top: 5px;
  box-sizing: border-box;
}

.marked {
  width: 30px;
  height: 30px;
  text-align: center;
  padding-top: 5px;
  box-sizing: border-box;
}

.marked::after {
  content: ' ';
  position: relative;
  width: 6px;
  height: 6px;
  border-radius:3px;
  background-color: red;
  display: inline-block;
  left: -10px;
  top: 15px;
}

<div class="selected">10</div>

<div class="marked">10</div>

如果您发布 Ionic 输出的渲染 DOM，我可以帮助您将其应用到那里。或者甚至更好地使用 Ionic 模板 https://stackblitz.com/fork/ionic 制作一个有效的 StackBlitz，我可以在那里为您添加 CSS。