Siirry pääsisältöön

AppLayout

Avaa ChatGPT:ssä
Varjo dwc-app-layout 23.06
Java API

AppLayout -komponentti tarjoaa valmiin sivurakenteen, jossa on kiinteä ylätunniste ja alatunniste, liukuva laatikko ja vieritettävä sisältöalue. Nämä osiot yhdessä kattavat hallintapaneelien, hallintasivujen ja useimpien moniosioisten käyttöliittymien asettelutarpeet.

Ominaisuudet​

webforJ App Layout on komponentti, joka mahdollistaa yleisten sovellusten asettelujen luomisen.

  • Helppo käyttää ja mukauttaa
  • Reagoiva muotoilu
  • Useita asettelu vaihtoehtoja
  • Toimii webforJ Tummassa tilassa

Se tarjoaa ylätunnisteen, alatunnisteen, liukuvan laatikon ja sisältöalueen, kaikki rakennettuna reagoivaksi komponentiksi, joka voidaan helposti mukauttaa yleisten sovellusasetusten, kuten hallintapaneelin, nopeaan rakentamiseen. Ylätunniste ja alatunniste ovat kiinteitä, liukuva laatikko liikkuu näkymän sisällä ja sisältö on vieritettävää.

Jokainen asettelun osa on Div, joka voi sisältää mitä tahansa kelvollista webforJ-ohjainta. Parhaiden tulosten saavuttamiseksi sovelluksen tulisi sisältää näkymämeta-tag, joka sisältää viewport-fit=cover. Meta-tag saa näkymän täyttämään laitteen näytön.

@AppMeta(name = "viewport", content = "width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no")

Yleiskatsaus​

Seuraava koodiesimerkki tuottaa sovelluksen, jossa on taitettava sivupalkki, joka sisältää logon ja välilehtiä eri sisältövaihtoehdoille sekä ylätunnisteen. Esimerkki käyttää dwc-icon-button -web-komponenttia luodakseen liukuvapainikkeen. Painikkeessa on data-drawer-toggle -attribuutti, joka ohjaa DwcAppLayoutia kuuntelemaan tuosta komponentista tulevia klikkaustapahtumia liukuvan tilan vaihtamiseksi.

Näytä koodi

Täysimittainen navigointipalkki​

Oletusarvoisesti AppLayout renderoi ylätunnisteen ja alatunnisteen näkymän ulkopuolelle. Näkymän ulkopuolinen tila tarkoittaa, että ylätunnisteen ja alatunnisteen paikka siirtyy sopimaan avattavan laatikon viereen. Tämän tilan poistaminen aiheuttaa ylätunnisteen ja alatunnisteen käyttävän koko käytettävissä olevaa tilaa ja siirtävän liukuvan laatikon ylä- ja alareunat sopimaan ylätunnisteen ja alatunnisteen kanssa.

AppLayout myApp = new AppLayout();

myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);
Näytä koodi

Useita työpöytiä​

Navigointipalkilla ei ole rajoituksia työpöytien määrälle, jotka voit lisätä. Toolbar on vaakasuuntainen säiliökomponentti, joka pitää sisällään joukon toimintapainikkeita, ikoneita tai muita ohjaimia. Lisätäksesi ylimääräisen työpöydän, käytä yksinkertaisesti addToHeader() -menetelmää lisätäksesi toisen Toolbar-komponentin.

Seuraava esimerkki näyttää, kuinka käyttää kahta työpöytää. Ensimmäinen sisältää liukuvalaatikon kytkinpainikkeen ja sovelluksen nimen. Toinen työpöytä sisältää toissijaisen navigointivalikon.

Näytä koodi

Kiinteät työpöydät​

Kiinteä työpöytä on työpöytä, joka pysyy näkyvissä sivun yläosassa, kun käyttäjä vierittää alas, mutta navigointipalkin korkeus on kutistunut, jotta sivun sisällölle saadaan enemmän tilaa. Tämäntyyppinen työpöytä sisältää yleensä kiinteän navigointivalikon, joka on relevantti nykyiselle sivulle.

On mahdollista luoda kiinteitä työpöytiä käyttämällä CSS:n mukautettua ominaisuutta --dwc-app-layout-header-collapse-height ja AppLayout.setHeaderReveal() -valintaa.

Kun AppLayout.setHeaderReveal(true) -asetusta kutsutaan, ylätunniste on näkyvissä ensimmäisellä renderöinnillä, ja se piilotetaan, kun käyttäjä alkaa vierittää alaspäin. Kun käyttäjä alkaa vierittää ylös päin uudelleen, ylätunniste tulee näkyviin.

CSS:n mukautetun ominaisuuden --dwc-app-layout-header-collapse-height avulla on mahdollista hallita, kuinka paljon ylätunnisteen navigointipalkista piilotetaan.

Näytä koodi

Mobiilinavigointiasettelu​

Alareunan navigointipalkkia voidaan käyttää tarjoamaan eri version navigoinnista sovelluksen alareunassa. Tämän tyyppinen navigointi on erityisen suosittua mobiilisovelluksissa.

Huomaa, että liukuva laatikko on piilotettu seuraavassa esimerkissä. AppLayout-widget tukee kolmea liukuvan laatikon sijaintia: DrawerPlacement.LEFT, DrawerPlacement.RIGHT ja DrawerPlacement.HIDDEN.

Kuten AppLayout.setHeaderReveal(), myös AppLayout.setFooterReveal() tuetaan. Kun AppLayout.setFooterReveal(true) -asetusta kutsutaan, alatunniste on näkyvissä ensimmäisellä renderöinnillä ja sitten piilotettu, kun käyttäjä alkaa vierittää ylös päin. Kun käyttäjä alkaa vierittää alaspäin jälleen, alatunniste tulee näkyviin.

Oletusarvoisesti, kun näytön leveys on 800px tai vähemmän, liukuva laatikko vaihdetaan popover-tilaan. Tätä kutsutaan katkaisupisteeksi. Popover-tila tarkoittaa, että liukuva laatikko kohoaa sisältöalueen ylle päällekkäin. Katkaisupistettä voidaan konfiguroida käyttämällä setDrawerBreakpoint() -menetelmää, ja katkaisupisteen on oltava kelvollinen media query.

Näytä koodi

Liukuvan laatikon työkalut​

AppLayout -liukuvan laatikon työkalut on suunniteltu integroituun navigointiin ja kontekstitietoisiin valikoihin pääsovelluksen asettelussa, kun taas itsenäiset Drawer -komponentit tarjoavat joustavia, riippumattomia liukuva paneeleja, joita voidaan käyttää missä tahansa sovelluksessa lisäsisältöön, suodattimiin tai ilmoituksiin. Tämä osa keskittyy AppLayoutin tarjoamiin sisäänrakennettuihin liukuvan laatikon ominaisuuksiin ja työkaluihin.

Liukuvan laatikon katkaisupiste​

Oletusarvoisesti, kun näytön leveys on 800px tai vähemmän, liukuva laatikko vaihdetaan popover-tilaan. Tätä kutsutaan katkaisupisteeksi. Popover-tila tarkoittaa, että liukuva laatikko kohoaa sisältöalueen ylle päällekkäin. Katkaisupistettä voidaan konfiguroida käyttämällä setDrawerBreakpoint() -menetelmää, ja katkaisupisteen on oltava kelvollinen media query.

Esimerkiksi seuraavassa esimerkissä liukuvan laatikon katkaisupistettä on konfiguroitu olemaan 500px tai vähemmän.

AppLayout demo = new AppLayout();
demo.setDrawerBreakpoint("(max-width:500px)");

Liukuvan laatikon otsikko​

AppLayout -komponentti tarjoaa addToDrawerTitle() -menetelmän, jonka avulla voidaan määrittää mukautettu otsikko, joka näytetään liukuvan laatikon ylätunnisteessa.

layout.addToDrawerTitle(new Div("Valikko"));

Liukuvan laatikon toiminnot​

AppLayout -komponentti mahdollistaa mukautettujen komponenttien, kuten painikkeiden tai ikoneiden, sijoittamisen liukuvan laatikon ylätunnisteen toiminnot -alueeseen käyttäen addToDrawerHeaderActions() -menetelmää.

layout.addToDrawerHeaderActions(
  new IconButton(TablerIcon.create("bell")),
);

On mahdollista siirtää useita komponentteja argumentteina:

layout.addToDrawerHeaderActions(
  new IconButton(TablerIcon.create("bell")),
  new Button("Profiili")
);

Liukuvan laatikon toiminnot näkyvät liukuvan laatikon ylätunnisteen oikean reunan osassa.

Näytä koodi

AppDrawerToggle 24.12​

AppDrawerToggle -komponentti on palvelinpuolen webforJ-luokka, joka edustaa painiketta, jota käytetään navigointilaudun näkyvyyden vaihtamiseen AppLayout-sovelluksessa. Se vastaa asiakaspuolen <dwc-app-drawer-toggle> -elementtiä ja on oletusarvoisesti muotoiltu käyttäytymään perinteisen hampurilaisvalikon kuvakeen tavoin, tätä käyttäytymistä voidaan mukauttaa.

Yleiskatsaus​

AppDrawerToggle laajentaa IconButton-komponenttia ja käyttää oletusarvoisesti Tabler-ikonisarjan "menu-2" -ikonia. Se automaattisesti lisää data-drawer-toggle -attribuutin integroidakseen asiakaspuolen liukuvan laatikon käyttäytymisen.

// Ei tarvita tapahtuman rekisteröintiä:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// Liukuvan laatikon kytkin toimii suoraan - ei tarvita manuaalisia tapahtumakuuntelijoita.

Muotoilu​

Loading...