Siirry pääsisältöön

Drawer

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

Drawer-komponentti webforJ:ssä luo liukuvan paneelin, joka ilmestyy näytön reunalta, paljastaen lisäsisältöä ilman, että nykyinen näkymä poistuu. Sitä käytetään yleisesti sivunavigaatiossa, suodatinvalikoissa, käyttäjäasetuksissa tai kompakteissa ilmoituksissa, jotka tarvitsevat tilapäistä ilmestymistä ilman pääkäyttöliittymän häiritsemistä.

Stacking​

Drawerit pinoavat automaattisesti useita avattuna, mikä tekee niistä joustavan valinnan tilarajoitteisille käyttöliittymille.

Alla oleva esimerkki osoittaa tämän käyttäytymisen AppLayout -komponentin sisällä. Hammburger-valikon laukaisema navigointidrawer on rakennettu osaksi AppLayout, kun taas alareunassa oleva tervetuloa-popup käyttää erillistä Drawer-instanssia. Molemmat ovat olemassa ja pinoutuvat itsenäisesti, osoittaen, kuinka Drawerit voivat olla integroituna asettelukomponentteihin tai käytettävissä itsenäisinä elementteinä.

Näytä koodi

Autofocus​

Drawer-komponentti tukee automaattista fokusta, joka asettaa automaattisesti kohdistuksen ensimmäiseen fokusoituvaan elementtiin, kun Drawer avataan. Tämä parantaa käytettävyyttä tuomalla huomion suoraan ensimmäiseen toimiin.

Näytä koodi

Label​

setLabel()-metodi voi tarjota merkityksellisen kuvauksen Drawer-sisällöstä. Kun etiketti asetetaan, apuvälineet kuten näytönlukijat voivat ilmoittaa sen, auttaen käyttäjiä ymmärtämään Drawer-komponentin tarkoituksen näkemättä sen visuaalisia sisältöjä.

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

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

Koko​

Hallita Drawer-komponentin kokoa asettamalla arvo CSS:n mukautetulle ominaisuudelle --dwc-drawer-size. Tämä asettaa Drawer-komponentin leveyden vasen/oikea sijoituksessa tai korkeuden ylös/alas sijoituksessa.

Voit määrittää 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%;
}

Estääksesi Drawer-komponentin kasvamasta 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;
}

Placement​

setPlacement()-metodi hallitsee, mihin Drawer-komponentti ilmaisee itsensä näkymässä.

Saatavilla olevat sijoitusvaihtoehdot:

  • TOP: Asettaa drawerin näkymän yläpisteeseen.
  • TOP_CENTER: Kohdistaa drawerin suorakulmaisesti keskelle ylhäällä näkymässä.
  • BOTTOM: Asettaa drawerin näkymän alaosaan.
  • BOTTOM_CENTER: Kohdistaa drawerin suorakulmaisesti keskelle alhaalla näkymässä.
  • LEFT: Asettaa drawerin vasenta reunaa myöten näkymässä.
  • RIGHT: Asettaa drawerin oikeaa reunaa myöten näkymässä.
Näytä koodi

Tapahtumankäsittely​

Drawer-komponentti lähettää elinkaaritapahtumia, joita voidaan käyttää sovelluslogiikan käynnistämiseen sen avatussa tai suljetussa tilassa.

Tuetut tapahtumat:

  • DrawerOpenEvent: Lausutaan, kun drawer on täysin avattu.
  • DrawerCloseEvent: Lausutaan, kun drawer on täysin suljettu.

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

Drawer drawer = new Drawer();

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

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

Esimerkki: Yhteystietojen valitsin​

Drawer-komponentti tuo esiin lisäsisältöä häiritsemättä nykyistä näkymää. Tässä esimerkissä drawer asetetaan alhaalla keskelle, sisältäen vieritettävän yhteystietoluettelon.

Jokainen yhteystieto näyttää avatarin, nimen, sijainnin ja toimintopainikkeen, jolla pääsee nopeasti yksityiskohtiin tai viestintään. Tämä lähestymistapa toimii hyvin kompaktien työkalujen, kuten yhteystietojen valitsinten, asetuspaneelien tai ilmoitusten rakentamisessa.

Näytä koodi

Esimerkki: Tehtävämanageri​

Tässä esimerkissä käytetään Drawer-komponenttia tehtävämanagerina. Voit lisätä tehtäviä, merkitä ne valituiksi ja tyhjentää valmiit tehtävät. Drawer-komponentin alatunniste sisältää lomakeohjaimia tehtävälistaan vuorovaikutukseen, ja "Lisää tehtävä" Button estää itsensä, jos 50 tehtävää on saavutettu.

Näytä koodi

Styling​

Loading...