OrgChart

Komponent OrgChart spolu s OrgChartItem a OrgChartGroup slúžia na zobrazenie organizačnej štruktúry. OrgChart komponent môže byť použitý na zobrazenie hierarchických vzťahov medzi rôznymi entitami v organizácii.

Základné použitie

Ukážka predstavuje organizačný strom v jeho základnej podobe, aby bolo jasné, ako sa skladajú uzly a skupiny.

Vytvorenie org. štruktúry pomocou dát v JSON formáte

Pomocou JSON formátu môžete definovať uzly, ich vlastnosti a prepojenia medzi nimi. Tento prístup umožňuje dynamické generovanie organizačnej štruktúry na základe údajov z databázy alebo iných zdrojov.

Skupiny

Použitím elementu OrgChartGroup je možné zoskupiť viacero uzlov do jedného celku. Môžete ich použiť na zobrazenie tímov alebo oddelení v rámci organizačnej štruktúry.

Virtuálne uzly

Ak dátový model obsahuje entitu, ktorá má podriadené položky, ale nemá sa zobraziť ako samostatná karta, použite wje-orgchart-item virtual. Vnorený wje-orgchart môže mať atribút flat, aby nepridal ďalší vstupný spacing a deti ostali vizuálne na rovnakej úrovni. Tento vzor je vhodný napríklad pre oddelenia bez vedúceho, kde chcete zobraziť iba skupinu používateľov alebo pododdelenia.

<wje-orgchart-item virtual>
  <wje-orgchart slot="child" flat>
    <wje-orgchart-group title="Presales">
      <wje-orgchart-item>Oliver Ardo</wje-orgchart-item>
    </wje-orgchart-group>
  </wje-orgchart>
</wje-orgchart-item>

Line

Ukážka sa sústreďuje na spojnice medzi uzlami, takže je lepšie vidieť, ako strom komunikuje nadradenosť a vzťahy.

Controls

Ukážka pridáva ovládacie prvky na prácu so stromom, napríklad pri väčšom množstve uzlov alebo širšej štruktúre.

Kedy použiť

Použite wje-orgchart, 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

flat

Popis	Určuje, či je voľba flat zapnutá a ovplyvňuje správanie komponentu.
Atribút	flat
Typ	boolean
Predvolené	false

Udalosti

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

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS tieňové časti

Názov	Popis
``	Štýluje shadow časť časť.
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

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

Sloty

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