Siirry pääsisältöön

Drawer

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

Drawer-komponentti webforJ:ssä luo liukupaneelin, joka ilmestyy näytön reunasta, paljastaen lisäsisältöä ilman, että käyttäjä poistuu nykyisestä näkymästä. Sitä käytetään yleisesti sivuvalikoissa, suodatinvalikoissa, käyttäjäasetuksissa tai tiiviissä ilmoituksissa, jotka tarvitsevat väliaikaista näyttämistä ilman pääkäyttöliittymän häiritsemistä.

Drawers-paneelit pinoutuvat automaattisesti useamman ollessa auki, mikä tekee niistä joustavan vaihtoehdon tilarajoitteisille käyttöliittymille.

Alla oleva esimerkki näyttää tämän käyttäytymisen AppLayout komponentin sisällä. Hampurilaisvalikosta käynnistettävä navigointipaneeli on rakennettu AppLayout:iin, kun taas alareunassa oleva tervetuloponnahdus käyttää erillistä Drawer-instanssia. Molemmat ovat samanaikaisesti olemassa ja pinoutuvat itsenäisesti, mikä osoittaa, kuinka Drawers-paneeleita voidaan integroida asettelukomponentteihin tai käyttää itsenäisinä elementteinä.

Näytä koodi

Autofocus​

Drawer-komponentti tukee automaattista fokusta, joka asettaa fokuksen ensimmäiseen fokusoitavaan elementtiin, kun Drawer avataan. Tämä parantaa käytettävyyttä tuomalla huomion suoraan ensimmäiseen toimintaan liittyvään elementtiin.

Näytä koodi

Label​

setLabel()-metodilla voidaan antaa merkityksellinen kuvaus Drawer:n sisällöstä. Kun etiketti on asetettu, apuvälineet, kuten ruudunlukijat, voivat ilmoittaa sen, mikä auttaa käyttäjiä ymmärtämään Drawer-paneelin tarkoituksen ilman, että he näkevät sen visuaaliset sisällöt.

Drawer drawer = new Drawer();
drawer.setLabel("Tehtävämanageri");
Kuvastavat etiketit

Käytä tiiviitä ja kuvaavia etikettejä, jotka heijastavat Drawer-paneelin tarkoitusta. Vältä yleisiä termejä kuten "Valikko" tai "Paneeli", kun tarkempi nimi voidaan käyttää.

Koko​

Voit hallita Drawer-paneelin kokoa asettamalla arvon CSS-muokattavalle ominaisuudelle --dwc-drawer-size. Tämä asettaa Drawer-paneelin leveyden vasemmalle/oikealle sijoitettuna tai korkeuden ylös/alas sijoitettuna.

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

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

Vältäksesi Drawer-paneelin kasvamista liian suureksi, käytä --dwc-drawer-max-size sen rinnalla:

// 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;
}

Sijoittaminen​

setPlacement()-metodi hallitsee, mihin Drawer ilmestyy näkymäalueella.

Saatavilla olevat sijoitusvaihtoehdot:

  • YLÄOSA: Asettelu paneelin yläreunaan.
  • YLÄ_KESKI: Asettelu paneelin vaakasuorasti keskelle yläreunaa.
  • ALAOSA: Paneelin sijoittaminen alaosaan näkymäaluetta.
  • ALA_KESKI: Paneelin vaakasuora keskitys alaosassa näkymäaluetta.
  • VASEN: Paneelin sijoittaminen näkymäalueen vasempaan reunaan.
  • OIKEA: Paneelin sijoittaminen näkymäalueen oikeaan reunaan.
Näytä koodi

Tapahtumien käsittely​

Drawer-komponentti lähettää elinkaaritapahtumia, joita voidaan käyttää sovelluslogiikan käynnistämiseen vastauksena sen avointen tai suljettujen tilojen muutoksiin.

Tuetut tapahtumat:

  • DrawerOpenEvent: Laukeaa, kun paneeli on täysin avattu.
  • DrawerCloseEvent: Laukeaa, kun paneeli on täysin suljettu.

Voit liittää kuuntelijoita näihin tapahtumiin suorittamaan logiikkaa, kun Drawer-paneelin tila muuttuu.

Drawer drawer = new Drawer();

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

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

Esimerkki: Yhteystietojen valitsin​

Drawer-komponentti tuo esiin lisäsisältöä häiritsemättä nykyistä näkymää. Tämä esimerkki sijoittaa drawerin ala keskelle, sisällyttäen skrollattavan yhteystietoluettelon.

Jokainen yhteystieto näyttää avatarin, nimen, sijainnin ja toimintopainikkeen nopeaa pääsyä yksityiskohtiin tai viestintään varten. Tämä lähestymistapa toimii hyvin tiiviiden työkalujen, kuten yhteystietovalitsimien, asetuspaneelien tai ilmoitusten, rakentamisessa.

Näytä koodi

Esimerkki: Tehtävämanageri​

Tässä esimerkissä käytetään Drawer-paneelia tehtävämanagerina. Voit lisätä tehtäviä, merkitä ne suoritetuiksi ja tyhjentää valmiit. Drawer-paneelin alatunniste sisältää lomakeohjaimia tehtäväluettelon kanssa vuorovaikuttamiseksi, ja "Lisää tehtävä" Button ei ole käytettävissä, jos 50 tehtävää on saavutettu.

Näytä koodi

Tyylitys​

Loading...