ChoiceBox

Avaa ChatGPT:ssä

Varjo dwc-choicebox 23.05

Java API

ChoiceBox-komponentti esittää avattavan valikon, josta käyttäjät voivat valita yhden vaihtoehdon. Kun valinta on tehty, valittu arvo näkyy napissa. Se on hyvä valinta, kun käyttäjien tarvitsee valita kiinteä joukko ennalta määriteltyjä vaihtoehtoja, ja nuolinäppäimiä voidaan käyttää luettelossa navigointiin.

Käytöt

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-komponentteja käytetään erilaisiin tarkoituksiin, kuten kohteiden valitsemiseen valikosta, luokkien valitsemiseen tai vaihtoehtojen valitsemiseen ennalta määritellyistä joukosta. Ne tarjoavat organisoidun ja visuaalisesti miellyttävän tavan käyttäjille tehdä valintoja, erityisesti kun vaihtoehtoja on useita. Yleisiä käyttötapoja ovat:

1. Käyttäjän valintojen tekeminen: ChoiceBox:n ensisijainen tarkoitus on sallia käyttäjien valita yksi vaihtoehto luettelosta. Tämä on arvokasta sovelluksissa, jotka vaativat käyttäjiä tekemään valintoja, kuten:

   • Valitseminen luokkien luettelosta
   • Vaihtoehtojen valitseminen ennalta määritellyistä joukoista

2. Lomakeinputit: Kun suunnitellaan lomakkeita, jotka vaativat käyttäjiltä tiettyjen vaihtoehtojen syöttämistä, ChoiceBox yksinkertaistaa valintaprosessia. Olipa kyseessä maan, osavaltion tai minkä tahansa muun vaihtoehdon valitseminen ennalta määritellystä luettelosta, ChoiceBox virtaviivaistaa syöttöprosessia.

3. Suodatus ja lajittelu: ChoiceBox-komponenttia voidaan käyttää suodatus- ja lajittelutehtävissä sovelluksissa. Käyttäjät voivat valita suodatuskriteerejä tai lajitteluvaihtoehtoja luettelosta, mikä helpottaa tietojen järjestelyä ja navigointia.

4. Määrittäminen 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ä helpottaa sovelluksen muokkaamista heidän tarpeidensa mukaan.

vinkki

ChoiceBox on tarkoitettu käytettäväksi, kun ennalta määrätty määrä vaihtoehtoja on saatavilla, eikä mukautettujen vaihtoehtojen sallimista pitäisi sisällyttää. Jos haluat sallia käyttäjien syöttävän mukautettuja arvoja, käytä sen sijaan ComboBox.

Avattavan tyypit

Käyttämällä setDropdownType()-metodia voit määrittää arvon type-attribuutille ChoiceBox:ssa ja vastaavan arvon data-dropdown-for-attribuutille ChoiceBox:n avattavassa valikossa. Tämä on hyödyllistä tyylittelyssä, koska avattava valikko viedään nykyisestä sijainnistaan DOM:issa ja siirretään sivun rungon loppuun avattaessa.

Tämä irrottaminen aiheuttaa tilanteen, jossa avattavaa valikkoa on vaikea kohdistaa suoraan CSS- tai varjoselainvalitsimilla vanhempikomponentista, ellei käytä avattavan tyypin attribuuttia.

Alla olevassa demonstraatiossa avattavan tyyppi on asetettu ja sitä käytetään CSS-tiedostossa suurentamaan vaihtoehtoa hiiren osoittimen ollessa sen päällä.

Näytä koodi

ChoiceboxDropdownTypeView.java

comboBoxDropDownType.css

Maksimirivimäärä

Oletuksena avattavassa valikossa ChoiceBox:n rivimäärä näytetään sisällön mukaisena. Kuitenkin käyttäen setMaxRowCount()-metodia voit hallita, kuinka monta kohdetta näytetään.

vinkki

Käyttämällä numeroa, joka on pienempi tai yhtä suuri kuin 0, tämä ominaisuus poistuu käytöstä.

Näytä koodi

ChoiceboxMaxRowView.java

Avaa ja sulje

ChoiceBox:n vaihtoehtojen näkyvyyttä voidaan ohjata ohjelmallisesti open()- ja close()-metodien avulla. Nämä metodit mahdollistavat vaihtoehtojen näyttämisen tai piilottamisen tarpeen mukaan, mikä tarjoaa suurempaa joustavuutta ChoiceBox:n käyttäytymisen hallinnassa.

Lisäksi webforJ:llä on tapahtumakuuntelijat, jotka reagoivat, kun ChoiceBox on suljettu ja kun se on avattu, antaen sinulle enemmän hallintaa erityisten toimintojen käynnistämiseen.

//Kohdista tai avaa seuraava komponentti lomakkeessa
ChoiceBox yliopisto = new ChoiceBox("Yliopisto");
ChoiceBox pääaine = new ChoiceBox("Pääaine");
Button lähetä = new Button("Lähetä");

//... Lisää luetteloita yliopistoista ja pääaineista

yliopisto.onClose( e ->{
  pääaine.focus();
});

pääaine.onClose( e ->{
  lähetä.focus();
});

Avaa mitat

ChoiceBox-komponentilla on metodeja, jotka mahdollistavat avattavan valikon mittojen manipuloinnin. Maksimikehys ja minimileveys avattavalle valikolle voidaan asettaa käyttämällä setOpenHeight() ja setOpenWidth()-metodeja.

vinkki

Mikäli kumpaankin näistä metodeista annetaan String-arvo, se mahdollistaa minkä tahansa voimassa olevan CSS-yksikön soveltamisen, kuten pikseleitä, näkymän mittoja tai muita voimassa olevia sääntöjä. Jos annetaan int, se asettaa arvojen pikselimäärässä.

Prefiksi ja suffiksi

Paikat tarjoavat joustavia vaihtoehtoja ChoiceBox:n kyvykkyyden parantamiseen. Voit lisätä ikoneita, etikettejä, latauspyöröjä, tyhjennys/nollausmahdollisuuksia, avatar/profiilikuva-ja muita hyödyllisiä komponentteja ChoiceBox:n sisälle, mikä selkeyttää tarkoitettua merkitystä käyttäjille. ChoiceBox:ssä on kaksi paikkaa: prefix ja suffix. Käytä setPrefixComponent() ja setSuffixComponent()-metodeja insertätäksesi erilaisia komponentteja ennen ja jälkeen näytetyn vaihtoehdon ChoiceBox:ssa.

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

Tyylittely

Loading...

Parhaat käytännöt

Optimaalisen käyttäjäkokemuksen varmistamiseksi ChoiceBox-komponentin käytössä, harkitse seuraavia parhaita käytäntöjä:

1. Selkeät ja rajoitetut vaihtoehdot: Pidä valintaluettelo tiiviinä, kun se on mahdollista, ja käyttäjän tehtävään liittyvänä. ChoiceBox on ihanteellinen selkeäluetteloisten vaihtoehtojen esittelemiseen.

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

3. Oletusvalinta: Aseta oletusvalinta, kun ChoiceBox näytetään ensimmäisen kerran. Tämä varmistaa ennalta valitun vaihtoehdon, vähentäen tarvittavien vuorovaikutusten määrää valinnan tekemiseksi.

4. ChoiceBox vs. Muut luettelo-komponentit: ChoiceBox on paras valinta, jos tarvitset käyttäjän syötteen rajoittamista yhteen valintaan ennalta määrätyistä vaihtoehdoista. Toinen luettelo-komponentti saattaa olla parempi, jos tarvitset seuraavia toimintatapoja:

   • Useita valintoja ja kaikkien kohteiden esittäminen kerralla: ListBox
   • Mahdollistaa mukautetun syötteen: ComboBox