Siirry pääsisältöön

AppNav

Avaa ChatGPT:ssä
Shadow dwc-app-nav dwc-app-nav-item 24.12
Java API

AppNav komponentti webforJ:ssä tarjoaa joustavan ja organisoidun sivuvalikkorakenteen, joka tukee sekä tasaisia että hierarkkisia rakenteita. Jokainen merkintä on AppNavItem, joka voi edustaa yksinkertaista linkkiä tai ryhmää, johon kuuluu alakohtia. Kohteet voivat linkittää sisäisiin näkymiin tai ulkoisiin resursseihin, ja niitä voidaan parantaa kuvakkeilla, merkinnöillä tai muilla komponenteilla.

Lisääminen ja ryhmittely​

AppNavItem instansseja käytetään AppNav rakenteen täyttämiseen. Nämä kohteet voivat olla yksinkertaisia linkkejä tai sisäkkäisiä ryhmän otsikoita, joihin kuuluu lapsikohteita. Ryhmän otsikot ilman linkkejä toimivat laajennettavina säilytyspaikkoina.

Käytä addItem() lisätäksesi kohteita valikkoon:

AppNavItem dashboard = new AppNavItem("Dashborad", "/dashboard");
AppNavItem admin = new AppNavItem("Admin");
admin.addItem(new AppNavItem("Käyttäjät", "/admin/users"));
admin.addItem(new AppNavItem("Asetukset", "/admin/settings"));

AppNav nav = new AppNav();
nav.addItem(dashboard);
nav.addItem(admin);
Ryhmän kohteiden linkittäminen

Ylimmän tason kohteet navigointipuussa on tyypillisesti tarkoitettu laajennettavaksi - eivät klikkattaviksi linkeiksi. path asettaminen tällaisille kohteille voi hämmentää käyttäjiä, jotka odottavat niiden paljastavan alakohtia sen sijaan, että navigoisivat muualle.

Jos haluat, että ryhmän otsikko laukaisee mukautetun toiminnon (kuten avaa ulkoiset asiakirjat), pidä ryhmän polku tyhjänä ja lisää sen sijaan interaktiivinen ohjaus, kuten IconButton, kohteen liitteeksi. Tämä pitää käyttökokemuksen yhtenäisenä ja selkeänä.

Näytä Koodi

Kohteiden linkittäminen​

Jokainen AppNavItem voi navigoida sisäiseen näkymään tai ulkoiseen linkkiin. Voit määrittää tämän käyttäen staattisia polkuja tai rekisteröityjä näkymäluokkia.

Staattiset polut​

Käytä merkkijonopoluja määrittääksesi linkkejä suoraan:

AppNavItem docs = new AppNavItem("Asiakirjat", "/docs");
AppNavItem help = new AppNavItem("Apua", "https://support.example.com");

Rekisteröidyt näkymät​

Jos näkymät on rekisteröity reitittimelle, voit välittää luokan sen sijaan, että käyttäisit kovakoodattua URL:ia:

AppNavItem settings = new AppNavItem("Asetukset", SettingsView.class);

Jos sinun annottoitu reitti tukee reittiparametreja, voit myös välittää ParametersBag:in:

ParametersBag params = ParametersBag.of("id=123");
AppNavItem advanced = new AppNavItem("Käyttäjä", UserView.class, params);

Kyselyparametrien kanssa​

Välitä ParametersBag sisältääksesi kyselymerkkijonot:

ParametersBag params = ParametersBag.of("param1=value1&param2=value2");
AppNavItem advanced = new AppNavItem("Edistynyt", SettingsView.class, params);
advanced.setQueryParameters(params);

Kohteen käyttäytyminen​

Säädä, miten linkit avautuvat käyttämällä setTarget(). Tämä on erityisen hyödyllistä ulkoisille linkeille tai pop-out-näkymille.

  • SELF (oletus): Avataan nykyisessä näkymässä.
  • BLANK: Avataan uudessa välilehdessä tai ikkunassa.
  • PARENT: Avataan vanhemmassa selauskontekstissa.
  • TOP: Avataan ylimmässä selauskontekstissa.
AppNavItem help = new AppNavItem("Apua", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Etuliite ja liite​

AppNavItem tukee etuliitteitä ja liitteitä. Käytä näitä visuaalisen selkeyden tarjoamiseksi kuvakkeilla, merkinnöillä tai painikkeilla.

  • Etuliite: ilmestyy ennen merkintää, hyödyllinen kuvakkeille.
  • Liite: ilmestyy merkinnän jälkeen, loistava merkinnöille tai toiminnoille.
AppNavItem notifications = new AppNavItem("Ilmoitukset");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));

Automaattisesti avautuvat ryhmät​

Käytä setAutoOpen(true) AppNav komponentilla automaattisesti laajentaaksesi sisäkkäisiä ryhmiä, kun sovellus uusitaan.

nav.setAutoOpen(true);

Tyylitys AppNavItem​

Loading...