I’m trying to build a round segment using <ion-segment> and <ion-segment-button> components.
I found the same question here on Stackoverflow but it wasn’t so useful and I didn’t find a way to achieve it.
This is what I tried with segment component:
<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>
And this is the result I got:
Apart from the alignment (due to the width of segment button, that exceeds the column) I’ve understand that probably these components don’t allow me to do it,
so I tried to build the same using buttons:
<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>`
Graphically it’s what I’m looking for, but since these are buttons, I don’t know how to implement the selector behaviour (when one button is pushed, change its CSS to make it selected, when another button is pushed, remove the CSS and add it to the pressed button)
Just like in this question, this is the final result I’d like to build.
