ReorderableList (Järjestettävä lista)
Järjestettävä lista on komponentti, jonka avulla käyttäjä voi järjestää listan elementtejä haluamaansa järjestykseen. Järjestettävää listaa käytetään tilanteissa, joissa on tarve määritellä kohteiden tärkeysjärjestys tai järjestys näkymässä.
Henkilöt joita asia koskee
- Matti Meikäläinen
Matin tiedot
- Maija Meikäläinen
Maijan tiedot
- Eero Esimerkki
Eeron tiedot
Saavutettavuus ja käytettävyys
- Järjestettävän listan elementtien tulee olla selkeästi tunnistettavissa ja yksiselitteisiä. Kullakin elementillä tulee olla selkeä otsikko tai muu tunnistetieto.
- Mikäli listan elementissä on paljon sisältöä, voidaan järjestelymoodissa näyttää vaihtoehtoinen, lyhyempi sisältö hahmottamisen ja liikuttelun helpottamiseksi. Tästäkin sisällöstä elementtien täytyy olla helposti tunnistettavissa.
- Listakomponentille täytyy antaa selkeät ruudunlukijaviestit eri toimenpiteille ja ominaisuuksille. Tähän käytetään 'announcements' proppia.
Mistä komponentti koostuu
Järjestettävä lista koostuu painikkeesta, jolla voidaan asettaa lista uudelleenjärjestelytilaan, sekä listalla olevista elementeistä, joita voidaan siirtää ylös- tai alaspäin listan ollessa uudelleenjärjestelytilassa.
Listan ollessa uudelleenjärjestelytilassa näkyvissä ovat painikkeet järjestyksen tallentamiselle, sekä uudelleenjärjestyksen peruuttamiselle. Käyttäjän peruuttaessa toiminnon listan elementit palautuvat alkuperäiseen järjestykseen.
Listan elementit sisältävät niille asetetun sisällön lisäksi myös nuolipainikkeet, joista käyttäjä voi siirtää elementtiä ylös- tai alaspäin listalla. Listan alkiot voidaan järjestää myös raahaamalla niitä hiirellä tai kosketusnäytöllä.
Vaihtoehtoisesti voidaan asettaa näkyviksi myös "siirrä listan alkuun" ja "siirrä listan loppuun" -painikkeet, jolloin käyttäjä voi siirtää elementin listan alkuun tai loppuun yhdellä painalluksella.
Koko ja käyttö
Järjestettävää listaa voidaan käyttää käyttöliittymässä tilanteissa, joissa käyttäjälle halutaan antaa mahdollisuus määritellä listan elementtien järjestys. Se sijaitsee sivun pääsisällön joukossa.
Mobiilinäkymissä käytetään pienille ruutuukooille tehtyä varianttia (smallScreen). Tällöin järjestelypainikkeet sijoitetaan listan alkioiden ylälaitaan, jotta ne eivät vie tilaa listan varsinaiselta sisällöltä. Painikkeiden sijainnin voi vaihtaa myös käyttämällä "moveButtonsPlacement" proppia.
Mikäli listan elementeillä on paljon sisältöä, niille voidaan antaa järjestelymoodissa näytettävä vaihtoehtoinen, lyhyempi sisältö. Tällöin liikuttelu ja listan järjestyksen hahmottaminen helpottuu.