AppNav

Avaa ChatGPT:ssä

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

Java API

AppNav-komponentti luo sivuvalikon AppNavItem-merkkien avulla. Kohteet voivat linkittää sisäisiin näkymiin tai ulkoisiin resursseihin, olla vanhempikohteiden alla hierarkkisissa valikoissa ja sisältää ikoneita, merkkejä tai muita komponentteja antaakseen käyttäjille lisää kontekstia yhdellä silmäyksellä.

Lisääminen ja sisäkkäin asettaminen

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

Käytä addItem()-menetelmää 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

Ylimmät kohteet navigointipuussa on yleensä tarkoitettu laajennettaviksi—ei napsautettaviksi linkeiksi. path-asettaminen tällaisille kohteille voi hämmentää käyttäjiä, jotka odottavat niiden paljastavan alikohteita sen sijaan, että ne navigoivat muualle.

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

Näytä koodi

AppNavView.java

AppNavPageView.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äkymäluokkia.

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 reitittimelle, voit siirtää luokan kovakoodatun URL: n sijaan:

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

Jos merkitty reittisi tukee reitittäjiä, voit myös siirtää ParametersBag:n:

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

Kyselyparametrien kanssa

Siirrä ParametersBag sisällyttää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

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

• SELF (oletusarvo): Avataan nykyisessä näkymässä.
• BLANK: Avataan uudessa välilehdessä tai ikkunassa.
• PARENT: Avataan vanhemmassa selainkontekstissa.
• TOP: Avataan ylimmässä selainkontekstissa.

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

Etuliite ja jälkiliite

AppNavItem tukee etuliite- ja jälkiliitekomponentteja. Käytä näitä visuaalisen selkeyden tarjoamiseen ikoneilla, merkeillä tai painikkeilla.

• Etuliite: näkyy ennen merkintää, hyödyllinen ikoneille.
• Jälkiliite: näkyy merkinnän jälkeen, erinomainen merkeille tai toimille.

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

Ryhmien automaattinen avaaminen

Käytä setAutoOpen(true) AppNav-komponentissa automaattiseen sisäkkäisten ryhmien laajentamiseen, kun sovellus päivitetään.

nav.setAutoOpen(true);

Kiinnitys 26.01

Kiinnitys antaa käyttäjän nostaa eniten tavoittamansa kohteet ryhmään valikon yläosaan, jotta syvä valikko säilyttää lyhyen suosikkiluettelon yhdellä napsautuksella. Se on pois päältä oletuksena. Ota se käyttöön kiinnityskonfiguraation kautta:

AppNav nav = new AppNav();
nav.getPinning().setEnabled(true);

Kun se on otettu käyttöön, jokainen navigoitava lehtikohde näyttää kiinnitysvaihtoehdon. Vaihtoehto paljastuu hiiren yllä ja näppäimistön fokuksessa, joten se on saavutettavissa ilman hiirtä. Aktivointi siirtää kohteen kiinnitettyyn ryhmään valikon yläosassa.

Muutamia sääntöjä hallitsee, mitä voidaan kiinnittää ja miten ryhmä käyttäytyy:

• Vain navigoitavat lehtikohteet voivat olla kiinnitettyjä. Ryhmäotsikoita (kohteet, joilla on lapsia) ei koskaan voida kiinnittää.
• Kiinnitetty ryhmä näkyy vain, kun jotain on kiinnitetty, ja katoaa uudelleen, kun viimeinen kohde on poistettu kiinnityksestä.
• Kiinnityksen poistaminen palauttaa kohteen tarkalleen alkuperäiseen paikkaansa, mukaan lukien kohteet, jotka ovat sisäkkäin useilla tasoilla ryhmässä.
• Kohde siirretään, ei kopioidaan, joten kaikki etuliite- tai jälkiliiteasiat ja siihen liitetyt kuuntelijat toimivat, kun se istuu kiinnitetyssä ryhmässä.

Alla oleva demo on otettu käyttöön kiinnitys mukautetun ryhmän nimen kanssa ja Dashboard kiinnitettyä latauksen yhteydessä. Vie hiiri tai keskity lehtikohteeseen paljastaaksesi sen kiinnitysvalinnan.

Näytä koodi

AppNavPinningView.java

AppNavPinningPageView.java

Aloittaminen kiinnitettynä

Aloita kohde kiinnitetyssä ryhmässä asettamalla sen kiinnitys-tila. Käytä isPinned() lukeaksesi nykyinen tila.

AppNavItem reports = new AppNavItem("Reports", "/reports");
reports.setPinned(true);

Kiinnitys on otettava käyttöön

setPinned(true) tulee voimaan vain, kun kiinnitys on otettu käyttöön AppNav:ssa getPinning().setEnabled(true)-menetelmällä. Ilman sitä kutsu ei vaikuta.

Kiinnitetyn ryhmän nimi

Kiinnitetty ryhmä on oletusarvoisesti nimeltään Pinned. Voit vaihtaa sen sopivaksi sovelluksellesi:

nav.getPinning().setTitle("Favorites");

Kiinnitysavaimet

Jokaisella kiinnitettävällä kohteella on avain, joka tunnistaa sen pysyvyyden ja kiinnitys-tapahtuman varten. Kun et aseta yhtä, avain palautuu kohteen polkuun, joten getPinKey() palauttaa aina käyttökelpoisen arvon.

AppNavItem reports = new AppNavItem("Reports", "/reports");
reports.setPinKey("reports");

Aseta voimassa oleva avain, kun polku voi muuttua ajoituksen aikana. Vakaa avain pitää kiinnityksen oikean kohteen kohdalla latausten välillä, vaikka sen URL siirtyy.

Automatisoitu tallennus paikallisessa tallennuksessa

Kiinnitykset elävät vain nykyisessä sivunäkymässä, ellei niitä tallenneta. Automatisoitu tallennus on yksinkertaisin vaihtoehto: se tallentaa kiinnitettyjen kohteiden joukon selaimen paikalliseen tallennukseen ja palauttaa ne latauksen yhteydessä. Se on pois päältä oletuksena. Se tarvitsee vakaata id:tä (tai nimeä) komponentille tallennusavaimet varten, ja AppNav(String id)-konstruktori on kätevä tapa asettaa yksi:

AppNav nav = new AppNav("main-nav"); // antaa automatisoidulle tallennukselle vakaat tallennusavaimet
nav.getPinning().setAutosave(true);

Automatisoitu tallennus tarvitsee id:n

Ilman id:tä (tai nimeä) komponentilla, automatisoitu tallennus ei tee mitään, koska sillä ei ole vakaata avainta tallennettavaksi. Pysyvyys on selainkohtainen, joten kiinnitykset eivät seuraa käyttäjää toiseen laitteeseen tai selaimeen.

Mukautettu pysyvyys

Jos suoritat pysyvyyttä, jota hallitset itse, esimerkiksi käyttäjää palvelimella varten, ota automatisoitu tallennus pois päältä ja ohjaa se itse kiinnitys-tapahtuman ja setPinned-menetelmän avulla:

nav.getPinning().setAutosave(false);

// tallenna nykyiset kiinnitettyjen avainten joukko aina kun se muuttuu
nav.onPin(event -> savePins(event.getKeys()));

// latauksen aikana, palauta jokainen tallennettu avain
restoredKeys.forEach(key -> findItem(key).setPinned(true));

Reagointi kiinnityksen muutoksiin

Kiinnitys-tapahtuma laukaisee aina, kun kohde on kiinnitetty tai poistettu kiinnityksestä. Se kuljettaa muuttunutta kohdetta, sen avainta, uutta kiinnitystä ja koko järjestettyä kiinnitettyjen avainten joukkoa:

nav.onPin(event -> {
  AppNavItem item = event.getItem(); // muuttunut kohde, tai null, jos se ei enää ole navigaatiossa
  boolean pinned = event.isPinned();
  String key = event.getKey();
  List<String> all = event.getKeys(); // jokainen kiinnitetty avain, kiinnitetty järjestys
});

getItem() ratkaisee kohteen avainsuhteella, ja palauttaa null, kun kohde ei enää ole osa navigaatiota.

Kiinnitykselle tarkoitetut ikonit

Vaihtoehto hyödyntää sisäistä dwc:pin-ikonia, kun kohde on kiinnittämätön, ja dwc:pinned-off, kun se on kiinnitetty. Voit vaihtaa omasi käyttämällä setUnpinnedIcon ja setPinnedIcon, jotka hyväksyvät minkä tahansa IconDefinition-tyypin:

nav.getPinning()
   .setUnpinnedIcon(TablerIcon.create("pin"))
   .setPinnedIcon(TablerIcon.create("pinned-off"));

Kiinnitysohjaus kosketusnäytöillä

Kosketusnäytöissä ei ole hiiren yllä kiinnitysohjausta, joten valinta on oletuksena piilotettu. Pidä se näkyvissä ja napattavissa kosketusnäytöillä setTouchVisible(true)-menetelmällä:

nav.getPinning().setTouchVisible(true);

Haku 26.01

Hakukenttä suodattaa valikon kohteet merkinnän mukaan, kun käyttäjä kirjoittaa. Se on pois päältä oletuksena. Voit näyttää sen ja antaa sille paikkamerkin hakukonfiguraation kautta:

nav.getSearch().setFieldVisible(true);
nav.getSearch().setPlaceholder("Hae");

Kun käyttäjä kirjoittaa, valikko suodattaa kohteita merkin mukaan, avaa kaikki ryhmät, jotka sisältävät osumia, ja näyttää tyhjää viestiä, kun ei mitään vastaa. Kiinnitetyt pikakuvakkeet pysyvät näkyvissä hakemisen aikana, joten käyttäjän suosikit pysyvät yhdellä napsautuksella saatavilla jopa suodatettaessa.

Näytä koodi

AppNavSearchView.java

AppNavSearchPageView.java

Tyhjät viestit

Aseta viesti, joka näkyy, kun haku ei palauta tuloksia. Pelkkä teksti renderöidään tekstinä:

nav.getSearch().setEmptyMessage("Ei löytynyt kohteita");

Haku omasta kentästä

Piilota sisäänrakennettu kenttä ja syötä suodatin omasta syötteestäsi. Työnnä nykyinen termi sisään setTerm-menetelmällä:

nav.getSearch().setFieldVisible(false);

myField.onModify(event -> nav.getSearch().setTerm(event.getText()));

Reagoi siihen, mitä käyttäjä kirjoittaa sisäänrakennettuun kenttään, kuuntelemalla hakutapahtumaa:

nav.onSearch(event -> log(event.getTerm()));

Tyylitys AppNavItem

Loading...