( ) => { const [ travelTime , setTravelTime ] = React . useState ( 'na' ) ; return ( < SegmentedControl label = " Velg reisetidspunkt " value = { travelTime } onChange = { setTravelTime } > < SegmentedControl.Item value = " na " > Nå </ SegmentedControl.Item > < SegmentedControl.Item value = " avreise " > Avreise </ SegmentedControl.Item > < SegmentedControl.Item value = " ankomst " > Ankomst </ SegmentedControl.Item > </ SegmentedControl > ) ; }
Oversikt Kode Tilgjengelighet
SegmentedControl grupperer to eller flere nært beslektede alternativer og lar brukeren velge nøyaktig ett av dem. Passer godt til filtrering av innhold og veksling mellom visninger/innstillinger — for eksempel valg som påvirker nærliggende innhold (som «Avreise» vs. «Ankomst»). du trenger navigasjon mellom paneler eller sider, bruk heller Tabs det er et skjema med innsending, bruk heller RadioGroup Plassering: plasser komponenten nær innholdet den styrer. Bruk aria-controls hvis den styrer innhold lenger nede på siden. Antall og bredde: hold antall valg lavt (maks 5). Sørg for at alle valg er synlige på skjermen. Hold tekstene korte og konsistente. Ikoner: kun ikoner kan brukes for erfarne brukere. Gi alltid en skjermleser-tekst med aria-label når innholdet ikke er selvforklarende. Label: bruk label for å beskrive hva valget styrer, slik at det blir lettere for brukeren å forstå der det er nødvendig. Anbefalingene er inspirert av bruksmønstre i ToggleGroup i Aksel og Designsystemet .
( ) => { const [ type , setType ] = React . useState ( 'avreise' ) ; const [ dateTime , setDateTime ] = React . useState ( now ( 'Europe/Oslo' ) ) ; return ( < > < SegmentedControl label = " Velg reisetidspunkt " value = { type } onChange = { setType } > < SegmentedControl.Item value = " nå " > Nå </ SegmentedControl.Item > < SegmentedControl.Item value = " avreise " > Avreise </ SegmentedControl.Item > < SegmentedControl.Item value = " ankomst " > Ankomst </ SegmentedControl.Item > </ SegmentedControl > { type !== 'nå' && ( < div style = { { display : 'flex' , gap : '1rem' } } > < DatePicker label = { type === 'avreise' ? 'Avreisedato' : 'Ankomstdato' } selectedDate = { dateTime } onChange = { date => setDateTime ( date ) } /> < TimePicker label = " Tidspunkt " selectedTime = { dateTime } onChange = { time => setDateTime ( time ) } /> </ div > ) } </ > ) ; }
( ) => ( < SegmentedControl label = " Visning " defaultValue = " liste " > < SegmentedControl.Item value = " liste " > Liste </ SegmentedControl.Item > < SegmentedControl.Item value = " graf " > Graf </ SegmentedControl.Item > < SegmentedControl.Item value = " tabell " > Tabell </ SegmentedControl.Item > </ SegmentedControl > )
( ) => ( < SegmentedControl label = " Tekstjustering " defaultValue = " left " > < Tooltip content = " Venstrejuster " > < SegmentedControl.Item value = " left " aria-label = " Venstrejuster " > < AlignLeftIcon aria-hidden /> </ SegmentedControl.Item > </ Tooltip > < Tooltip content = " Midtstill " > < SegmentedControl.Item value = " center " aria-label = " Midtstill " > < AlignCenterIcon aria-hidden /> </ SegmentedControl.Item > </ Tooltip > < Tooltip content = " Høyrejuster " > < SegmentedControl.Item value = " right " aria-label = " Høyrejuster " > < AlignRightIcon aria-hidden /> </ SegmentedControl.Item > </ Tooltip > </ SegmentedControl > )