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öä keskeyttämättä nykyistä näkymää. Sitä käytetään yleisesti sivunavigaatioon, suodatinvalikoihin, käyttäjäasetuksiin tai tiiviisiin ilmoituksiin, jotka tarvitsevat tilaa hetkellisesti ilman pääliittymän häiritsemistä.

Pinoaminen​

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

Alla oleva esimerkki näyttää tämän käyttäytymisen AppLayout komponentin sisällä. Hampurilaisvalikolla aktivointi navigaatiolaatikko on integroitu AppLayout:iin, kun taas alaosassa oleva tervetuloponnahdus käyttää erillistä Drawer-instanssia. Molemmat ovat samanaikaisesti läsnä ja pinoituvat itsenäisesti, osoittaen kuinka laatikoita voidaan integroida asettelukomponentteihin tai käyttää erillisinä elementteinä.

Näytä koodi

Automaattinen keskittyminen​

Drawer-komponentti tukee automaattista keskittymistä, joka asettaa automaattisesti fokuksen ensimmäiseen fokusoituvaan elementtiin, kun Drawer avautuu. Tämä parantaa käytettävyyttä tuomalla huomion suoraan ensimmäiseen toiminnalliseen elementtiin.

Näytä koodi

Otsikko​

setLabel()-menetelmällä voidaan antaa merkityksellinen kuvaus Drawer:n sisällöstä. Kun otsikko asetetaan, apuvälineet kuten ruudunlukijat voivat ilmoittaa sen, auttaen käyttäjiä ymmärtämään Drawer:n tarkoituksen näkemättä sen visuaalista sisältöä.

Drawer drawer = new Drawer();
drawer.setLabel("Tehtävien hallinta");
Kuvailevat otsikot

Käytä tiiviitä ja kuvailevia otsikoita, jotka heijastavat Drawer:n tarkoitusta. Vältä geneerisiä termejä kuten "Valikko" tai "Paneeli", kun tarkempi nimi voidaan käyttää.

Koko​

Drawer:n koon hallitsemiseksi aseta arvo CSS:n mukautetulle ominaisuudelle --dwc-drawer-size. Tämä asettaa Drawer:n leveyden vasemman/oikean sijoittamisen tai korkeuden ylhäältä/alhaalta sijoittamisen osalta.

Voit määrittää arvon käyttämällä mitä tahansa hyväksyttävää CSS-yksikköä, kuten prosentteja, 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-ominaisuutta 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, minne Drawer ilmestyy näkymään.

Saatavilla olevat sijoitusvaihtoehdot:

  • YLÄOSA: Asettaa laatikon näkymän yläreunaan.
  • YLÄKESKIOSSA: Keskittää laatikon vaakasuunnassa näytön yläreunaan.
  • ALHAALLA: Asettaa laatikon näkymän alaosaan.
  • ALHAISKESKIOSSA: Keskittää laatikon vaakasuunnassa näkymän alaosaan.
  • VASEN: Asettaa laatikon vasemman reunan varaan.
  • OIKEA: Asettaa laatikon oikean reunan varaan.
Näytä koodi

Tapahtumien käsittely​

Drawer-komponentti lähettää elinkaaritapahtumia, joita voidaan käyttää sovelluslogiikan laukaisemiseen sen avautumisen tai sulkeutumisen tilan muutoksen yhteydessä.

Tuetut tapahtumat:

  • DrawerOpenEvent: Lähetetään, kun laatikko on täysin avattu.
  • DrawerCloseEvent: Lähetetään, kun laatikko on täysin suljettu.

Voit liittää kuuntelijoita näille tapahtumille suorittaaksesi logiikan, kun Drawer:n tila muuttuu.

Drawer drawer = new Drawer();

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

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

Esimerkki: Yhteydenottovalitsin​

Drawer-komponentti tuo esille lisäsisältöä keskeyttämättä nykyistä näkymää. Tämä esimerkki sijoittaa laatikon alaosaan keskelle, sisältäen vieritettävän yhteystietoluettelon.

Jokaisessa yhteystiedossa näkyy avatar, nimi, sijainti ja toimintopainike nopeaa pääsyä yksityiskohtiin tai viestintään varten. Tämä lähestymistapa toimii hyvin tiivien työkalujen luomisessa, kuten yhteydenottovalitsijat, asetuspaneelit tai ilmoitukset.

Näytä koodi

Esimerkki: Tehtävien hallinta​

Tämä esimerkki käyttää Drawer:ia tehtävien hallintana. Voit lisätä tehtäviä, merkitä ne suoritetuiksi ja tyhjentää valmiit. Drawer:n alatunniste sisältää lomakeohjaimia, joilla voidaan vuorovaikuttaa tehtäväluettelon kanssa, ja "Lisää tehtävä" Button poistaa itsensä käytöstä, jos 50 tehtävään saavutetaan.

Näytä koodi

Tyylitys​

Loading...