Siirry pääsisältöön

AppNav

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

AppNav-komponentti luo sivuvalikon AppNavItem-kirjentryksistä. Kirjentrykset voivat linkittää sisäisiin näkymiin tai ulkoisiin resursseihin, olla vanhempien kirjentryksien alla muodostaen hierarkkisia valikoita, ja niissä voi olla ikoneita, merkejä tai muita komponentteja, jotka antavat käyttäjille enemmän kontekstia yhdellä silmäyksellä.

Lisääminen ja sisäkkäin asettaminen​

AppNavItem-instansseja käytetään AppNav-rakenteen täyttämiseen. Nämä kirjentrykset voivat olla yksinkertaisia linkkejä tai sisäkkäisiä ryhmän otsikoita, jotka sisältävät lapsikirjentryksiä. Linkittömät ryhmän otsikot toimivat laajennettavina säiliöinä.

Käytä addItem()-metodia lisätäksesi kirjentryksiä valikkoon:

AppNavItem dashboard = new AppNavItem("Dashboard", "/dashboard");
AppNavItem admin = new AppNavItem("Admin");
admin.addItem(new AppNavItem("Users", "/admin/users"));
admin.addItem(new AppNavItem("Settings", "/admin/settings"));

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

Ylimmän tason kirjentrykset navigaatiohierarkiassa on yleensä tarkoitettu laajennettaviksi — eivät klikattaviksi linkeiksi. path-asetuksen antaminen tällaisille kirjentryksille voi hämmentää käyttäjiä, jotka odottavat, että niiden pitäisi paljastaa alakirjentryksiä sen sijaan, että navigoisivat muualle.

Jos haluat, että ryhmän otsikko käynnistää mukautetun toiminnon (kuten avata ulkoisia asiakirjoja), jätä ryhmän polku tyhjäksi ja lisää sen sijaan interaktiivinen ohjaus, kuten IconButton, kirjentryksen liitännäiseen. Tämä pitää käyttökokemuksen johdonmukaisena ja siistinä.

Näytä koodi

Kirjentryksien linkittäminen​

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

Staattiset polut​

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

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

Rekisteröidyt näkymät​

Jos näkymäsi on rekisteröity reitittimelle, voit välittää luokan kovakoodatun URL-osoitteen sijaan:

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

Jos anotettu reittisi tukee reitittämisen parametreja, voit myös välittää ParametersBag:in:

ParametersBag params = ParametersBag.of("id=123");
AppNavItem advanced = new AppNavItem("User", UserView.class, params);

Kyselyparametrien kanssa​

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

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

Kohdekäyttäytyminen​

Säädä, miten linkit avautuvat käyttämällä setTarget(). Tämä on erityisen hyödyllistä ulkoisten linkkien tai pop-out-näkymien kohdalla.

  • SELF (oletus): Avaa nykyisessä näkymässä.
  • BLANK: Avaa uudessa välilehdessä tai ikkunassa.
  • PARENT: Avaa vanhempaan selauskontekstiin.
  • TOP: Avaa huipputason selauskontekstiin.
AppNavItem help = new AppNavItem("Help", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Etuliite ja liite​

AppNavItem tukee etuliite- ja liitekomponentteja. Käytä näitä, jotta tarjoat visuaalista selkeyttä ikoneille, merkeille tai painikkeille.

  • Etuliite: ilmestyy ennen etikettiä, hyödyllinen ikoneille.
  • Liite: ilmestyy etikettin jälkeen, loistava merkeille tai toimille.
AppNavItem notifications = new AppNavItem("Alerts");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));

Automaattinen laajentaminen ryhmille​

Käytä setAutoOpen(true) AppNav -komponentissa laajentaaksesi automaattisesti sisäkkäiset ryhmät, kun sovellus käynnistetään uudelleen.

nav.setAutoOpen(true);

AppNavItem-komponentin tyylitys​

Loading...