ChoiceBox

Avaa ChatGPT:ssä

Varjo dwc-choicebox 23.05

Java API

ChoiceBox-komponentti esittää avattavan luettelon, josta käyttäjät valitsevat yhden vaihtoehdon. Kun valinta on tehty, valittu arvo näytetään napissa. Se on hyvä vaihtoehto, kun käyttäjien tarvitsee valita ennalta määritelty joukko vaihtoehtoja, ja nuolinäppäimiä voidaan käyttää luettelon selaamiseen.

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 eri tarkoituksiin, kuten kohteiden valintaan valikosta, vaihtoehtojen valintaan kategorioista tai ennalta määrättyjen joukkojen valitsemiseen. Ne tarjoavat järjestelmällisen ja visuaalisesti miellyttävän tavan käyttäjien tehdä valintoja, erityisesti kun vaihtoehtoja on useita. Yleisiä käyttötarkoituksia ovat:

1. Käyttäjän vaihtoehtojen valinta: ChoiceBox-komponentin ensisijainen tarkoitus on sallia käyttäjien valita yksi vaihtoehto luettelosta. Tämä on arvokasta sovelluksissa, joissa käyttäjien tarvitsee tehdä valintoja, kuten:

   • Valinta kategorioista
   • Vaihtoehtojen valinta ennalta määritellyistä joukoista

2. Lomakekentät: Kun suunnitellaan lomakkeita, jotka vaativat käyttäjiltä tiettyjen vaihtoehtojen syöttämistä, ChoiceBox yksinkertaistaa valintaprosessia. Olipa kyseessä maan, osavaltion tai minkä tahansa muun vaiheen valinta 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 suodatuskriteereitä tai lajittelupreferenssejä luettelosta, mikä helpottaa tietojen järjestämistä ja navigointia.

4. Asetukset ja konfiguraatio: Kun sovelluksessasi on asetuksia tai konfigurointivaihtoehtoja, ChoiceBox tarjoaa intuitiivisen tavan käyttäjille säätää mieltymyksiään. Käyttäjät voivat valita asetuksia luettelosta, mikä helpottaa sovelluksen mukauttamista heidän tarpeidensa mukaan.

vinkki

ChoiceBox on tarkoitettu käytettäväksi, kun ennalta määritetty määrä vaihtoehtoja on saatavilla, eikä mukautettujen vaihtoehtojen salliminen ole suotavaa. Jos haluat sallia käyttäjien syöttää mukautettuja arvoja, käytä sen sijaan ComboBox.

Avattavan tyypin määrittäminen

<JavadocLink type="foundation" location="com/webforj/component/list/DwcSelectDropdown" code='true' suffix='#setDropdownType(java.lang.String)'>setDropdownType()</JavadocLink>-menetelmän avulla voidaan määrittää arvo type-attribuutille ChoiceBox:ssa sekä vastaava arvo data-dropdown-for-attribuutille ChoiceBox:n avattavassa osassa. Tämä on hyödyllistä tyylittämisessä, sillä avattava osa otetaan pois sen nykyisestä paikasta DOM:ssa ja siirretään sivun kehon loppuun avattaessa.

Tämä irrottaminen luo tilanteen, jossa avattavan osan suora kohdistaminen CSS- tai shadow part -valitsimilla vanhemmasta komponentista on haastavaa, ellei käytetä avattavan tyypin attribuuttia.

Alla olevassa esimerkissä avattavan tyyppi on asetettu ja käytetty CSS-tiedostossa suurentamaan vaihtoehtoa, kun hiiri viedään sen päälle.

Näytä koodi

ChoiceboxDropdownTypeView.java

comboBoxDropDownType.css

Maksimirivimäärä

Oletuksena avattavan ChoiceBox:n rivimäärä kasvaa sisällön mukaan. Kuitenkin käyttämällä <JavadocLink type="foundation" location="com/webforj/component/list/DwcSelectDropdown" code='true' suffix='#setMaxRowCount(int)'>setMaxRowCount()</JavadocLink>-menetelmää voit hallita, kuinka monta kohdetta näytetään.

vinkki

Mikäli käytetään lukua, joka on pienempi tai yhtä suuri kuin 0, tämä ominaisuus poistuu käytöstä.

Näytä koodi

ChoiceboxMaxRowView.java

Avaaminen ja sulkeminen

ChoiceBox:n vaihtoehtojen näkyvyyttä voidaan hallita ohjelmallisesti open()- ja close()-menetelmillä. Nämä menetelmät mahdollistavat vaihtoehtoluettelon näyttämisen tai sen piilottamisen tarpeen mukaan, tarjoten suurempaa joustavuutta ChoiceBox:n käytökselle.

Lisäksi webforJ:llä on tapahtumakuuntelijat, kun ChoiceBox suljetaan ja avataan, mikä antaa sinulle enemmän hallintaa erityisten toimintojen käynnistämiseksi.

//Siirrä fokus seuraavaan komponenttiin lomakkeessa
ChoiceBox yliopisto = new ChoiceBox("Yliopisto");
ChoiceBox pääaine = new ChoiceBox("Pääaine");
Button lähetä = new Button("Lähetä");

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

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

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

Avattavat mitat

ChoiceBox-komponentilla on menetelmiä, jotka mahdollistavat avattavan osan mittasuhteiden manipuloimisen. Avattavan korkeuden ja minimileveyden asettaminen voidaan tehdä käyttämällä <JavadocLink type="foundation" location="com/webforj/component/list/DwcSelectDropdown" code='true' suffix='#setOpenHeight(int)'>setOpenHeight()</JavadocLink> ja <JavadocLink type="foundation" location="com/webforj/component/list/DwcSelectDropdown" code='true' suffix='#setOpenWidth(int)'>setOpenWidth()</JavadocLink>-menetelmiä.

vinkki

Siirtämällä String-arvo joko näihin menetelmiin voidaan soveltaa muita kelvollisia CSS-yksiköitä, kuten pikseleitä, näkymämittoja tai muita kelvollisia sääntöjä. Siirtämällä int asetetaan arvo pikseleinä.

Etuliite ja jälkiliite

Paikat tarjoavat joustavia vaihtoehtoja ChoiceBox:n kyvykkyyden parantamiseksi. Voit lisätä ikoneita, etikettejä, latauskierroksia, tyhjennys/nollausmahdollisuuksia, avatar/profiilikuvasuhteita ja muita hyödyllisiä komponentteja ChoiceBox:n sisään, jotta käyttäjille voidaan selventää tarkoitettua merkitystä. ChoiceBox-komponentilla on kaksi slotia: prefix ja suffix. Käytä setPrefixComponent() ja setSuffixComponent()-menetelmiä lisätäksesi erilaisia komponentteja ennen ja jälkeen näytettävän 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 rajalliset vaihtoehdot: Pidä valintalistat tiiviinä, kun se on mahdollista, ja relevantteina käyttäjän tehtävälle. ChoiceBox on ihanteellinen selkeän vaihtoehtojen luettelon esittämiseen.

2. Käyttäjäystävälliset etiketit: Varmista, että näytettävät etiketit jokaiselle vaihtoehdolle ovat käyttäjäystävällisiä ja itseohjaavia. Varmista, että käyttäjät ymmärtävät helposti jokaisen valinnan tarkoituksen.

3. Oletusvalinta: Aseta oletusvalinta, kun ChoiceBox näytetään ensimmäisen kerran. Tämä varmistaa, että esivalittu vaihtoehto vähentää tarvittavien vuorovaikutusten määrää valinnan tekemiseksi.

4. ChoiceBox vs. muut luettelo-komponentit: ChoiceBox on paras vaihtoehto, jos haluat rajoittaa käyttäjän syötettä yhteen valintaan ennalta määrättyjen vaihtoehtojen luettelosta. Toinen luettelokomponentti saattaa olla parempi, jos tarvitset seuraavia käyttäytymiä:

   • Monivalinta ja kaikkien kohteiden näyttäminen kerralla: ListBox
   • Sallitut mukautetut syötteet: ComboBox