Stwórz akordeon za pomocą Material Design

Akordeon to jeden z najpopularniejszych sposobów porządkowania informacji, a następnie za pomocą różnych efektów możemy pokazać zawarte w nich informacje. Są już w sieci od jakiegoś czasu i możemy je zaimplementować za pomocą frameworków takich jak jQuery, Bootstrap a nawet jeśli odważymy się je zbudować, używając tylko HTML5 Tak CSS3.

Ale technologie ewoluują szybko i chociaż implementacja akordeonu przy użyciu wspomnianych frameworków jest dość prosta, wciąż istnieją metody, które wykraczają poza tę prostotę. Jednym z nich jest zrobienie tego za pomocą nowego języka projektowania o nazwie Wygląd materiału i wspierając nas z frameworka Zmaterializować dla tego.

Akordeon w Material Design
Akordeony w Wygląd materiału Są nie tylko łatwe do wdrożenia, ale także mamy dla nich kilka funkcjonalności, co daje nam znacznie większe urozmaicenie naszej strony internetowej, wśród nich mamy:

Akordeon
Jest to klasyczne i pozwala organizować informacje w bloki, które zwijają się jeden po drugim po kliknięciu na nie, są one zdefiniowane w klasie składany akordeon.

Popout
Wpisz akordeony wyskakuje dodać nowy efekt do popularnego komponentu i połączyć klasyczną funkcjonalność ze znacznie bardziej rozbudowanymi efektami wyświetlania, które są definiowane przez klasę składane wyskakujące okienko.

Możliwość rozbudowy
Wreszcie rozwijane akordeony lub rozwijalny pozwala na otwarcie wielu akordeonów jednocześnie, czyli akordeonu, którego ten zasób nie zamknie, jeśli chcemy zobaczyć inny, do zdefiniowania tego typu akordeonów używany jest atrybut dane-składane typu rozszerzalny.

Kiedy już wiemy, jakie typy akordeonów możemy zaimplementować, zrobimy przykład, w którym umieścimy te trzy typy na jednej stronie.

Wdrażanie akordeonów internetowych

Pierwszą rzeczą do zrobienia jest włączenie bibliotek Zmaterializować, zarówno pliku .js, jak i arkusza stylów frameworka, ważne jest, abyśmy również powiązali się z ikonami, aby móc z nich korzystać w naszym przykładzie i nie zapominając o najnowszej wersji jQuery przed biblioteką JavaScript z Zmaterializować:

Po wykonaniu tych czynności stworzymy strukturę trzech kontenerów dla każdego wdrażanego akordeonu, pierwszym będzie akordeon standardowy i aby go zdefiniować, będziemy musieli stworzyć strukturę ul i li, którą będziemy identyfikować z odpowiednie klasy:

Standardowy akordeon z Material Design

filtr_dramatNajpierw
Ból Lorem ipsum usiądzie z ulgą.

miejscedruga
Ból Lorem ipsum usiądzie z ulgą.

co jest na topieTrzeci
Ból Lorem ipsum usiądzie z ulgą.

Należy wspomnieć, że dla każdego elementu w akordeonie musimy zdefiniować klasy składany-nagłówek i składane-ciało, czyli tytuł i przesłanie każdego z nich, zobaczmy jak wygląda nasz pierwszy akordeon.

POWIĘKSZAĆ

Jak widać wygląda to całkiem nieźle i nie musieliśmy robić nic skomplikowanego, teraz stworzymy nasz akordeon typu popout, a do tego wystarczy dodać klasę składane wyskakujące okienko i zachowaj strukturę z poprzedniego przykładu, dzięki czemu stworzymy naszą funkcjonalność, zobaczmy fragment kodu do tego:

Wreszcie, aby stworzyć nasz rozszerzalny akordeon, musimy tylko dodać do dane-składane opcja rozszerzalny a jak robiliśmy wcześniej to utrzymaliśmy strukturę i już mielibyśmy swoją funkcjonalność:

Aby docenić działanie naszych akordeonów, zobaczmy, jak wyglądają poniżej.

Jak widać, stworzyliśmy niezwykle potężną i imponującą wizualnie funkcjonalność w zaledwie kilka minut, tylko każdy może wziąć przykład i dostosować go do swoich potrzeb, aby stworzyć bogate i przydatne funkcjonalności dla dowolnej aktualnej strony internetowej lub aplikacji.

akordeon_material_design.html 2,87 tys 170 pobrań