Akordeony jsou jedním z nejpopulárnějších způsobů organizace informací a pomocí různých efektů můžeme ukázat, že informace v nich obsažené. Ty jsou již nějakou dobu na webu a můžeme je implementovat pomocí rámců, jako je jQuery, Bootstrap a dokonce i když se odvážíme postavit je s využitím pouze HTML5 Y CSS3.
Technologie se ale vyvíjejí rychle a přestože implementace akordeonu pomocí výše uvedených rámců je poměrně jednoduchá, stále existují metody, které tuto jednoduchost přesahují. Jedním z nich je udělat to s novým designovým jazykem s názvem Materiálové provedení a podporuje nás z rámce Zhmotnit pro to.
Akordeony v materiálovém provedení
Akordeony v Materiálové provedení Nejenže se snadno implementují, máme pro ně také několik funkcí, což nám dává mnohem širší škálu našich webových stránek, mezi nimi máme následující:
Akordeon
Je to klasika a umožňuje organizovat informace do bloků, které se při kliknutí na sebe sbalí, tyto jsou definovány třídou skládací harmonika.
Vyskočit
Typ harmoniky vyskočit přidat do oblíbené komponenty nový efekt a kombinovat klasickou funkcionalitu s mnohem propracovanějšími efekty zobrazení, které jsou definovány ve třídě skládací vyskakovací okno.
Rozbalitelné
Nakonec roztažitelné akordeony nebo rozbalitelný umožňuje otevřít více akordeonů současně, to znamená akordeon, který toto aktivum nezavře, pokud chceme vidět nějaký jiný, definovat tento typ akordeonů, atribut se používá datově sbalitelné typu rozšiřitelný.
Jakmile budeme vědět, jaké typy akordeonů můžeme implementovat, uděláme příklad, kde zahrneme tři typy na jednu stránku.
Implementace webových akordeonů
První věc, kterou musíte udělat, je zahrnout knihovny Zhmotnit, jak soubor .js, tak styly rámců, je důležité, abychom také propojili ikony, abychom je mohli použít v našem příkladu a aniž bychom zapomněli na nejnovější verzi jQuery před knihovnou JavaScript Zhmotnit:
Jakmile to bude hotové, vytvoříme strukturu tří kontejnerů pro každý akordeon, který implementujeme, prvním bude standardní akordeon a k jeho definování budeme muset vytvořit strukturu ul a li, kterou budeme identifikovat s odpovídající třídy:
Standardní akordeon s materiálovým designem
- filtr_dramaPrvní
Lorem ipsum bolest sedí.
- místoDruhý
Lorem ipsum bolest sedí.
- co je horkéTřetí
Lorem ipsum bolest sedí.
ZVĚTŠIT
Jak vidíme, vypadá to docela dobře a nemuseli jsme dělat nic složitého, nyní vytvoříme náš akordeon popoutového typu, a proto stačí přidat třídu skládací vyskakovací okno a zachovat strukturu předchozího příkladu s tím, že vytvoříme naše funkce, podívejme se na úryvek kódu:
Jak vidíme, vytvořili jsme extrémně výkonnou a vizuálně působivou funkčnost během několika minut, je jen na každém, aby si vzal příklad a přizpůsobil jej svým potřebám, aby vytvořil bohaté a užitečné funkce pro jakýkoli aktuální web nebo aplikaci.
akordeon_material_design.html 2,87 kB 170 stažení
