Siirry pääsisältöön

CheckBox

Avaa ChatGPT:ssä
Varjo dwc-checkbox 23.01
Java API

CheckBox voi olla valittuna tai poistettuna, ja se näyttää nykyisen tilansa rastin muodossa. Valintaruudut toimivat hyvin yksittäisten asetusten kytkemisessä tai käyttäjien valitessa useita vaihtoehtoja joukosta.

Käytöt​

CheckBox on parasta käyttää tilanteissa, joissa käyttäjien on tehtävä useita valintoja vaihtoehtoluettelosta. Tässä on joitakin esimerkkejä siitä, milloin CheckBox-komponenttia kannattaa käyttää:

  1. Tehtävän tai ominaisuuden valinta: Valintaruutuja käytetään yleisesti, kun käyttäjien on valittava useita tehtäviä tai ominaisuuksia tiettyjen toimien tai asetusten suorittamiseksi.

  2. Asetusten määrittäminen: Sovelluksissa, jotka sisältävät asetusten tai mieltymysten paneeleja, käytetään usein valintaruuduilta, jotta käyttäjät voivat valita useita vaihtoehtoja joukosta. Tämä on parasta vaihtoehdoille, jotka eivät sulje toisiaan pois. Esimerkiksi:

  • Ilmoitusten kytkeminen päälle tai pois päältä
  • Tumma tai vaalea teema
  • Sähköposti-ilmoitusasetusten valinta

  1. Suodatus tai lajittelu: CheckBox-komponenttia voidaan käyttää sovelluksissa, joissa käyttäjien on valittava useita suodattimia tai kategorioita, kuten hakutulosten suodattaminen tai useiden kohteiden valinta jatotoimia varten.

  2. Lomakekentät: Valintaruutuja käytetään yleisesti lomakkeissa, jotta käyttäjät voivat valita useita vaihtoehtoja tai tehdä binaarisia valintoja. Esimerkiksi:

    • Tilaa uutiskirje
    • Hyväksy käyttöehdot
    • Valitse ostettavat tai varattavat kohteet

Teksti ja sijoittelu​

Valintaruudut voivat hyödyntää setText(String text)-metodia, joka sijoitetaan valintaruudun vierelle sisäänrakennetun Sijoitus-säännön mukaisesti.

Valintaruuduilla on sisäänrakennettu toiminto tekstin asettamiseksi, joka näytetään joko oikealla tai vasemmalla puolella ruutua. Oletuksena teksti näytetään komponentin oikealla puolella. Tekstin sijoittamista tuetaan käyttämällä Position-enumia. Alla on kaksi asetusta:

Näytä koodi


Epävarmuus​

CheckBox-komponentti tukee epävarmuutta, joka on käyttöliittymämalli, jota käytetään yleisesti lomakkeissa ja luetteloissa osoittamaan, että ryhmässä valintaruudut on sekoitettu valittuja ja valitsemattomia tiloja. Tämä tila esitetään kolmannella visuaalisella tilalla, joka tyypillisesti näytetään täytettynä neliönä tai viivana valintaruudussa. Epävarmuudella on joitakin yleisiä käyttötapauksia:

  • Useiden kohtien valitseminen: Epävarmuus on hyödyllinen, kun käyttäjien on valittava useita kohtia luettelosta tai vaihtoehtojoukosta. Se antaa käyttäjille mahdollisuuden osoittaa, että he haluavat valita joitakin, mutta ei kaikkia saatavilla olevia vaihtoehtoja.

  • Hierarkkinen data: Epävarmuutta voidaan käyttää tilanteissa, joissa on hierarkkinen suhde valintaruudun välillä. Esimerkiksi, kun valitaan kategorioita ja alakategorioita, epävarmuus voi edustaa sitä, että jotkut alakategoriat on valittu, kun taas toisia ei ole, ja vanhempi komponentti on epävarmassa tilassa.

Näytä koodi

Tyylitteleminen​

Laajuudet​

Seuraavat Laajuudet-arvot sallivat nopean tyylittelyn ilman CSS:n käyttöä. Laajuudet tukevat Expanse-enum-luokan käyttöä. Alla ovat laajuudet, joita tuetaan valintaruudukkomponentille:

Näytä koodi


Loading...

Parhaat käytännöt​

Jotta voit varmistaa optimaalisen käyttäjäkokemuksen Checkbox-komponentin käytössä, harkitse seuraavia parhaita käytäntöjä:

  1. Selkeät vaihtoehtojen merkit: Tarjoa selkeät ja ytimekkäät merkit kullekin CheckBox-vaihtoehdolle, jotta valinta kuvataan tarkasti. Merkit tulisi olla helppo ymmärtää ja erottua toisistaan.

  2. Ryhmittele valintaruudut: Ryhmittele samankaltaiset valintaruudut yhteen osoittamaan niiden yhteys. Tämä auttaa käyttäjiä ymmärtämään, että useita vaihtoehtoja voidaan valita tietyssä ryhmässä.

  3. Tarjoa oletusvalinta: Jos mahdollista, harkitse oletusvalinnan tarjoamista valintaruuduille ohjaamaan käyttäjiä, kun he kohtaavat vaihtoehdot ensimmäistä kertaa. Oletusvalinnan tulee olla linjassa yleisimmän tai mieluisimman valinnan kanssa.

  4. Epävarmuus: Jos vanhempi CheckBox-komponentti sisältää useita siihen kuuluvia komponentteja siten, että osia voidaan valita päälle ja toisia pois, käytä epävarmaa ominaisuutta osoittamaan, että kaikki CheckBox-komponentit eivät ole valittuja tai poissa valinnasta.