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ällön osion. Yläpalkki ja alatunniste ovat kiinteitä, laatikko liukuu näkökenttään ja sieltä pois, ja sisältö on vieritettävissä.

Tätä komponenttia voidaan käyttää yleisten sovellusasetteluiden, kuten hallintapaneelin, 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, alatunnisteen, laatikon ja sisältöosion, jotka kaikki on rakennettu responsiiviseksi komponentiksi, jota voidaan helposti mukauttaa yleisten sovellusasetteluiden, kuten hallintapaneelin, nopeaksi rakentamiseksi. Yläpalkki ja alatunniste ovat kiinteitä, laatikko liukuu näkökenttään ja sieltä pois, ja sisältö on vieritettävissä.

Jokainen asettelun osa on Div, joka voi sisältää minkä tahansa kelvollisen webforJ-ohjaimen. Parhaiden tulosten saavuttamiseksi sovelluksen tulisi sisältää näkökenttämeta-tag, joka sisältää viewport-fit=cover. Meta-tag saa näkökentän skaalautumaan 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 tuottaa sovelluksen, jossa on suljettava sivupalkki, joka sisältää logon ja välilehdet eri sisältövaihtoehtoja varten, sekä yläpalkin. Esimerkissämme käytetään dwc-icon-button -webkomponenttia laatikkonapituskytkimen luomiseen. Nappulassa on data-drawer-toggle-attribuutti, joka käskee DwcAppLayoutin kuuntelemaan napsautustapahtumia, jotka tulevat kyseisestä komponentista laatikon tilan vaihtamiseksi.

Näytä koodi

Kokonainen leveys navigointipalkki​

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

AppLayout myApp = new AppLayout();

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

Useita työkaluja​

Navigointipalkilla ei ole rajoitusta lisättävien työkalujen määrälle. Toolbar on vaakasuuntainen säiliökomponentti, joka pitää sisällään joukon toimintanappuloita, kuvakkeita tai muita ohjaimia. Toisen työkalun lisääminen tapahtuu yksinkertaisesti käyttämällä addToHeader()-menetelmää lisäämään toinen Toolbar-komponentti.

Seuraavassa esimerkissä näytetään, kuinka käyttää kahta työkalua. Ensimmäinen sisältää laatikon kytkinnapin ja sovelluksen nimen. Toinen työkalu sisältää toissijaisen navigointivalikon.

Näytä koodi

Kiinteät työkalut​

Kiinteä työkalu on työkalu, joka pysyy näkyvissä sivun yläosassa, kun käyttäjä vierittää alaspäin, mutta navigointipalkin korkeus on supistunut, jotta enemmän tilaa on saatavilla sivun sisällölle. Tällainen työkalu sisältää yleensä kiinteän navigointivalikon, joka liittyy nykyiseen sivuun.

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

Kun AppLayout.setHeaderReveal(true)-asetusta kutsutaan, yläpalkki on näkyvissä ensimmäisellä renderoinnilla, ja se piilotetaan, kun käyttäjä alkaa vierittää alaspäin. Kun käyttäjä alkaa vierittää ylöspäin, yläpalkki paljastuu jälleen.

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

Näytä koodi

Mobiili navigoinnin asettelu​

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

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

Samanlaisena kuin AppLayout.setHeaderReveal(), AppLayout.setFooterReveal() tuetaan. Kun AppLayout.setFooterReveal(true) -asetusta kutsutaan, alatunniste on näkyvissä ensimmäisellä renderoinnilla ja piilotetaan, kun käyttäjä alkaa vierittää ylöspäin. Kun käyttäjä alkaa vierittää alaspäin uudelleen, alatunniste paljastuu.

Oletusarvoisesti, kun näytön leveys on 800px tai vähemmän, laatikko vaihdetaan popover-tilaan. Tätä kutsutaan "katkoksi". Popover-tila tarkoittaa, että laatikko hypähtää sisällön alueen päälle, jossa on päällekkäisyys. Katkosta voidaan määrittää käyttämällä setDrawerBreakpoint() -menetelmää, ja katkaisu on oltava kelvollinen media query.

Näytä koodi

Laatikon työkalut​

AppLayout laatikon työkalut on suunniteltu integroidun navigoinnin ja kontekstuaalisten valikoiden tarjoamiseksi pääsovelluksen asettelussa, samalla kun itsenäiset Drawer -komponentit tarjoavat joustavia, itsenäisiä liukupaneeleja, joita voidaan käyttää missä tahansa sovelluksessasi lisäsisällön, suodattimien tai ilmoitusten näyttämiseen. Tämä osa keskittyy AppLayoutin tarjoamiin sisäänrakennettuihin laatikkotoimintoihin ja -työkaluihin.

Laatikon katkaisu​

Oletusarvoisesti, kun näytön leveys on 800px tai vähemmän, laatikko vaihdetaan popover-tilaan. Tätä kutsutaan "katkoksi". Popover-tila tarkoittaa, että laatikko hypähtää sisällön alueen päälle, jossa on päällekkäisyys. Katkosta voidaan määrittää käyttämällä setDrawerBreakpoint() -menetelmää, ja katkaisu on oltava kelvollinen media query.

Esimerkiksi seuraavassa esimerkissä laatikon katkaisu on määritetty olevan 500px tai vähemmän.

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

Laatikon otsikko​

AppLayout komponentti tarjoaa addToDrawerTitle()-menetelmän määrittääkseen mukautetun otsikon, joka näytetään laatikon yläosassa.

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

Laatikon toiminnot​

AppLayout komponentti mahdollistaa mukautettujen komponenttien, kuten nappeja tai kuvakkeita, sijoittamisen laatikon yläosan toiminnot -alueelle käyttäen addToDrawerHeaderActions() -menetelmää.

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

On mahdollista välittää useita komponentteja argumentteina:

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

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

Näytä koodi

AppDrawerToggle 24.12​

AppDrawerToggle komponentti on palvelinpuolen webforJ-luokka, joka edustaa painiketta, jota käytetään navigointilaadikon näkyvyyden vaihtamiseen AppLayout-komponentissa. Se vastaa asiakaspuolen <dwc-app-drawer-toggle>-elementtiä ja on oletuksena muotoiltu käyttäytymään kuin perinteinen hamburger-valikkokuvake, tätä käyttäytymistä voidaan mukauttaa.

Yleiskatsaus​

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

// Ei tarvitse rekisteröidä tapahtumaa:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// Laatikkokytkin toimii heti—ei tarvitse manuaalisia tapahtumakuuntelijoita.

Muotoilu​

Loading...