Siirry pääsisältöön

AppLayout

Avaa ChatGPT:ssa
Shadow dwc-app-layout 23.06
Java API

AppLayout on kattava responsiivinen asettelukomponentti, joka tarjoaa yläpalkin, alatason, laatikon ja sisältöalueen. Yläpalkki ja alataso ovat kiinteitä, laatikko liukuu sisään ja ulos näkymästä, ja sisältö on vieritettävissä.

Tätä komponenttia voidaan käyttää yleisten sovellusasetteluiden, kuten ohjauspaneelin, rakentamiseen.

Ominaisuudet​

webforJ App Layout on komponentti, joka mahdollistaa yleisten sovellusasetteluiden rakentamisen.

  • Helppo käyttää ja mukauttaa
  • Responsiivinen muotoilu
  • Useita asetteluvalintoja
  • Toimii webforJ Tummassa Tilassa

Se tarjoaa yläpalkin, alatason, laatikon ja sisältöalueen, jotka kaikki on rakennettu responsiiviseksi komponentiksi, jota voidaan helposti mukauttaa yleisten sovellusasetteluiden, kuten ohjauspaneelin, nopeaan rakentamiseen. Yläpalkki ja alataso ovat kiinteitä, laatikko liukuu sisään ja ulos näkymästä, ja sisältö on vieritettävissä.

Jokainen asettelun osa on Div, joka voi sisältää mitä tahansa voimassa olevaa webforJ-ohjainta. Parhaiden tulosten saavuttamiseksi sovelluksen tulisi sisältää viewport meta -tagi, joka sisältää viewport-fit=cover. Meta-tagi aiheuttaa, että näkymä skaalataan täyttämään laitteen näyttö.

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

Yleiskatsaus​

Seuraava koodiesimerkki johtaa sovellukseen, jossa on taitettava sivupalkki, joka sisältää logon ja välilehdet erilaisille sisältövalinnoille sekä yläpalkin. Demo käyttää dwc-icon-button web-komponenttia luodakseen laatikon kytkinpainikkeen. Painikkeella on data-drawer-toggle-attribuutti, joka ohjaa DwcAppLayoutia kuuntelemaan klikkaustapahtumia, jotka tulevat kyseisestä komponentista, kytkeäksesi laatikon tilan.

Näytä Koodi

Täysin leveä navigointipalkki​

Oletusarvoisesti AppLayout renderoi yläpalkin ja alatason off-screen-tilassa. Off-screen-tila tarkoittaa, että yläpalkin ja alatason sijainti siirretään sopimaan avattavan laatikon viereen. Tämän tilan poistaminen käytöstä saa yläpalkin ja alatason ottamaan koko käytettävissä olevan tilan ja siirtämään laatikon ylä- ja alaosien sijaintia sopimaan yläpalkin ja alatason kanssa.

AppLayout myApp = new AppLayout();

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

Useat työkalupalkit​

Navigointipalkissa ei ole rajoitusta siihen, kuinka monta työkalupalkkia voit lisätä. Toolbar on vaakasuuntainen säilökomponentti, joka sisältää joukon toimintonäppäimiä, kuvakkeita tai muita ohjaimia. Lisätäksesi ylimääräisen työkalupalkin, käytä yksinkertaisesti addToHeader()-metodia, jotta lisätään toinen Toolbar-komponentti.

Seuraava demo näyttää, miten käyttää kahta työkalupalkkia. Ensimmäinen sisältää laatikon kytkinpainikkeen ja sovelluksen nimen. Toinen työkalupalkki sisältää toissijaisen navigointivalikon.

Näytä Koodi

Kiinteät työkalupalkit​

Kiinteä työkalupalkki on työkalupalkki, joka pysyy näkyvissä sivun yläosassa, kun käyttäjä vierittää alaspäin, mutta navigointipalkin korkeus kutistuu, jotta sivun sisällölle on enemmän tilaa. Tällaisessa työkalupalkissa on yleensä kiinteä navigointivalikko, joka on relevantti nykyiselle sivulle.

Kiinteiden työkalupalkkien luominen on mahdollista käyttämällä CSS:n mukautettua ominaisuutta --dwc-app-layout-header-collapse-height ja AppLayout.setHeaderReveal()-vaihtoehtoa.

Kun AppLayout.setHeaderReveal(true) kutsutaan, yläpalkki näkyy ensimmäisellä renderoinnilla ja piilotetaan, kun käyttäjä alkaa vierittää alaspäin. Kun käyttäjä alkaa vierittää ylös taas, yläpalkki paljastetaan.

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

Näytä Koodi

Mobiilinavigointiasettelu​

Alhaalla oleva navigointipalkki voidaan käyttää tarjoamaan erilaisen version navigoinnista sovelluksen alaosassa. Tällainen navigointi on erityisen suosittua mobiilisovelluksissa.

Huomaa, että laatikkoa ei ole näkyvissä seuraavassa demossa. AppLayout-widget tukee kolmea laatikon sijaintia: DrawerPlacement.LEFT, DrawerPlacement.RIGHT ja DrawerPlacement.HIDDEN.

Samoin kuin AppLayout.setHeaderReveal(), AppLayout.setFooterReveal() tuetaan. Kun AppLayout.setFooterReveal(true) kutsutaan, alatason näkyy ensimmäisellä renderoinnilla ja piilotetaan, kun käyttäjä alkaa vierittää ylös. Kun käyttäjä alkaa vierittää alaspäin taas, alatason paljastuu.

Oletusarvoisesti, kun näytön leveys on 800px tai vähemmän, laatikko vaihdetaan popover-tilaan. Tätä kutsutaan katkaisupisteeksi. Popover-tila tarkoittaa, että laatikko poksahtaa sisällön alueen päälle peittäen sen. Katkaisupisteen konfiguroiminen on mahdollista käyttämällä setDrawerBreakpoint()-metodia, ja katkaisupisteen on oltava voimassa oleva media query.

Näytä Koodi

Laatikon työkalut​

AppLayout laatikon työkalut on suunniteltu integroituun navigointiin ja kontekstuaalisiin valikoihin pääsovellusasetuksessa, kun taas itsenäiset Drawer -komponentit tarjoavat joustavia, itsenäisiä liukupaneeleja, joita voidaan käyttää missä tahansa sovelluksessasi lisäsisällölle, suodattimille tai ilmoituksille. Tämä osa keskittyy AppLayoutin tarjoamiin sisäänrakennettuihin laatikkotoimintoihin ja työkaluihin.

Laatikon katkaisupiste​

Oletusarvoisesti, kun näytön leveys on 800px tai vähemmän, laatikko vaihdetaan popover-tilaan. Tätä kutsutaan katkaisupisteeksi. Popover-tila tarkoittaa, että laatikko poksahtaa sisällön alueen päälle peittäen sen. Katkaisupisteen konfiguroiminen on mahdollista käyttämällä setDrawerBreakpoint()-metodia, ja katkaisupisteen on oltava voimassa oleva media query.

Esimerkiksi seuraavassa esimerkissä laatikon katkaisupiste on määritetty olemaan 500px tai vähemmän.

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

Laatikon otsikko​

AppLayout komponentti tarjoaa addToDrawerTitle()-metodin, joka määrittelee mukautetun otsikon näytettäväksi laatikon yläpalkissa.

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

Laatikon toiminnot​

AppLayout komponentti mahdollistaa mukautettujen komponenttien, kuten painikkeiden tai kuvakkeiden, sijoittamisen laatikon yläpalkin toiminnot -alueeseen käyttäen addToDrawerHeaderActions() -metodia.

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

On mahdollista siirtää useita komponentteja argumentteina:

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

Laatikon toiminnot näkyvät oikealla puolella laatikon yläpalkissa.

Näytä Koodi

AppDrawerToggle 24.12​

AppDrawerToggle komponentti on palvelinpuolen webforJ-luokka, joka edustaa painiketta, joka käytetään navigointilaadikon näkyvyyden kytkemiseen AppLayout-komponentissa. Se karttuu asiakaspuolen <dwc-app-drawer-toggle>-elementtiin ja on tyylitelty käyttäytymään oletusarvoisesti kuin perinteinen hampurilaissämpyläkuvake, tätä käyttäytymistä voidaan mukauttaa.

Yleiskatsaus​

AppDrawerToggle laajentaa IconButton ja käyttää oletusarvoisesti "menu-2" kuvaketta Tabler-kuvakesarjasta. Se soveltaa automaattisesti data-drawer-toggle attribuuttia integraatiota varten asiakaspuolen laatikkokäyttäytymiseen.

// Ei tapahtumarekisteröintiä tarvita:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// Laatikon kytkin toimii suoraan - ei manuaalisia tapahtumakuuntelijoita tarvitse.

Tyylittely​

Loading...