Siirry pääsisältöön

ComboBox

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

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

ComboBox-komponentti on käyttöliittymän elementti, joka on suunniteltu esittämään käyttäjille luettelo vaihtoehdoista tai valinnoista sekä kenttä omien mukautettujen arvojen syöttämistä varten. Käyttäjät voivat valita yhden vaihtoehdon tästä luettelosta, yleensä napsauttamalla ComboBox:ia, mikä laukaisee alasvetoluettelon, joka sisältää saatavilla olevat valinnat, tai kirjoittaa mukautetun arvon. Käyttäjät voivat myös käyttää nuolinäppäimiä ComboBox:in kanssa. Kun käyttäjä tekee valinnan, valittu vaihtoehto näytetään sitten ComboBox:issa.

Käytöt​

ComboBox-komponentti on monipuolinen syöte-elementti, joka yhdistää sekä alasvetoluettelon että tekstinsyöttökentän ominaisuudet. Se antaa käyttäjille mahdollisuuden valita kohteita ennalta määritetystä luettelosta tai syöttää mukautettuja arvoja tarpeen mukaan. Tässä osiossa tarkastellaan ComboBox-komponentin yleisiä käyttötapoja eri skenaarioissa:

  1. Tuotteen haku ja syöttö: Käytä ComboBoxia toteuttaaksesi tuotteen hakemisen ja syöttämisen toiminnon. Käyttäjät voivat joko valita tuotteen ennalta määritetystä luettelosta tai kirjoittaa mukautetun tuotenimen. Tämä on hyödyllistä sovelluksille, kuten verkkokaupoille, joissa tuotteet ovat laajoja ja monipuolisia.

  2. Tagien valinta ja syöttö: Sovelluksissa, joissa käsitellään sisältötageja, ComboBox voi olla erinomainen valinta. Käyttäjät voivat valita olemassa olevista tageista tai lisätä mukautettuja tageja kirjoittamalla niitä. Tämä on hyödyllistä sisällön organisoimiseksi ja ryhmittelyksi. Esimerkkejä tällaisista tageista ovat:

    • Projektitunnisteet: Projektinhallintatyökalussa käyttäjät voivat valita tunnisteita tai tageja (esim. "Kiireellinen", "Käynnissä", "Valmis") tehtävien tai projektien luokittelemiseksi, ja he voivat luoda mukautettuja tunnisteita tarvittaessa.
    • Reseptiaineet: Ruoka- tai reseptisovelluksessa käyttäjät voivat valita aineksia luettelosta (esim. "Tomaatit", "Sipulit", "Kana") tai lisätä omia aineksia mukautettuihin resepteihin.
    • Sijaintitagit: Kartta- tai geotagging-sovelluksessa käyttäjät voivat valita ennalta määritettyjä sijaintitägejä (esim. "Ranta", "Kaupunki", "Puisto") tai luoda mukautettuja tageja merkitäkseen tiettyjä paikkoja kartalle.

  3. Tietojen syöttö ehdotetuilla arvoilla: Tietojen syöttölomakkeissa ComboBoxia voidaan käyttää syöttöprosessin nopeuttamiseksi tarjoamalla luettelo ehdotetuista arvoista käyttäjän syötteen perusteella. Tämä auttaa käyttäjiä syöttämään tietoja tarkasti ja tehokkaasti.

    vinkki

    ComboBox:ia tulisi käyttää, kun käyttäjille sallitaan mukautettujen arvojen syöttäminen. Jos vain esiasetettuja arvoja halutaan, käytä ChoiceBox -komponenttia sen sijaan.

Mukautettu arvo​

Mukautetun arvon ominaisuuden muuttaminen mahdollistaa hallinnan siitä, voidaanko käyttäjän muuttaa arvoa ComboBox-komponentin syöttökentässä. Jos arvo on true, mikä on oletusarvo, käyttäjä voi muuttaa arvoa. Jos se asetetaan false:ksi, käyttäjä ei voi muuttaa arvoa. Tämä voidaan asettaa käyttämällä setAllowCustomValue() -metodia.

Näytä koodi

Paikkamerkki​

ComboBoxille voidaan asettaa paikkamerkki, joka näytetään komponentin syöttökentässä, kun se on tyhjillään käyttäjille kehottaakseen heitä syöttämään haluamansa arvon kenttään. Tämä voidaan tehdä käyttämällä setPlaceholder() -metodia.

Näytä koodi

Käyttämällä setDropdownType() -metodia voidaan määrittää arvo type-attribuutille ComboBox:issa, ja vastaava arvo data-dropdown-for -attribuutille ComboBox:in alasvetoluettelossa. Tämä on hyödyllistä tyylittelyä varten, koska alasvetoluettelo siirretään DOM:in nykyisestä sijainnistaan sivun rungon loppuun avattaessa.

Tämä irrotus luo tilanteen, jossa alasvetoluetteloon voi olla haastavaa kohdistaa suoraan CSS:llä tai vanhemman komponentin varjopuolten valitsimilla, ellei käytetä alasvetotyypin attribuuttia.

Alla olevassa demonstraatiossa alasvetotyypin asetus on määritelty ja käytetty CSS-tiedostossa alasvetoluettelon valitsemiseksi ja taustavärin muuttamiseksi.

Näytä koodi

Maksimi rivimäärä​

Oletusarvoisesti alasvetoluettelossa näkyvien rivien määrä ComboBox:issa nostetaan vastaamaan sisältöä. Kuitenkin käyttämällä setMaxRowCount() -metodia voidaan hallita, kuinka monta kohdetta näytetään.

varoitus

Jos käytetään arvoa, joka on pienempi tai yhtä suuri kuin 0, tämä ominaisuus tulkitaan pois käytöstä.

Näytä koodi

Avaaminen ja sulkeminen​

ComboBox:in vaihtoehtojen näkyvyyttä voidaan hallita ohjelmallisesti open() ja close() -menetelmillä. Nämä menetelmät mahdollistavat vaihtoehtoluettelon näyttämisen valintaa varten tai sen piilottamisen tarpeen mukaan, tarjoamalla suurempaa joustavuutta ComboBox:in käyttäytymisen hallinnassa.

Lisäksi webforJ:llä on tapahtumakuuntelijat, jotka aktivoituvat, kun ComboBox suljetaan ja avataan, antaen sinulle enemmän hallintaa erityisten toimintojen laukaisemiseksi.

//Kohdistaa tai avaa seuraavan komponentin lomakkeessa
ComboBox yliopisto = new ComboBox("Yliopisto");
ComboBox pääaine = new ComboBox("Pääaine");
Button lähetä = new Button("Lähetä");

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

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

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

Avausmitat​

ComboBox-komponentilla on menetelmiä, jotka mahdollistavat alasvetoluettelon mittojen muuttamisen. Maksimi korkeus ja minimi leveys alasvetoluettelolle voidaan asettaa käyttämällä setOpenHeight() ja setOpenWidth() -menetelmiä.

vinkki

Mikäli toiseen näistä menetelmistä annetaan String-arvo, voidaan soveltaa minkä tahansa voimassa olevan CSS-yksikön sääntöjä, kuten pikseleitä, näkymämittoja tai muita voimassa olevia sääntöjä. int-arvon välittäminen asettaa arvon pikseleinä.

Korostaminen​

Työskennellessäsi ComboBox:in kanssa voit mukauttaa, milloin teksti korostuu sen mukaan, miten komponentti saa fokuksen. Tämä ominaisuus voi vähentää syöttöhäiriöitä, kun käyttäjät täyttävät lomakkeita, ja parantaa kokonaisvaltaista navigointikokemusta. Muuta korostuskäyttäytymistä käyttämällä setHighlightOnFocus() -menetelmää yhdessä sisäänrakennettujen HasHighlightOnFocus.Behavior -enumerointien kanssa:

  • ALL Komponentin sisällöt korostuvat aina automaattisesti, kun komponentti saa fokuksen.
  • FOCUS Komponentin sisällöt korostuvat automaattisesti, kun komponentti saa fokuksen ohjelmallisesti.
  • FOCUS_OR_KEY Komponentin sisällöt korostuvat automaattisesti, kun komponentti saa fokuksen ohjelmallisesti tai kun siihen siirrytään sormella.
  • FOCUS_OR_MOUSE Komponentin sisällöt korostuvat automaattisesti, kun komponentti saa fokuksen ohjelmallisesti tai kun siihen klikataan hiirellä.
  • KEY Komponentin sisällöt korostuvat automaattisesti, kun komponentti saa fokuksen siirtymällä sormella.
  • KEY_MOUSE Komponentin sisällöt korostuvat automaattisesti, kun komponentti saa fokuksen sekä sormella siirtymällä että hiirellä klikattaessa.
  • MOUSE Komponentin sisällöt korostuvat automaattisesti, kun komponentti saa fokuksen hiirellä klikattaessa.
  • NONE Komponentin sisältöjä ei koskaan automaattisesti korosteta, kun komponentti saa fokuksen.
huomio

Jos sisältö oli korostettu fokuksen menessä, se korostuu jälleen, kun fokus palautuu, riippumatta asetetusta käyttäytymisestä.

Edellä ja perässä​

Slotit tarjoavat joustavia vaihtoehtoja ComboBox:in kykyjen parantamiseksi. Voit lisätä ikoneita, etikettejä, latauspyöriä, tyhjennys/nollausmahdollisuuksia, avatar/käyttäjäkuvia ja muita hyödyllisiä komponentteja ComboBox:in sisälle selventämään käyttäjille tarkoitetun merkityksen. ComboBox:issa on kaksi slotia: prefix ja suffix. Käytä setPrefixComponent() ja setSuffixComponent() -menetelmiä eri komponenttien sijoittamiseksi ennen ja jälkeen vaihtoehtojen ComboBox:issa.

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

Tyylittely​

Loading...

Parhaat käytännöt​

Jotta varmistetaan optimaalinen käyttäjäkokemus käyttäessä ComboBox-komponenttia, harkitse seuraavia parhaita käytäntöjä:

  1. Yhteisten arvojen esilataaminen: Jos on yhteisiä tai usein käytettyjä kohteita, esilataa ne ComboBox-luetteloon. Tämä nopeuttaa valintaa yleisesti valituista kohteista ja kannustaa johdonmukaisuuteen.

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

  3. Validointi: Toteuta syötevalidointi käsitelläksesi mukautettuja syötteitä. Tarkista tietojen tarkkuus ja johdonmukaisuus. Voit haluta ehdottaa korjauksia tai vahvistuksia epäselville syötteille.

  4. Oletusvalinta: Aseta oletusvalinta, erityisesti jos on yleinen tai suositeltava vaihtoehto. Tämä parantaa käyttäjäkokemusta vähentäen ylimääräisten klikkausten tarvetta.

  5. ComboBox vs. muut listakomponentit: ComboBox on paras valinta, jos tarvitset käyttäjältä yksittäisen syötteen ja haluat tarjota heille ennalta määrättyjä valintoja sekä mahdollisuuden mukauttaa syötteensä. Toinen listakomponentti saattaa olla parempi, jos tarvitset seuraavia käyttäytymisiä:

    • Usean valinnan ja kaikkien kohteiden näyttäminen kerralla: ListBox
    • Estää mukautettu syöttö: ChoiceBox