const Segments: React.FC = () => { const [selected, setSelected] = useState<string | undefined>('message'); return ( <> <IonPage> <IonContent> <IonSegment value={selected} onIonChange={(event)=> setSelected(event.detail.value)}> <IonSegmentButton value="message"> <IonLabel>Message</IonLabel> </IonSegmentButton> <IonSegmentButton value="favourite"> <IonLabel>Favourite</IonLabel> </IonSegmentButton> <IonSegmentButton value="calls"> <IonLabel>Calls</IonLabel> </IonSegmentButton> </IonSegment> {/* segment content starts here */} <div className='segmentsContent'> {(selected === 'message') && ( <div className='segmentTab'> <h1>Tab 1</h1> </div> )} {(selected === 'favourite') && ( <div className='segmentTab'> <h1>Tab2</h1> </div> )} {(selected === 'calls') && ( <div className='segmentTab'> <h1>Tab3</h1> </div> )} </div> </IonContent> </IonPage> </> ); }; export default Segments;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter