Siirry pääsisältöön

AppLayout

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

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

Tätä komponenttia voidaan käyttää yleisten sovellusten asettelujen, kuten hallintapaneelin, rakentamiseen.

Ominaisuudet​

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

  • Helppokäyttöinen ja mukautettavissa
  • Responsiivinen muotoilu
  • Useita asetteluoptioita
  • Toimii webforJ Tummassa Tilassa

Se tarjoaa yläpalkin, alatunnisteen, laatikon ja sisältöalueen, jotka kaikki on rakennettu responsiiviseen komponenttiin, jota voidaan helposti mukauttaa yleisten sovellusten, kuten hallintapaneelin, nopeassa rakentamisessa. Yläpalkki ja alatunniste ovat kiinteitä, laatikko liukuu näkymän sisään ja ulos, ja sisältö on vieritettävää.

Jokainen osa asettelusta on Div, joka voi sisältää mitä tahansa kelvollista webforJ-ohjainta. Parhaan tuloksen saavuttamiseksi sovelluksen tulisi sisältää näkymämeta-tag, joka sisältää viewport-fit=cover. Meta-tag saa näkymän skaalautumaan 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")

Yhteenveto​

Seuraava koodiesimerkki tuottaa sovelluksen, jossa on taitettava sivupalkki, joka sisältää logon ja välilehtiä eri sisältövaihtoehdoille sekä yläpalkin. Esimerkki käyttää dwc-icon-button web-komponenttia laatikon kytkentäpainikkeen luomiseen. Painikkeessa on data-drawer-toggle-attribuutti, joka ohjeistaa DwcAppLayoutia kuuntelemaan napsautustapahtumia tuosta komponentista vaihtamaan laatikon tilaa.

Näytä koodi

Kokonainen leveä navigointipalkki​

Oletusarvoisesti AppLayout renderoi yläpalkin ja alatunnisteen näkymän ulkopuolella. Näkymän ulkopuolella tarkoittaa, että yläpalkin ja alatunnisteen sijainti siirtyy sopimaan avattuun laatikkoon. Tämän tilan poistaminen käytöstä saa yläpalkin ja alatunnisteen viemään koko saatavilla olevan tilan ja siirtämään laatikon ylä- ja alaosaa sopimaan yläpalkin ja alatunnisteen kanssa.

AppLayout myApp = new AppLayout();

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

Useita työkaluja​

Navigointipalkissa ei ole rajaa työkaluilla, joita voit lisätä. Toolbar on vaakasuuntainen säiliökomponentti, joka sisältää joukon toimintopainikkeita, kuvakkeita tai muita ohjaimia. Lisätäksesi toisen työkalupalkin, käytä yksinkertaisesti addToHeader()-menetelmää lisätäksesi toisen Toolbar-komponentin.

Seuraava esimerkki näyttää kuinka käyttää kahta työkalupalkkia. Ensimmäinen sisältää laatikon kytkentäpainikkeen ja sovelluksen osoitteen. Toinen työkalupalkki sisältää toissijaisen navigointivalikon.

Näytä koodi

Kiinteät työkalupalkit​

Kiinteä työkalupalkki on työkalupalkki, joka pysyy näkyvänä sivun yläosassa, kun käyttäjä vierittää alas, mutta navigointipalkin korkeus on romahtanut, jotta sivun sisällölle on saatavilla enemmän tilaa. Tällaisessa työkalupalkissa on yleensä kiinteä navigointivalikko, joka liittyy nykyiseen sivuun.

Voit luoda kiinteitä työkalupalkkeja käyttämällä CSS:n mukautettua ominaisuutta --dwc-app-layout-header-collapse-height ja AppLayout.setHeaderReveal()-vaihtoehtoa.

Kun AppLayout.setHeaderReveal(true) asetetaan, yläpalkki on näkyvissä ensimmäisellä renderöinnillä, ja se piilotetaan, kun käyttäjä alkaa vierittää alas. Kun käyttäjä alkaa vierittää ylöspäin, yläpalkki paljastuu.

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

Näytä koodi

Mobiiliviimeistely​

Alatunnisteen navigointipalkkia voidaan käyttää tarjoamaan erilainen versio navigoinnista sovelluksen alareunassa. Tällainen navigointi on erityisen suosittua mobiilisovelluksissa.

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

Samoin kuin AppLayout.setHeaderReveal(), AppLayout.setFooterReveal() on tuettu. Kun AppLayout.setFooterReveal(true) kutsutaan, alatunniste on näkyvissä ensimmäisellä renderöinnillä ja sitten piilotetaan, kun käyttäjä alkaa vierittää ylöspäin. Kun käyttäjä alkaa vierittää alas, alatunniste paljastuu.

Oletusarvoisesti, kun näytön leveys on 800 pikseliä tai vähemmän, laatikko vaihtuu popover-tilaan. Tätä kutsutaan katkaisualueeksi. Popover-tila tarkoittaa, että laatikko pomppaa sisällön alueelle peitteen kanssa. Katkaisualueen voi konfiguroida käyttämällä setDrawerBreakpoint()-menetelmää, ja katkaisualueen on oltava voimassa oleva media query.

Näytä koodi

Laatikkotyökalut​

AppLayout laatikkotyö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 sovelluksessasi lisäsisällön, suodattimien tai ilmoitusten esittämiseen. Tämä osio keskittyy AppLayoutin tarjoamiin sisäänrakennettuihin laatikkotoimintoihin ja -työkaluihin.

Laatikkokatkaisu​

Oletusarvoisesti, kun näytön leveys on 800 pikseliä tai vähemmän, laatikko vaihtuu popover-tilaan. Tätä kutsutaan katkaisualueeksi. Popover-tila tarkoittaa, että laatikko pomppaa sisällön alueelle peitteen kanssa. Katkaisualueen voi konfiguroida käyttämällä setDrawerBreakpoint()-menetelmää, ja katkaisualueen on oltava voimassa oleva media query.

Esimerkiksi seuraavassa esimerkissä laatikkokatkaisu on määritetty 500 pikseliksi tai vähemmäksi.

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

Laatikkonimi​

AppLayout komponentti tarjoaa addToDrawerTitle()-menetelmän määrittelemään mukautetun nimen näytettäväksi laatikon yläosassa.

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

Laatikkotoimet​

AppLayout komponentti sallii mukautettujen komponenttien, kuten painikkeiden tai kuvakkeiden, sijoittamisen laatikon yläpalkin toimintojen alueeseen 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")
);

Laatikkotoimet näkyvät laatikon yläpalkin oikealla puolella.

Näytä koodi

AppDrawerToggle 24.12​

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

Yhteenveto​

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

// Ei vaadi tapahtuman rekisteröintiä:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// Laatikkokytkin toimii suoraan—ei tarvitse manuaalisia tapahtumakuuntelijoita.

Tyylit​

Loading...