Siirry pääsisältöön

ChoiceBox

Avaa ChatGPT:ssä
Shadow dwc-choicebox 23.05
Java API
Inheritance

This class is a List component, and inherits its features and behaviors. For an overview of List properties, events, and other important information, please refer to the List documentation.

ChoiceBox -komponentti on käyttöliittymäelementti, joka on suunniteltu esittämään käyttäjille lista vaihtoehdoista tai valinnoista. Käyttäjät voivat valita yhden vaihtoehdon tästä listasta, yleensä napsauttamalla ChoiceBox:ia, mikä laukaisee alasvetoluettelon, joka sisältää saatavilla olevat vaihtoehdot. Käyttäjät voivat myös käyttää nuolinäppäimiä vuorovaikutukseen ChoiceBox:in kanssa. Kun käyttäjä tekee valinnan, valittu vaihtoehto näytetään sitten ChoiceBox:in napissa.

Käytöt​

ChoiceBox -komponentteja käytetään monenlaisiin tarkoituksiin, kuten valikoiden valitseminen, kategorioista valitseminen tai vaihtoehtojen valinta ennalta määritellyistä joukoista. Ne tarjoavat käyttäjille organisoidun ja visuaalisesti miellyttävän tavan tehdä valintoja, erityisesti kun saatavilla on useita vaihtoehtoja. Yleisiä käytännöistä ovat:

  1. Käyttäjän vaihtoehtoihin valitseminen: ChoiceBox -komponentin ensisijainen tarkoitus on sallia käyttäjien valita yksi vaihtoehto listasta. Tämä on arvokasta sovelluksissa, joissa käyttäjien on tehtävä valintoja, kuten:

    • Valitseminen kategorialuettelosta
    • Valitseminen ennalta määritellyistä vaihtoehdoista

  2. Lomakekentät: Kun suunnitellaan lomakkeita, joissa käyttäjien on syötettävä tiettyjä vaihtoehtoja, ChoiceBox yksinkertaistaa valintaprosessia. Olipa kyseessä maan, osavaltion tai muun vaihtoehdon valitseminen ennalta määritellyistä luetteloista, ChoiceBox virtaviivaistaa syöttöprosessia.

  3. Suodatus ja lajittelu: ChoiceBox voidaan käyttää suodatus- ja lajittelutehtävissä sovelluksissa. Käyttäjät voivat valita suodatinperusteet tai lajittelupreferenssit luettelosta, helpottaen tietojen organisointia ja navigointia.

  4. Konfigurointi ja asetukset: Kun sovelluksessasi on asetuksia tai konfigurointivaihtoehtoja, ChoiceBox tarjoaa intuitiivisen tavan käyttäjille säätää mieltymyksiä. Käyttäjät voivat valita asetuksia luettelosta, mikä tekee sovelluksen mukauttamisesta helppoa.

vinkki

ChoiceBox on tarkoitettu käytettäväksi, kun ennaltamäärätty määrä vaihtoehtoja on saatavilla, eikä mukautettuja vaihtoehtoja tulisi sallia tai sisällyttää. Jos haluat sallia käyttäjien syöttävän mukautettuja arvoja, käytä sen sijaan ComboBox -komponenttia.

setDropdownType() -metodin käyttäminen määrittää arvon type -attribuutille ChoiceBox -komponentissa, ja vastaava arvo data-dropdown-for -attribuutille ChoiceBox:in alasvetolistalla. Tämä on hyödyllistä tyylittelyssä, sillä alasvetovalikko siirretään pois nykyisestä paikastaan DOM:ssa ja siirretään sivun kehon loppuosaan avattaessa.

Tämä irrotus luo tilanteen, jossa alasvetovalikon suora kohdistaminen CSS- tai shadow part -valitsimilla vanhempikomponentista on haastavaa, ellei käytetä alasvetotyyppi attribuuttia.

Demossa alla alasvetotyyppi on asetettu ja sitä käytetään CSS-tiedostossa alasvetovalikon valitsemiseksi ja taustavärin muuttamiseksi.

Näytä koodi

Maksimirivimäärä​

Oletuksena ChoiceBox -komponentin alasvetoluettelossa näytettävien rivien määrä lisääntyy vastaamaan sisältöä. Kuitenkin setMaxRowCount() -metodin käyttäminen mahdollistaa hallinnan siitä, kuinka monta kohdetta näytetään.

vinkki

Negatiivisen tai nollan arvon käyttäminen tämän ominaisuuden poistamiseen johtaa tämän ominaisuuden poistamiseen.

Näytä koodi

Avaaminen ja sulkeminen​

ChoiceBox -komponentin vaihtoehtojen näkyvyyttä voidaan ohjelmallisesti hallita open() ja close() -metodien avulla. Nämä metodit antavat sinun näyttää valintalistat tai piilottaa ne tarpeen mukaan, tarjoten suurempaa joustavuutta ChoiceBox -komponentin käytössä.

Lisäksi webforJ:llä on tapahtumakuuntelijoita, jotka aktivoituvat silloin, kun ChoiceBox suljetaan ja avataan, jolloin sinulla on enemmän hallintaa tiettyjen toimintojen laukaisemiseksi.

//Tavoita tai avaa seuraava komponentti lomakkeessa
ChoiceBox university = new ChoiceBox("Yliopisto");
ChoiceBox major = new ChoiceBox("Pääaine");
Button submit = new Button("Lähetä");

//... Lisää yliopistojen ja pääaineiden luettelo

university.onClose( e ->{
  major.focus();
});

major.onClose( e ->{
  submit.focus();
});

Avausmitat​

ChoiceBox -komponentilla on metodeja, joiden avulla voidaan manipuloida alasvetoluettelon mittoja. Maksimikorkeus ja minimileveys alasvetoluettelolle voidaan määrittää käyttämällä setOpenHeight() ja setOpenWidth() -metodeja.

vinkki

Mikä tahansa String-arvo, joka annetaan näiden metodien vaatimuksiin, sallii minkä tahansa voimassa olevan CSS-yksikön käytön, kuten pikselit, näkymämitat tai muut voimassa olevat säännöt. Jos annetaan int, niin annettu arvo asetetaan pikseleissä.

Etuliite ja suffiksi​

Slotit tarjoavat joustavia vaihtoehtoja ChoiceBox -komponentin kykyjen parantamiseksi. Voit käyttää kuvakkeita, etikettejä, lataussymboleita, tyhjentämis-/nollausominaisuuksia, avatar-/profiilikuvaa ja muita hyödyllisiä komponentteja ChoiceBox:in sisällä, jotta selvennät käyttäjille tarkoitettua merkitystä. ChoiceBox -komponentissa on kaksi slottia: prefix ja suffix. Käytä setPrefixComponent() ja setSuffixComponent() -metodeja eri komponenttien lisäämiseksi ennen ja jälkeen ChoiceBox:issa näytettävän vaihtoehdon.

ComboBox choiceBox = new ChoiceBox());
  choiceBox.setPrefixComponent(TablerIcon.create("box"));
  choiceBox.setSuffixComponent(TablerIcon.create("box"));

Tyylittely​

Loading...

Parhaat käytännöt​

Jotta ChoiceBox -komponentin käyttö olisi optimaalinen käyttäjäkokemus, harkitse seuraavia parhaita käytäntöjä:

  1. Selkeät ja rajatut vaihtoehdot: Pidä vaihtoehtoluettelo mahdollisimman tiiviinä ja merkityksellisenä käyttäjän tehtävään. ChoiceBox on ihanteellinen selkeän vaihtoehtoluettelon esittämiseen.

  2. Käyttäjäystävälliset etiketit: Varmista, että kunkin vaihtoehdon näytettävät etiketit ovat käyttäjäystävällisiä ja itse selittäviä. Varmista, että käyttäjät ymmärtävät helposti jokaisen valinnan tarkoituksen.

  3. Oletusvalinta: Aseta oletusvalinta, kun ChoiceBox -komponentti näkyy ensimmäistä kertaa. Tämä varmistaa, että ennakkoon valittu vaihtoehto on olemassa, vähentäen tarvittavien vuorovaikutusten määrää valinnan tekemiseksi.

  4. ChoiceBox vs. muut listakomponentit: ChoiceBox on paras vaihtoehto, jos sinun on rajoitettava käyttäjän syöttö yhdelle valinnalle ennalta määrätyistä vaihtoehdoista. Toinen listakomponentti voi olla parempi, jos tarvitset seuraavia toimintoja:

    • Usean valinnan ja kaikkien kohteiden näyttäminen kerralla: ListBox
    • Mukautetun syötön salliminen: ComboBox