AppNav

Avaa ChatGPT:ssä

Varjo dwc-app-nav dwc-app-nav-item 24.12

Java API

AppNav-komponentti luo sivuvalikon AppNavItem-kohdista. Kohteet voivat linkittää sisäisiin näkymiin tai ulkoisiin resursseihin, pesiytyä vanhempien kohteiden alle muodostaen hierarkkisia valikoita sekä sisältää ikoneita, merkkejä tai muita komponentteja, jotka antavat käyttäjille enemmän kontekstia yhdellä silmäyksellä.

Kohteiden lisääminen ja pesiminen

AppNavItem-instansseja käytetään AppNav-rakenteen täyttämiseen. Nämä kohteet voivat olla yksinkertaisia linkkejä tai pesityviä ryhmäotsikoita, jotka sisältävät lapsikohteita. Ryhmäotsikot ilman linkkejä toimivat laajennettavina säilytin.

Käytä addItem()-metodia lisätäksesi kohteita 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 kohteiden linkittäminen

Ylhäällä olevat kohteet navigointipuussa ovat tyypillisesti tarkoitettu laajennettaviksi – eivät klikattaviksi linkeiksi. path-asetuksen asettaminen tällaisille kohteille voi hämmentää käyttäjiä, jotka odottavat niiden paljastavan alikohteita sen sijaan, että navigoisivat muualle.

Jos haluat, että ryhmäotsikko laukaisee mukautetun toiminnon (kuten ulkoisten asiakirjojen avaamisen), pidä ryhmän polku tyhjänä ja lisää sen sijaan interaktiivinen ohjaus, kuten IconButton, kohteen liitteeksi. Tämä pitää käyttäjäkokemuksen johdonmukaisena ja siistinä.

Näytä koodi

Java

Kohteiden 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äkaluokkia.

Staattiset polut

Käytä merkkijonopolkuja määrittääksesi linkit 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 reitittimellä, voit siirtää luokan sijasta kovakoodattua URL-osoitetta:

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

Jos annotoitut reitit tukevat reitin parametreja, voit myös siirtää ParametersBag:in:

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

Kyselyparametrien kanssa

Siirrä ParametersBag sisältääksesi kyselymerkkijonot:

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

Kohteen käyttäytyminen

Hallitse, miten linkit avautuvat käyttämällä setTarget(). Tämä on erityisen hyödyllistä ulkoisille linkeille tai ponnahtaville näkymille.

• SELF (oletus): Avautuu nykyisessä näkymässä.
• BLANK: Avautuu uudessa välilehdessä tai ikkunassa.
• PARENT: Avautuu vanhemmassa selauskontekstissa.
• TOP: Avautuu ylimmällä selauskontekstissa.

AppNavItem help = new AppNavItem("Help", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Etuliite ja suffix

AppNavItem tukee etuliite- ja suffiksi-komponentteja. Käytä näitä antaaksesi visuaalista selkeyttä ikoneilla, merkeillä tai painikkeilla.

• Etuliite: ilmestyy ennen etikettiä, hyödyllinen ikoneille.
• Suffiksi: ilmestyy etikettiä jälkeen, loistava merkeille tai toiminnoille.

AppNavItem notifications = new AppNavItem("Alerts");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));

Ryhmien automaattinen avaus

Käytä setAutoOpen(true)-asetusta AppNav-komponentissa, jotta pesityt ryhmät avautuvat automaattisesti, kun sovellus käynnistetään uudelleen.

nav.setAutoOpen(true);

AppNavItem-komponentin muotoilu

Loading...