Stromové zobrazení, pouze html a css |

Stromové zobrazení (sbalitelný seznam) lze vytvořit pouze pomocí html a css, bez použití JavaScriptu.

Software pro usnadnění přístupu zobrazí strom jako seznamy vnořené v rozbalovacích widgetech a interakce s klávesnicí je podporována automaticky.

HTML

HTML kód začíná jednoduchými vnořenými seznamy:

Vnitřek každého prvku seznamu obsahujícího jeho vnořený seznam je umístěn dovnitř prvku a přidán . Atribut open prvku bude použit ke správě vnořených prvků. Seznam nejvyšší úrovně je zpočátku rozbalen:

Bez CSS by to vypadalo takto:

I když nic uživateli neříká, že seznam lze rozbalit a odhalit tak nové úrovně, kombinace značek představuje matoucí uživatelské rozhraní, ale strom je již rozbalitelný. Prohlížeč implementuje prvek jako rozbalovací widget, který umožňuje rozbalit a sbalit vnořené seznamy.

Vlastnosti

Rozvržení stromového zobrazení ovlivňují dvě nastavení: řádkování (rovnající se výšce řádku textu) a poloměr značky. Začneme vytvořením vlastních vlastností CSS pro definování těchto rozměrů:

.strom

I když je běžné používat relativní jednotky pro škálování ovládacích prvků uživatelského rozhraní na základě velikosti textu, u značek to může vést k tomu, že ovládací prvky budou příliš malé nebo příliš velké. Proto zde bude použita rozumná pevná velikost 10 pixelů.

Odsazení

Hlavní a vnořené položky seznamu jsou nyní stylizovány tak, aby se vešel prostor pro řádky a odrážky:

.tree li .tree ul

Pro selektor .tree li odstraní vlastnost CSS display: block; odrážky z položek seznamu. vlastnost position: relative; vytvoří nový kontext bloku překrývání a obsahu, který bude použit k umístění řádků a odrážek.

padding-left přidá k položkám seznamu odsazení. Odsazení se rovná dvojnásobku mezery mínus poloměr značky mínus šířka čáry dva pixely. To způsobí, že text v položce seznamu bude zarovnán k levé straně značky pod ní.

U selektoru .tree ul bude vlastnost CSS margin-left kompenzovat odsazení selektoru .tree li a vlastnost padding-left resetuje odsazení, které prohlížeč ve výchozím nastavení nastavuje pro seznamy.

Pro stromové zobrazení s rozšířenými vnořenými seznamy výsledkem použití tohoto stylu je:

Vertikální čáry

Svislé čáry, které tvoří část čar spojujících jednotlivé značky položek seznamu se značkami vnořených seznamů:

.tree ul li < border-left : 2px solid #ddd; >.tree ul li:last-child

Vlastnost CSS border-left se používá pro svislé čáry, s výjimkou poslední položky v každém seznamu, kde je ohraničení skryté, protože čára by neměla přesahovat značku dané položky. Tím, že ohraničení zprůhledníte, a ne zcela jej odstraníte, se můžete vyhnout nutnosti zvětšovat odsazení pro kompenzaci zarovnání.

Použití tohoto stylu dává:

vodorovné čáry

Chcete-li přidat vodorovné čáry spojující svislé čáry s odrážkami každé položky seznamu, použijte vygenerovaný obsah:

.tree ul li::before< content : ''; display : block; position : absolute; top : calc(var(--spacing) / -2); left : -2px; width : calc(var(--spacing) + 2px); height : calc(var(--spacing) + 1px); border : solid #ddd; border-width : 0 0 2px 2px; >

Tento kód také vytváří krátké svislé čáry, protože dříve vytvořené svislé čáry nedosahují značek na jejich horním a dolním konci.

Zde se vytvoří blok a umístí se tak, aby začátek byl uprostřed předchozího řádku textu a překrýval svislou čáru nalevo od něj.

Rámeček by měl být o dva pixely širší než oddělovač, aby překrýval svislou čáru nalevo od něj, a o jeden pixel vyšší, protože polovina šířky vodorovné čáry je pod středem řádku textu. Poznámka: používá se box-sizing: border-box , takže velikosti zahrnují i okraj.

Použití tohoto stylu dává:

Souhrnný prvek HTML

Dále byste měli odstranit výchozí styl z HTML elementu summary:

.tree summary .tree summary::marker, .tree summary::-webkit-details-marker .tree summary:focus .tree summary:focus-visible

Zde budou značky šipek odstraněny a bude umístěn kurzor, který bude indikovat možnost interakce s prvkem – klikatelnost.

Safari zobrazuje indikátor fokusu kolem shrnutí, i když používáte myš namísto klávesnice. Zde tedy nejprve odstraníme styl fokusu a poté jej pomocí pseudotřídy :focus-visible znovu přidáme pro návštěvníky používající navigaci pomocí klávesnice.

Použití tohoto stylu dává:

Markery

Zde se vygenerovaný obsah opět použije k vytvoření značek:

.tree li::after, .tree summary::before< content : ''; display : block; position : absolute; top : calc(var(--spacing) / 2 - var(--radius)); left : calc(var(--spacing) - var(--radius) - 1px); width : calc(2 * var(--radius)); height : calc(2 * var(--radius)); border-radius : 50%; background : #ddd; >

Zde je vytvořen blok, jehož středem je průsečík vodorovné a svislé čáry. Horní strana se nachází uprostřed textového řádku mínus poloměr. Levá strana se nachází na okraji svislé čáry mínus poloměr mínus jeden pixel, což je polovina šířky čáry.

Použití tohoto stylu dává:

Tlačítka pro sbalení a rozbalení seznamu

Nakonec zbývá přidat tlačítka pro sbalení a rozbalení seznamů stromů:

.tree summary::before < obsah : '+'; z-index: 1; pozadí : #696; barva : #fff; výška řádku : calc(2 * var(--radius) - 2px); zarovnání textu: na střed; >.tree detaily[otevřít] > summary::before

Všimněte si, že se používá skutečné znaménko mínus (−), nikoli pomlčka (-). To odpovídá vzhledu znaménka plus, zatímco ve většině písem je pomlčka užší a nižší.

V závislosti na použitém písmu může být nutné upravit polohu znaků, například 2px pro vlastnost CSS line-height.

Použití tohoto stylu vede k hotovému stromovému zobrazení:

Připravený kód

.tree < --spacing : 1.5rem; --radius : 10px; >.tree li < display : block; pozice: relativní; padding-left : calc(2 * var(--spacing) - var(--radius) - 2px); >.tree ul < margin-left : calc(var(--radius) - var(--spacing)); padding-left : 0; >.tree ul li < border-left : 2px solid #ddd; >.tree ul li:last-child < border-color : transparent; >.tree ul li::before < content : ''; display: block; pozice: absolutní; top : calc(var(--spacing) / -2); left : -2px; šířka : calc(var(--spacing) + 2px); výška : calc(var(--spacing) + 1px); border : solid #ddd; border-width : 0 0 2px 2px; >.tree summary < display : block; cursor: pointer; >.tree summary::marker, .tree summary::-webkit-details-marker < display : none; >.tree summary:focus < outline : none; >.tree summary:focus-visible < outline : 1px dotted #000; >.tree li::after, .tree summary::before < content : ''; display: block; position: absolute; top : calc(var(--spacing) / 2 - var(--radius)); left : calc(var(--spacing) - var(--radius) - 1px); width : calc(2 * var(--radius)); height : calc(2 * var(--radius)); border-radius : 50%; background : #ddd; >.tree summary::before < obsah : '+'; z-index: 1; pozadí : #696; barva : #fff; výška řádku : calc(2 * var(--radius) - 2px); zarovnání textu: na střed; >.tree detaily[otevřít] > summary::before