IonGrid, IonRow and IonSegment error

Hello Ionic React Community,

I am trying to integrate an IonGrid into an IonSegment, however, i fail.
I want to have the following:

<IonSegment onIonChange={(e) => e.detail.value}>
<IonGrid>
<IonRow>
<IonSegmentButton value="Seg1">
<IonLabel>Seg1</IonLabel>
</IonSegmentButton>
</IonRow>
<IonRow>
<IonSegmentButton value="Seg2">
<IonLabel>Seg2</IonLabel>
</IonSegmentButton>
</IonRow>
</IonGrid>
</IonSegment>

It seems the IonGrid wrapped by the Segment destroys the functionality
and no segment can be permanently selected anymore.

Do you have any ideas how to fix that so that a segment is still
highlighted?

I already tried to use
const [seg, setSeg] = useState('');
<IonSegment value={seg} onIonChange={(e) => setSeg(e.detail.value!)}>
Do not work either.

Also I wanted to know if someone can give a simple example
of how to change the content of the page depending on the segment
selected with ionic react.

Thanks for your help in advance.

Best regards
Chris

I would guess IonSegmentButtons should be directly children of the IonSegment.

An IonSegment is designed to be a horizontal group of buttons. like the iOS Segmented Controls.

Seems like you’re trying to create a vertical group instead?

1 Like

Right, the problem is, that I want to have 7 SegmentButtons in the Segment Element .
So sometimes it looks and feels right:

But Than if i click around the following happens:


Also it looks like this from the beginning if i deploy it on my device
(First version is in browser).

I have no idea why and how to fix it. Do you have any ideas?

To select between 7 different options I would use an IonPicker instead, but that’s a different UI of course.

Not sure if it’s worth trying to use IonSegment in a way it’s probably not designed for. If you have multiple rows, how is the animation supposed to work when you select a button? If you really want to create your own layout it may be easier to write your own custom component.

Well, the picker might seem like an option.
But than as you say, the whole User Experience would suffer I guess.

I had just hoped that there is an easy solution to my problem but than
it is really not that simple.

Thanks for your help!