AppNav
AppNav-komponentti luo sivupalkin navigointivalikon AppNavItem-kohdista. Kohteet voivat linkittää sisäisiin näkymiin tai ulkoisiin resursseihin, pesiytyä parenttikohtien alle muodostamaan hierarkkisia valikoita ja sisältää ikoneita, merkkejä tai muita komponentteja, jotka antavat käyttäjille enemmän kontekstia hetkessä.
Kohteiden lisääminen ja pesittäminen dwc-app-nav-item
AppNavItem-instansseja käytetään AppNav-rakenteen täyttämiseen. Nämä kohteet voivat olla yksinkertaisia linkkejä tai pesittyjä ryhmäotsikoita, jotka sisältävät lapsikohteita. Ryhmäotsikot ilman linkkejä toimivat laajennettavina säiliöinä.
Käytä addItem()-metodia lisätäksesi kohteita navigointiin:
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);
Ylin tason kohteet navigointipuussa tarkoitetaan tyypillisesti laajennettaviksi - eivät napsautettaviksi linkeiksi. Tällaiselle kohteelle path-asetuksen määrittäminen voi hämmentää käyttäjiä, jotka odottavat niiden avaavan alakohtia sen sijaan, että navigoivat muualle.
Jos haluat ryhmäotsikon laukaisevan mukautetun toiminnan (kuten avata ulkoiset asiakirjat), 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ä.
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äkökuntosia.
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 välittää luokan sen sijaan, että käyttäisit kovakoodattua URL-osoitetta:
AppNavItem settings = new AppNavItem("Settings", SettingsView.class);
Jos merkitty reittisi tukee reittiparametreja, voit myös välittää ParametersBag-objektin:
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¶m2=value2");
AppNavItem advanced = new AppNavItem("Advanced", SettingsView.class, params);
advanced.setQueryParameters(params);
Kohteiden käyttäytyminen
Säädä, miten linkit avautuvat käyttämällä setTarget(). Tämä on erityisen hyödyllistä ulkoisten linkkien tai erikoisnäkymien kohdalla.
SELF(oletus): Avaa nykyisessä näkymässä.BLANK: Avaa uudessa välilehdessä tai ikkunassa.PARENT: Avaa vanhempaan selailukontekstiin.TOP: Avaa ylimmän tason selailukontekstiin.
AppNavItem help = new AppNavItem("Help", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);
Prefiksi ja suffiksi
AppNavItem tukee prefiksi- ja suffiksi-komponentteja. Käytä näitä antaaksesi visuaalista selkeyttä ikoneilla, merkeillä tai painikkeilla.
- Prefiksi: näkyy ennen etikettiä, hyvä ikoneille.
- Suffiksi: näkyy etikettiä jälkeen, loistava merkeille tai toiminnoille.
AppNavItem notifications = new AppNavItem("Alerts");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));
Automaattisesti avautuvat ryhmät
Käytä setAutoOpen(true) AppNav-komponentissa laajentaaksesi automaattisesti pesittyjä ryhmiä, kun sovellus käynnistetään uudelleen.
nav.setAutoOpen(true);
Osion etiketit 26.02 dwc-app-nav-label
AppNavLabel on ei-interaktiivinen otsikko, joka nimeää joukon kohteita. Otsikko koskee jokaista sitä seuraavaa kohdetta, seuraavaan otsikkoon tai valikon loppuun asti, mikä mahdollistaa pitkän luettelon ylimmän tason kohteita lukea muutamaksi nimettyyn ryhmään ilman niiden pesittämistä.
Otsikoita lisätään add()-menetelmällä eikä addItem()-menetelmällä, ja kutsujen järjestys määrittelee osiot:
AppNav nav = new AppNav();
nav.addItem(new AppNavItem("Dashboard", DashboardView.class, TablerIcon.create("layout-dashboard")));
nav.add(new AppNavLabel("Analytics"));
nav.addItem(new AppNavItem("Overview", OverviewView.class));
nav.addItem(new AppNavItem("Reports", ReportsView.class));
nav.add(new AppNavLabel("Other"));
nav.addItem(new AppNavItem("Settings", SettingsView.class));
Valikko piilottaa automaattisesti otsikon, kun sen osiossa ei ole näkyviä kohteita, joten otsikko katoaa, kun haku suodattaa kohteita tai kun kaikki niistä on kiinnitetty valikon ylle.
Otsikon prefiksi ja suffiksi
Kuten AppNavItem, otsikko tukee prefiksi- ja suffiksikomponentteja. Anna prefiksi konstruktorille tai aseta jompikumpi myöhemmin:
AppNavLabel analytics = new AppNavLabel("Analytics", TablerIcon.create("chart-pie"));
analytics.setSuffixComponent(new Badge().setText("2").setTheme(BadgeTheme.WARNING));
nav.add(analytics);
Esimerkki alla ryhmittää valikon kolmen otsikon alle, joista ensimmäinen sisältää Icon prefiksin ja Badge suffiksin. Dashboard sijaitsee ensimmäisen otsikon yllä, joten se ei kuulu mihinkään osioon.
Kiinnittäminen 26.01
Kiinnitys mahdollistaa käyttäjän nostaa eniten tavoitetut kohteet ryhmään navigoinnin yläosaan, jotta syvä valikko säilyttää lyhyen suosikkilistan yhden napsautuksen päässä. Se on oletuksena pois päältä. Ota se käyttöön pinnoitusasetusten kautta:
AppNav nav = new AppNav();
nav.getPinning().setEnabled(true);
Kun se on käytössä, jokaisessa navigoitavassa lehtikohteessa on pin-nappi. Nappi ilmestyy hoveriin ja näppäimistön keskittymiseen, joten se pysyy saavutettavissa ilman hiirtä. Sen aktivoiminen siirtää kohteen kiinnitettyyn ryhmään valikon ylle.
Muutama sääntö ohjaa, mitä voidaan kiinnittää ja kuinka ryhmä käyttäytyy:
- Vain navigoitavat lehtikohteet ovat kiinnitettäviä. Ryhmäotsikoita (kohteet, joilla on lapsia) ei koskaan voida kiinnittää.
- Kiinnitetty ryhmä näkyy vain, kun jotain on kiinnitetty, ja katoaa, kun viimeinen kohde on irrotettu.
- Irrottaminen palauttaa kohteen sen tarkkaan alkuperäiseen paikkaan, mukaan lukien kohteet, jotka on pesitetty useita tasoja syvälle ryhmiin.
- Kohde siirretään, ei kopioida, joten kaikki prefiksit tai suffiksit sekä niihin liitetyt kuuntelijat toimivat, kun se on kiinnitetty ryhmään.
Alla oleva demo on aktivoitu kiinnitys mukautetulla ryhmän nimellä ja Dashboard kiinnitettynä latauksen yhteydessä. Hoveroi tai keskity lehden kohteeseen paljastaaksesi sen pin-napin.
Kohteen aloittaminen kiinnitettynä
Aloita kohde kiinnitettynä asettamalla sen kiinnitetty tila. Käytä isPinned() lukeaksesi nykyinen tila.
AppNavItem reports = new AppNavItem("Reports", "/reports");
reports.setPinned(true);
setPinned(true) -asetus vaikuttaa vain, kun kiinnitys on käytössä AppNav-komponentissa getPinning().setEnabled(true) -kutsulla. Ilman sitä kutsu ei vaikuta mihinkään.
Kiinnitetyn ryhmän nimi
Kiinnitetty ryhmä on oletuksena nimeltään Pinned. Muuta se sopimaan sovellukseesi:
nav.getPinning().setTitle("Favorites");
Kiinnitysnäppäimet
Jokaisella kiinnitettävällä kohteella on avain, joka tunnistaa sen pysyvyyttä varten sekä kiinnitystapahtumaa varten. Kun et aseta yhtä, avain palaa kohteen polkuun, joten getPinKey() palauttaa aina käyttökelpoisen arvon.
AppNavItem reports = new AppNavItem("Reports", "/reports");
reports.setPinKey("reports");
Aseta nimenomainen avain, kun polku voi muuttua ajoittain. Vakaa avain pitää kiinnityksen oikean kohteen mukana latauksilla, vaikka URL muuttuu.
Automaattinen tallennus paikalliseen tallennustilaan
Kiinnitykset elävät vain nykyisessä sivun näkymässä, ellet tallenna niitä. Automaattinen tallennus on yksinkertaisin vaihtoehto: se tallentaa kiinnitettyjen kohteiden joukon selainikkunan paikalliseen tallennustilaan ja palauttaa ne latauksen yhteydessä. Se on oletuksena pois päältä. Se tarvitsee vakaan id:n (tai nimen) komponentille tallennusavaimeksi, ja AppNav(String id) -konstruktorilla on kätevä tapa asettaa yksi:
AppNav nav = new AppNav("main-nav"); // antaa automaattiselle tallennukselle vakaan tallennusavaimen
nav.getPinning().setAutosave(true);
Ilman id:tä (tai nimeä) komponentissa, automaattinen tallennus ei tee mitään hiljaa, koska sillä ei ole vakaata avainta tallentamiseksi. Pysyvyyttä on per selain, joten kiinnitykset eivät seuraa käyttäjää toiseen laitteeseen tai selaimeen.
Mukautettu pysyvyys
Jos haluat toteuttaa pysyvyyttä itse, esimerkiksi käyttäjän mukaan palvelimella, kytke automaattinen tallennus pois päältä ja ohjaa sitä itse kiinnitystapahtuman ja setPinned-menetelmän avulla:
nav.getPinning().setAutosave(false);
// tallenna nykyinen kiinnitettyjen avaimien joukko aina, kun se muuttuu
nav.onPin(event -> savePins(event.getKeys()));
// latauksen yhteydessä palauta jokainen tallennettu avain
restoredKeys.forEach(key -> findItem(key).setPinned(true));
Reaktiot kiinnitysmuutoksiin
Kiinnitystapahtuma laukaisee aina, kun kohde on kiinnitetty tai irrotettu. Se sisältää muuttuneen kohteen, sen avaimen, uuden kiinnitettävän tilan ja koko järjestyksen kiinnitettyjen avaimien joukossa:
nav.onPin(event -> {
AppNavItem item = event.getItem(); // muuttunut kohde, tai null, jos se ei ole enää navigaatiossa
boolean pinned = event.isPinned();
String key = event.getKey();
List<String> all = event.getKeys(); // jokainen kiinnitetty avain kiinnitettynä järjestyksessä
});
getItem() ratkaisee kohteen vastaamalla sen kiinnitysavaimen kanssa ja palauttaa null, kun kohde ei enää ole osa navigointia.
Kiinnityssymbolit
Vaihtoehto käyttää sisäänrakennettua dwc:pin-ikonia, kun kohde on kiinnittämätön, ja dwc:pinned-off, kun se on kiinnitetty. Vaihda omasi setUnpinnedIcon ja setPinnedIcon -menetelmien avulla, jotka hyväksyvät minkä tahansa IconDefinition-tyypin:
nav.getPinning()
.setUnpinnedIcon(TablerIcon.create("pin"))
.setPinnedIcon(TablerIcon.create("pinned-off"));
Kiinnitysnappi kosketusnäytöillä
Kosketusnäytöillä ei ole hover-tilaa paljastaakseen kiinnityksen, joten napsautus on oletuksena piilotettu. Pidä se näkyvissä ja napautettavana kosketusnäytöillä asettamalla setTouchVisible(true):
nav.getPinning().setTouchVisible(true);
Haku 26.01
Hakukenttä suodattaa valikon kohteet etiketin mukaan käyttäjän kirjoittaessa. Se on oletuksena pois päältä. Voit näyttää sen ja antaa sille paikan hakukonfiguraation kautta:
nav.getSearch().setFieldVisible(true);
nav.getSearch().setPlaceholder("Hae");
Kun käyttäjä kirjoittaa, navigointi suodattaa kohteita etiketin mukaan, avaa ryhmät, jotka sisältävät osuman, ja näyttää tyhjät viestit, kun mitään ei löydy. Kiinnitetyt pikakuvakkeet pysyvät näkyvissä haun aikana, joten käyttäjän suosikit ovat yhden napsautuksen päässä, jopa filtrausprosessin aikana.
Tyhjät viestit
Aseta viesti, joka näkyy, kun haku ei palauta tuloksia. Pelkkä teksti renderöidään tekstinä:
nav.getSearch().setEmptyMessage("Ei kohteita löytynyt");
Haku omasta kentästäsi
Piilota sisäänrakennettu kenttä ja syötä suodatus omasta syötteestäsi. Työnnä nykyinen termi setTerm-menetelmällä:
nav.getSearch().setFieldVisible(false);
myField.onModify(event -> nav.getSearch().setTerm(event.getText()));
Kun reagoit, mitä käyttäjä kirjoittaa sisäänrakennettuun kenttään, kuuntele hakutapahtumaa:
nav.onSearch(event -> log(event.getTerm()));
