Pro srovnání

Původní návrh

Native HTML Elements

Tato stránka používá pouze nativní HTML elementy bez knihovny free-astro-components. Porovnejte s ostatními variantami.

Tlačítka

Nativní HTML button elementy

<button class="btn-primary">
  Primární akce
</button>

<button class="btn-secondary">
  Sekundární akce
</button>

<button class="btn-ghost">
  Ghost akce
</button>

Nativní HTML input, select, textarea

Nativní HTML details/summary

Jak funguje nativní accordion?

Nativní HTML accordion používá elementy <details> a <summary>. Funguje bez JavaScriptu a je plně přístupný.

Jaké jsou výhody nativního řešení?

Žádné závislosti, menší velikost bundle, lepší přístupnost, funguje i bez JS. Nevýhodou je omezená kontrola nad animacemi.

Kdy použít knihovnu komponent?

Knihovna jako free-astro-components nabízí konzistentní styling, více variant, lepší animace a snadnější customizaci přes CSS variables.

Custom JavaScript tabs

Toto je obsah prvního tabu. Nativní taby vyžadují JavaScript pro přepínání.

Zde je obsah druhého tabu. Můžete zde zobrazit cokoliv.

A toto je třetí tab s vlastním obsahem.

Nativní HTML dialog element

Nativní HTML s CSS styling

Nativní elementy jsou rychlejší, protože nevyžadují dodatečný JavaScript.

Sémantické HTML je lépe čitelné pro screen readery.

Méně závislostí znamená jednodušší údržbu projektu.

Vlastnost	Nativní HTML	free-astro-components
Bundle size	Minimální	+~15 kB
Customizace	Ruční CSS	CSS Variables
Konzistence	Musíte zajistit sami	Automatická
Animace	Omezené	Vestavěné
Varianty	Ruční implementace	Připravené (bordered, splitted...)
Závislosti	Žádné	1 balíček

Verze s free-astro-components:

Původní verze (Native HTML):