Siirry pääsisältöön

Drawer

Avaa ChatGPT:ssä
Varjo dwc-drawer 24.00
Java API

Drawer-komponentti webforJ:ssä luo liukupaneelin, joka ilmestyy näytön reunasta, paljastaen lisää sisältöä ilman, että nykyistä näkymää poistutaan. Sitä käytetään usein sivunavigaatiossa, suodatinvalikoissa, käyttäjäasetuksissa tai kompakteissa ilmoituksissa, jotka tarvitsevat ilmestyä tilapäisesti keskeyttämättä pääkäyttöliittymää.

Pinoutuminen​

Laatikot pinoutuvat automaattisesti, kun useita avataan, mikä tekee niistä joustavan valinnan tilarajoitetuissa käyttöliittymissä.

Esimerkki alla näyttää tämän käyttäytymisen AppLayout -komponentin sisällä. Hampurilaisvalikosta laukaistu navigointilaatikko on rakennettu oscillating AppLayout -komponenttiin, kun taas alareunassa oleva vastaanottopiste käyttää itsenäistä Drawer-instanssia. Molemmat elävät rinnakkain ja pinoutuvat itsenäisesti, osoittaen, kuinka laatikoita voidaan integroida asettelukomponentteihin tai käyttää itsenäisinä elementteinä.

Näytä koodi

Autofocus​

Drawer-komponentti tukee automaattista keskittymistä, mikä asettaa keskittymisen ensimmäiseen keskityttävään elementtiin, kun Drawer avautuu. Tämä parantaa käytettävyyttä tuomalla huomion suoraan ensimmäiseen toimivaan elementtiin.

Näytä koodi

Label​

setLabel()-menetelmä voi tarjota merkityksellisen kuvauksen Drawer:n sisällöstä. Kun etiketti on asetettu, esteettömyysteknologiat, kuten ruudunlukijat, voivat ilmoittaa sen, mikä auttaa käyttäjiä ymmärtämään Drawer:n tarkoituksen näkemättä sen visuaalisia sisältöjä.

Drawer drawer = new Drawer();
drawer.setLabel("Tehtävien hallinta");
Kuvastavat etiketit

Käytä lyhyitä ja kuvaavia etikettejä, jotka heijastavat Drawer:n tarkoitusta. Vältä geneerisiä termejä kuten "Valikko" tai "Paneeli", kun enemmän spesifinen nimi voidaan käyttää.

Koko​

Säätääksesi Drawer:n kokoa, aseta arvo CSS:n mukautetulle ominaisuudelle --dwc-drawer-size. Tämä asettaa Drawer:n leveyden vasemmalle/oikealle tai korkeuden ylös/alhaalle asennossa.

Voit määrittää arvon käyttäen mitä tahansa voimassa olevaa CSS-yksikköä, kuten prosenttia, pikseliä tai vw/vh, käyttäen joko Javaa tai CSS:ää:

// Java
drawer.setStyle("--dwc-drawer-size", "40%");
/* CSS */
dwc-drawer {
  --dwc-drawer-size: 40%;
}

Estääksesi Drawer:n kasvamasta liian suureksi, käytä --dwc-drawer-max-size -parametria yhdessä sen kanssa:

// Java
drawer.setStyle("--dwc-drawer-size", "40%");
drawer.setStyle("--dwc-drawer-max-size", "800px");
/* CSS */
dwc-drawer {
  --dwc-drawer-size: 40%;
  --dwc-drawer-max-size: 800px;
}

Sijoitus​

setPlacement()-menetelmä hallitsee, mihin Drawer ilmestyy näkymässä.

Saatavilla olevat sijoitusvaihtoehdot:

  • YLÄOSA: Asettaa laatikon näkymän yläreunaan.
  • YLÄKESKITYS: Kohdistaa laatikon vaaka-suuntaisesti keskelle näkymän yläosassa.
  • ALHAOSA: Asettaa laatikon näkymän alareunaan.
  • ALHAKESKITYS: Kohdistaa laatikon vaaka-suuntaisesti keskelle näkymän alareunassa.
  • VASEN: Asettaa laatikon näkymän vasempaan reunaan.
  • OIKOINEN: Asettaa laatikon näkymän oikeaan reunaan.
Näytä koodi

Tapahtumien käsittely​

Drawer-komponentti lähettää elinkaaritapahtumia, joita voidaan käyttää sovelluslogiikan laukaisemiseen sen avonaisessa tai suljetussa tilassa tapahtuvien muutosten myötä.

Tuetut tapahtumat:

  • DrawerOpenEvent: Laukaisee, kun laatikko on täysin avattu.
  • DrawerCloseEvent: Laukaisee, kun laatikko on täysin suljettu.

Voit liittää kuuntelijoita näihin tapahtumiin suorittaaksesi logiikkaa, kun Drawer:n tila muuttuu.

Drawer drawer = new Drawer();

drawer.addOpenListener(e -> {
  // Käsittele laatikon avattu tapahtuma
});

drawer.addCloseListener(e -> {
  // Käsittele laatikon suljettu tapahtuma
});

Esimerkki: Yhteystietovalitsin​

Drawer-komponentti paljastaa lisäsisältöä keskeyttämättä nykyistä näkymää. Tämä esimerkki asettaa laatikon alhaiseen keskikohtaan, sisältäen vieritettävän yhteystietoluettelon.

Jokainen yhteystieto näyttää avatarin, nimen, sijainnin ja toimintopainikkeen nopeaa pääsyä tietojen tai viestinnän. Tämä lähestymistapa toimii hyvin kompaktien työkalujen, kuten yhteystietovalitsimien, asetuspaneelien tai ilmoitusten rakentamiseen.

Näytä koodi

Esimerkki: Tehtävien hallinta​

Tässä esimerkissä käytetään Drawer:ia tehtävien hallintaan. Voit lisätä tehtäviä, merkitä ne suoritettavaksi ja tyhjentää suoritetut. Drawer:n alatunniste sisältää lomakkeen ohjaimia tehtäväluettelon käsittelemiseksi, ja "Lisää tehtävä" Button poistaa toimintansa, jos 50 tehtävää saavutetaan.

Näytä koodi

Tyylit​

Loading...