Akkordeon erstellen mit Material Design

Akkordeons sind eine der beliebtesten Möglichkeiten, Informationen zu organisieren und dann mit verschiedenen Effekten die darin enthaltenen Informationen anzuzeigen. Diese sind schon länger im Web und wir können sie mit Frameworks wie jQuery, Bootstrap und selbst wenn wir es wagen, sie nur zu bauen HTML5 Ja CSS3.

Aber die Technologien entwickeln sich schnell und obwohl die Implementierung eines Akkordeons mit den oben genannten Frameworks recht einfach ist, gibt es immer noch Methoden, die über diese Einfachheit hinausgehen. Eine davon ist die neue Designsprache namens Material Design und unterstützt uns aus dem Rahmen Materialisieren dafür.

Akkordeons im Materialdesign
Akkordeons in Material Design Sie sind nicht nur einfach zu implementieren, wir haben auch mehrere Funktionalitäten dafür, was uns eine viel größere Vielfalt für unsere Website ermöglicht, darunter die folgenden:

Akkordeon
Es ist der Klassiker und ermöglicht es, die Informationen in Blöcken zu organisieren, die beim Anklicken nacheinander zusammenklappen, diese werden mit der Klasse definiert zusammenklappbares Akkordeon.

Popout
Typ Akkordeons Popout fügen Sie der beliebten Komponente einen neuen Effekt hinzu und kombinieren Sie klassische Funktionalität mit viel aufwändigeren Anzeigeeffekten, diese werden mit der Klasse definiert zusammenklappbares Popout.

Erweiterbar
Endlich, das erweiterbare Akkordeons oder erweiterbar ermöglicht es, mehrere Akkordeons gleichzeitig zu öffnen, dh das Akkordeon wird nicht geschlossen, wenn wir ein anderes sehen möchten, um diese Art von Akkordeons zu definieren, wird das Attribut verwendet Daten-zusammenklappbar vom Typ erweiterbar.

Sobald wir wissen, welche Arten von Akkordeons wir implementieren können, werden wir ein Beispiel machen, in dem wir die drei Typen auf einer einzigen Seite einschließen.

Implementieren der Web-Akkordeons

Das erste, was Sie tun müssen, ist die Bibliotheken von Materialisieren, sowohl die .js-Datei als auch das Stylesheet des Frameworks, ist es wichtig, dass wir auch auf die Symbole verlinken, um sie in unserem Beispiel verwenden zu können und ohne die neueste Version von zu vergessen jQuery vor der JavaScript-Bibliothek von Materialisieren:

Sobald dies erledigt ist, erstellen wir für jedes von uns implementierte Akkordeon eine Struktur aus drei Containern. Der erste ist das Standard-Akkordeon und um es zu definieren, müssen wir eine Struktur aus ul und li erstellen, die wir mit entsprechende Klassen:

Standard Akkordeon mit Material Design

filter_dramaZuerst
Lorem ipsum Schmerzen sitzen amet.

PlatzZweite
Lorem ipsum Schmerzen sitzen amet.

WhatshotDritte
Lorem ipsum Schmerzen sitzen amet.

Es ist wichtig zu erwähnen, dass wir für jedes Element innerhalb des Akkordeons die Klassen von definieren müssen zusammenklappbarer Header und das zusammenklappbarer Körper, das heißt der Titel und die Botschaft von jedem, mal sehen, wie unser erstes Akkordeon aussieht.

VERGRÖSSERN

Wie wir sehen, sieht es ziemlich gut aus und wir mussten nichts Kompliziertes machen, jetzt werden wir unser Popout-Akkordeon erstellen, und dafür müssen wir nur die Klasse hinzufügen zusammenklappbares Popout und behalten Sie die Struktur des vorherigen Beispiels bei, mit der wir unsere Funktionalität erstellen werden, sehen wir uns den Codeausschnitt dafür an:

Um unser erweiterbares Akkordeon zu erstellen, müssen wir nur noch etwas hinzufügen Daten-zusammenklappbar die Option erweiterbar und wie wir es vorher gemacht haben, behalten wir die Struktur bei und wir hätten bereits unsere Funktionalität:

Um zu verstehen, wie unsere Akkordeons funktionieren, sehen wir uns unten an, wie sie aussehen.

Wie wir sehen, haben wir in nur wenigen Minuten eine äußerst leistungsstarke und optisch beeindruckende Funktionalität geschaffen, es liegt nur an jedem, das Beispiel zu nehmen und es an seine Bedürfnisse anzupassen, um reichhaltige und nützliche Funktionen für jede aktuelle Website oder Anwendung zu erstellen.

akkordeon_material_design.html 2.87K 170 Downloads