AppLayout

Avaa ChatGPT:ssä

Varjo dwc-app-layout 23.06

Java API

AppLayout-komponentti tarjoaa valmiin sivurakenteen, jossa on kiinteä ylä- ja alaosa, liukuva työkalupakki sekä vieritettävä sisältöalue. Nämä osiot katettavat hallintapaneelien, admin-paneelien ja useimpien moniosioisten käyttöliittymien asettelutarpeet.

Ominaisuudet

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

• Helppo käyttää ja muokata
• Vastaava suunnittelu
• Useita asettelu vaihtoehtoja
• Toimii webforJ Tummassa Režiimissä

Se tarjoaa kiinteän yläosan, alaosan, työkalupakin ja sisältöosion, jotka kaikki on rakennettu vastaavaksi komponentiksi ja joita voidaan helposti muokata yhteisten sovellusten asettelujen, kuten hallintapaneelin, rakentamiseksi. Yläosa ja alaosa ovat kiinteitä, työkalupakki liukuu näkymän sisään ja ulos, 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ää viewportin meta-tag, joka sisältää viewport-fit=cover. Meta-tagi aiheuttaa näkymän skaalaantuvan 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 koodinäyte tuottaa sovelluksen, jossa on kokoontaitettava sivupalkki, joka sisältää logon ja välilehdet eri sisältövaihtoehdoille sekä yläosan. Demo käyttää dwc-icon-button-webkomponenttia luodakseen työkalupakin vaihtonapin. Napissa on data-drawer-toggle-attribuutti, joka käskee DwcAppLayoutia kuuntelemaan napsautustapahtumia, jotka tulevat tuosta komponentista työkalupakin tilan vaihtamiseksi.

Koko leveys navigointipalkki

Oletuksena AppLayout renderöi ylä- ja alaosan näkymän ulkopuolella. Näkymän ulkopuolinen tila tarkoittaa, että ylä- ja alaosan sijainti siirtyy sopimaan avattavan työkalupakin viereen. Tämän tilan poistaminen käytöstä saa ylä- ja alaosan ottamaan koko käytettävissä olevan tilan ja siirtämään työkalupakin ylä- ja alaosaa sovittamaan ylä- ja alaosan.

AppLayout myApp = new AppLayout();

myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);

Useita työkaluja

Navigointipalkkiin voi lisätä rajattoman määrän työkaluja. Toolbar on vaakasuuntainen säilökomponentti, joka pitää sisällään joukon toimintanappeja, kuvakkeita tai muita ohjaimia. Lisätäksesi ylimääräisen työkalupakin, käytä yksinkertaisesti addToHeader()-menetelmää toisen Toolbar-komponentin lisäämiseksi.

Seuraava demo näyttää, kuinka käyttää kahta työkalupakkia. Ensimmäisessä on työkalupakin vaihtonappi ja sovelluksen nimi. Toinen työkalupakki sisältää toissijaisen navigointivalikon.

Sticky työkalupakit

Sticky-työkalupakki on työkalu, joka pysyy näkyvissä sivun yläosassa, kun käyttäjä vierittää alaspäin, mutta navigointipalkin korkeus on romahtanut, jotta sivun sisällölle on enemmän tilaa. Tavallisesti tämäntyyppisessä työkalupakissa on kiinteä navigointivalikko, joka on relevantti nykyiselle sivulle.

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

Kun AppLayout.setHeaderReveal(true) kutsutaan, yläosa on näkyvissä ensimmäisellä renderöinnillä ja piilotettu, kun käyttäjä alkaa vierittää alaspäin. Kun käyttäjä alkaa vierittää uudelleen ylöspäin, yläosa paljastuu.

CSS-mukautetun ominaisuuden --dwc-app-layout-header-collapse-height avulla on mahdollista säätää, kuinka paljon yläosasta navigointipalkista piilotetaan.

Mobiili navigointi asettelu

Alhaalla oleva navigointipalkki voidaan käyttää tarjoamaan erilaista versiota navigoinnista sovelluksen alaosassa. Tämäntyyppinen navigointi on erityisen suosittua mobiilisovelluksissa.

Huomaa, että työkalupakki on piilotettu seuraavassa demossa. AppLayout-widget tukee kolmea työkalupakin sijaintia: DrawerPlacement.LEFT, DrawerPlacement.RIGHT ja DrawerPlacement.HIDDEN.

Kuten AppLayout.setHeaderReveal(), AppLayout.setFooterReveal() tuetaan. Kun AppLayout.setFooterReveal(true) kutsutaan, alaosa näkyy ensimmäisellä renderöinnillä ja piilotetaan, kun käyttäjä alkaa vierittää ylöspäin. Kun käyttäjä alkaa vierittää uudelleen alaspäin, alaosa paljastuu.

Oletuksena, kun näytön leveys on 800px tai vähemmän, työkalupakki vaihdetaan popover-tilaan. Tätä kutsutaan katkaisupisteeksi. Popover-tila tarkoittaa, että työkalupakki ponnahtaa sisällön alueelle päällekkäin. Katkaisupisteen voi määrittää käyttämällä setDrawerBreakpoint()-menetelmää ja katkaisupisteen on oltava voimassa oleva media query.

Työkalupakin työkalut

AppLayout-työkalupakin työkalut on suunniteltu integroituun navigointiin ja kontekstuaalisiin valikoihin pääsovelluksen asettelussa, kun taas itsenäiset Drawer komponentit tarjoavat joustavia, itsenäisiä liukupaneeleja, joita voidaan käyttää missä tahansa sovelluksessa lisäsisältöön, suodattimiin tai ilmoituksiin. Tämä osio keskittyy AppLayoutin tarjoamiin sisäänrakennettuihin työkalupakko-ominaisuuksiin ja -työkaluihin.

Työkalupakin katkaisupiste

Oletuksena, kun näytön leveys on 800px tai vähemmän, työkalupakki vaihdetaan popover-tilaan. Tämä on katkaisupiste. Popover-tila tarkoittaa, että työkalupakki ponnahtaa sisällön alueelle päällekkäin. Katkaisupisteen voi määrittää käyttämällä setDrawerBreakpoint()-menetelmää ja katkaisupisteen on oltava voimassa oleva media query.

Esimerkiksi seuraavassa näytteessä työkalupakin katkaisupiste on määritetty olevan 500px tai vähemmän.

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

Työkalupakin otsikko

AppLayout-komponentti tarjoaa addToDrawerTitle()-menetelmän mukautetun otsikon määrittämiseksi, joka näkyy työkalupakin yläosassa.

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

Työkalupakin toiminnot

AppLayout-komponentti mahdollistaa mukautettujen komponenttien, kuten nappien tai kuvakkeiden, sijoittamisen työkalupakin yläosan toimintotilaan käyttämällä 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")
);

Työkalupakin toiminnot näkyvät oikealla puolella työkalupakin yläosassa.

AppDrawerToggle 24.12

AppDrawerToggle -komponentti on palvelinpuolen webforJ-luokka, joka edustaa painiketta, jota käytetään navigointityökalupakin näkyvyyden vaihtamiseen AppLayout:ssa. Se vastaa asiakaspään <dwc-app-drawer-toggle> -elementtiä ja on oletusarvoisesti tyylitelty toimimaan kuin perinteinen hampurilaisvalikon kuvake, tätä käytöstä voidaan mukauttaa.

Yleiskatsaus

AppDrawerToggle laajentaa IconButton-luokkaa ja käyttää oletusarvoisesti "menu-2" kuvaketta Tabler-ikona-sarjasta. Se lisää automaattisesti data-drawer-toggle -attribuutin integroitumiseen asiakaspään työkalupakin käytökseen.

// Ei tarvitse rekisteröidä tapahtumaa:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// Työkalupakin vaihtaminen toimii heti—ei tarvetta manuaalisille tapahtumakuuntelijoille.

Tyylitys

Loading...