Skip to main content

Router

shadow

Komponent Router je nástroj určený na navigáciu v rámci webových aplikácií. Táto komponenta podporuje komplexné navigačné scenáre a lazy-load, čím zvyšuje výkon aplikácie a používateľský zážitok. Na to využíva ďalšie komponenty: Router Link, Router Outlet a Route.

Navyše sa bezproblémovo integruje s komponentmi WebJET Elements, čím umožňuje jednoduchú implementáciu navigácie vo vašom projekte.

Komponent wje-router má za úlohu spravovať všetky interakcie s históriou prehliadača a zoskupovať aktualizácie prostredníctvom systému udalostí a mal by sa nachádzať v štruktúre aplikácie iba raz.

wje-router is just a URL coordinator for the navigation outlets of ionic: wj-nav, wj-tabs, and wje-router-outlet.

That means the wje-router never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells wj-nav, wj-tabs, and wje-router-outlet what and when to "show" based on the browser's URL.

In order to configure this relationship between components (to load/select) and URLs, wje-router uses a declarative syntax using JSX/HTML to define a tree of routes.

Základné použitie​

Ukážka ukazuje najmenšie funkčné zapojenie routera, teda prechod medzi pohľadmi cez jeho predvolenú konfiguráciu.

Rozhrania​

RouterEventDetail​

interface RouterEventDetail {
  from: string | null;
  redirectedFrom: string | null;
  to: string;
}

RouterCustomEvent​

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with WebJET events emitted from this component.

interface RouterCustomEvent extends CustomEvent {
  detail: RouterEventDetail;
  target: HTMLElement;
}

Použitie​

<wje-router>
  <wje-route component="page-tabs">
    <wje-route url="/schedule" component="tab-schedule">
      <wje-route component="page-schedule"></wje-route>
      <wje-route url="/session/:sessionId" component="page-session"></wje-route>
    </wje-route>

    <wje-route url="/speakers" component="tab-speaker">
      <wje-route component="page-speaker-list"></wje-route>
      <wje-route url="/session/:sessionId" component="page-session"></wje-route>
      <wje-route url="/:speakerId" component="page-speaker-detail"></wje-route>
    </wje-route>

    <wje-route url="/map" component="page-map"></wje-route>
    <wje-route url="/about" component="page-about"></wje-route>
  </wje-route>

  <wje-route url="/tutorial" component="page-tutorial"></wje-route>
  <wje-route url="/login" component="page-login"></wje-route>
  <wje-route url="/account" component="page-account"></wje-route>
  <wje-route url="/signup" component="page-signup"></wje-route>
  <wje-route url="/support" component="page-support"></wje-route>
</wje-router>

Kedy použiť​

Použite wje-router, keď používateľ potrebuje orientáciu v aplikácii alebo prechod medzi stavmi/obrazovkami.

Kedy nepoužiť​

Nepoužívajte viac paralelných navigačných vzorov, ktoré si navzájom konkurujú.

Prístupnosť​

Zabezpečte jasné active/selected stavy, predvídateľné poradie tabulátora a pomenovanie ovládacích prvkov.

Odporúčané postupy​

  • Držte URL a UI stav v synchronizácii, aby bola navigácia reprodukovateľná.
  • Používajte konzistentné názvoslovie položiek naprieč menu, breadcrumbom a tabmi.
  • Pri hlbokých štruktúrach pridajte pomocný kontext (breadcrumb, nadpis, ikony).

Atribúty a vlastnosti​

Pre tento komponent nie sú dostupné žiadne vlastnosti.

Udalosti​

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy​

parseElement​

PopisSpustí metódu parseElement na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra(element: Element) => object

CSS tieňové časti​

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS vlastné premenné​

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty​

Pre tento komponent nie sú dostupné žiadne sloty.

Content