Luonnos
Clickable
Komponentti, joka muodostaa koko elementin laajuisen klikattavan alueen.
Julkaistu versiossa 17.0.0
Esikatselu
Käyttötarkoitus
Käytä Clickable-komponenttia, kun haluat tehdä elementistä klikattavan sen koko alueelta.
Komponentti itsessään ei renderöi mitään näkyvää, vaan se palauttaa tarvittavat CSS-luokat ja attribuutit, jotka tekevät elementistä klikattavan, sekä huolehtivat hover- ja focus-tilojen näyttämisestä.
Clickable-komponenttia käytetään tyypillisesti Card-komponentin tai Korttimaiset esitystavat -suunnittelumallin yhteydessä.
Varsinainen kortti tai muu klikattavaksi muutettava elementti toteutetaan render-funktion sisään muilla komponenteilla.
Ensisijaisena toimintona, linkkinä tai painikkeena voi käyttää seuraavia komponentteja:
Tee näin
- Käytä kortissa pääsääntöisesti vain yhtä toimintoa (linkki, painike, valintaruutu).
- Varmista tarpeeksi suuri klikkausalue, jos kortti sisältää toissijaisia toimintoja.
Älä tee näin
- Älä käytä useampaa samaa asiaa tekevää toimintoa (esimerkiksi samalle sivulle johtavaa linkkiä).
- Älä käytä, jos tekstin valinta kortin sisältä on tärkeää.
Saavutettavuus
Komponentti huomioi saavutettavuuden seuraavasti:
- Korttia voi klikata koko kortin kokoiselta alueelta.
- Ruudunlukija lukee kuitenkin vain kortin linkin tai painikkeen teksti, eikä koko kortin sisältöä.
- Muihin kortin tekstielementteihin pääsee ruudunlukijalla normaaliin tapaan, esimerkiksi nuolinäppäimillä.
Esimerkit
Lisää esimerkkejä löydät Korttimaiset esitystavat -suunnittelumallista.
Komponentin render-propin palauttamat funktiot
Render-funktion parametreina tulevat getProps-, getActionProps- ja getSecondaryActionProps-funktiot palauttavat kortin elementeille vaadittavat CSS-luokat ja muut tarpeelliset attribuutit, jotka tekevät kortista klikattavan.
Funktiot yhdistävät niille annetut propit ja suorittavat useammat tapahtumakäsittelijät (esim. onClick) järjestyksessä.
Tämä mahdollistaa uusien ominaisuuksien lisäämisen myöhemmin ilman, että attribuutit ylikirjoittuvat. Vaatimuksena on, että attribuutit annetaan funktioille, eikä suoraan komponentille.
| Funktio | Kuvaus |
|---|---|
getProps | Elementille asetettavat attribuutit (esim. kortti). |
getActionProps | Ensisijaiselle toimintoelementille (linkki, painike, valintaruutu) asetettavat attribuutit. |
getSecondaryActionProps | Toissijaisille toiminnoille asetettavat attribuutit. |
Huomioitavaa selaintuessa
- Komponentti käyttää :has() CSS-selektoria kohdistusindikaattorin poistamiseen kortilta, jos elementin sisällä on muita klikattavia kohteita. Lue lisää: has()(Avautuu uuteen välilehteen)