Как построить круглый сегмент в Angular / Ionic?

Question

Я пытаюсь построить круглый сегмент, используя <ion-segment> и <ion-segment-button> компоненты. Я нашел такой же вопрос здесь, в стеке, но он не был таким полезным, и я не нашел способа достичь этого.

Это то, что я пробовал с компонентом сегмента:

<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 и добавьте его к нажатой кнопке)

Как и в этом вопросе, это конечный результат, который я хотел бы получить.

Answer 1

Создание кругов - это CSS, радиус границы в два раза больше, а высота делает круг. Вы можете использовать после, чтобы сделать круг, который плавает с элементом. Просто выберите элемент в ионном 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>

Если вы опубликуете, что такое DOM вывода Ionic, я могу помочь вам применить его там. Или даже лучше сделать рабочий StackBlitz из шаблона Ionic https://stackblitz.com/fork/ionic, и я могу добавить туда CSS для вас.