Ionic React Segment Example working
Wed Nov 16 2022 11:25:43 GMT+0000 (Coordinated Universal Time)
Saved by
@Martinluther
#undefined
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;
content_copyCOPY
Ion-react segment example used in Track Itinerary ionic app
Comments