Advertisement
  1. Web Design
  2. Dashboard

Erstellung eines Admin-Dashboard-Layouts mit CSS und einem Hauch von JavaScript

by
Read Time:20 minsLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

In diesem neuen Tutorial erstellen wir ein responsives Admin-Dashboard-Layout mit CSS und einem Hauch von JavaScript. Um es zu erstellen, leihen wir uns einige Ideen aus dem WordPress-Dashboard aus, z. B. das ausklappbare Seitenleistenmenü.

Während des gesamten Tutorials stehen wir vor zahlreichen Herausforderungen, die uns jedoch gute Praktiken zur Verbesserung unserer Front-End-Fähigkeiten bieten.

Schauen wir uns ohne weiteres die endgültige Demo des Admin-Dashboards an (klicken Sie auf die Schaltfläche Reduzieren/Collapse am Fuß der Seitenleiste, um das zusammenklappbare Navigationsgerät in Aktion zu sehen, und sehen Sie sich die Vollbildversion an, um mit ihrer Reaktionsfähigkeit zu spielen):

1. Beginnen Sie mit dem Seiten-Markup

Zum Starten des Markups benötigen wir eine SVG, einen Header und einen Abschnitt:

SVG Sprites

Wie Sie sich bei jedem Admin-Dashboard vorstellen können, benötigen wir eine Reihe von Symbolen. Zum Glück bietet Envato Elements eine ständig wachsende Sammlung nützlicher Vektorsymbole. Nutzen Sie also diese Bibliothek und laden Sie diese Handels- und Dashboard-Symbole herunter.

Trade and Dashboard IconsTrade and Dashboard IconsTrade and Dashboard Icons
Handels- und Dashboard-Symbole auf Envato-Elementen

Anstatt sie über ein img- oder svg-Tag direkt in die Seite aufzunehmen, gehen wir noch einen Schritt weiter und erstellen ein SVG-Sprite. Dazu verpacken wir alle Symbole in einen SVG-Container. Der Container sollte ausgeblendet sein, daher wenden wir die display: none. Wenn wir es nicht ausblenden, wird oben auf der Seite ein großer leerer Bereich angezeigt.

Jedes Symbol wird in einem symbol-Element mit einer eindeutigen ID und einem viewBox-Attribut platziert, das von der Symbolgröße abhängt. Wir können das Zielsymbol dann jederzeit rendern, indem wir das use-Element aufrufen (ich zeige Ihnen in einer Minute, wie es geht).

Machen wir uns zunächst mit dem für das SVG-Sprite erforderlichen Markup vertraut:

Und das ist wirklich alles, was wir brauchen, um unser Inline-SVG-Sprite zu erstellen.

Header

Schauen wir uns den Seitenkopf an, um mit unserem Admin-Dashboard-Layout fortzufahren.

Darin definieren wir ein nav-Element, das als Wrapper für die folgenden Elemente dient:

  • Das Logo
  • Die Schaltfläche Reduzieren, mit der das Menü auf mobilen Bildschirmen umgeschaltet wird
  • Das Menü selbst, das die Menüverknüpfungen, zwei Überschriften und die Schaltfläche zum Reduzieren / Erweitern enthält. Es mag semantisch korrekter sein, zwei einzelne Menüs zu haben und die Überschriften außerhalb davon zu platzieren, aber Sie können die Dinge anders angehen, wenn Sie es vorziehen.

So sieht es auf Breitbildschirmen aus (>767px):

The header layout

Die Header-Struktur:

Beachten Sie zwei Dinge im obigen Code:

  • Wie wir das use-Element verwenden, um auf die Zielsymbole zu verweisen.
  • Die ARIA-Attribute (aria-expandedaria-labelaria-hidden), die wir den Umschalttasten hinzufügen. Diese Attribute helfen uns, die Komponente etwas zugänglicher zu machen. Später werden wir diskutieren, wie ihre Werte basierend auf dem Status der Schaltfläche aktualisiert werden.

Abschnitt

Der Abschnitt hat zwei verschachtelte Abschnitte.

Abschnitt 1

Im ersten Abschnitt platzieren wir das Suchformular und einige Informationen (Name, Avatar und Benachrichtigungen) über den aktuell angemeldeten Benutzer.

Hier ist sein Erscheinungsbild auf Breitbildschirmen (>767px):

The layout of the first sectionThe layout of the first sectionThe layout of the first section

Die Abschnittsstruktur:

Beachten Sie erneut, dass wir der Schaltfläche "Senden" einige ARIA-Attribute hinzufügen.

Sektion 2

Im zweiten Abschnitt platzieren wir eine Reihe von Platzhaltern für Artikel, um die Demo mit Dummy-Inhalten zu bereichern. Sie können normalerweise tabellarische Daten, Diagramme oder Feeds enthalten.

"Verwenden Sie maximal 5 bis 7 verschiedene Widgets, um eine Ansicht zu erstellen. Andernfalls fällt es einem Benutzer schwer, sich zu konzentrieren und sich einen klaren Überblick zu verschaffen." -

Taras Bakusevych

Hier ist sein Erscheinungsbild auf Breitbildschirmen (>767px):

The layout of the second sectionThe layout of the second sectionThe layout of the second section
In Übereinstimmung mit den Best Practices von UX benötigen Sie möglicherweise nicht so viele Abschnitte

Die Abschnittsstruktur:

2. Definieren Sie einige grundlegende Stile

Nachdem das Markup für unser Admin-Dashboard fertig ist, werden wir mit dem CSS fortfahren. Der erste Schritt besteht wie immer darin, einige CSS-Variablen und allgemeine Rücksetzstile anzugeben:

Hinweis: Der Einfachheit halber werde ich nicht alle CSS-Regeln im Lernprogramm durchgehen. Hier gibt es fast 400 Zeilen CSS. Wenn Sie möchten, können Sie alle überprüfen, indem Sie auf die Registerkarte CSS des Demo-Projekts klicken.

3. Eine Definierung von den Haupt-Dashboard-Stilen

An diesem Punkt können wir uns auf die Seitenstile konzentrieren.

Gestalten Sie den Header

Der Header ist ein Element mit fester Position. Die Breite beträgt 220 Pixel und die Höhe entspricht der Höhe des Ansichtsfensters. Falls der Inhalt die Höhe des Ansichtsfensters überschreitet, wird eine vertikale Bildlaufleiste angezeigt.

Das nav-Element verhält sich wie ein Flex-Container mit einer Mindesthöhe von 100%. Denken Sie daran, dass seine direkten Kinder drei sind:

  1. das Logo,
  2. die Umschalttaste für das mobile Menü,
  3. und das Menü.

Die Umschalttaste ist nur auf kleinen Bildschirmen (<768px) sichtbar. Hier sind die Stile, die wir brauchen:

Tipp: Wenn Sie einen absolut positionierten Header bevorzugen, der die gesamte Seitenhöhe abdeckt, fügen Sie die folgenden Stile hinzu:

Menüstile

Das Menü dient als Flex-Container, und wir geben ihm flex:1, damit es die gesamte übergeordnete Höhe erweitert und abdeckt.

Der letzte Menüpunkt erhält einen margin-top: auto, da er ganz unten im Menü positioniert werden soll. Dieses Verhalten wird deutlicher, wenn die Kopfzeilen-Bildlaufleiste nicht angezeigt wird. Versuchen Sie zum Testen, einige Menüelemente zu entfernen, oder überprüfen Sie die Demo auf einem großen Bildschirm.

Die Links und die Schaltfläche im Menü fungieren auch als Flex-Container, und ihr Inhalt (Text und Symbole) sollte vertikal ausgerichtet sein.

Die Menüüberschriften sind im Vergleich zu den anderen Menüelementen etwas kleiner. Außerdem erhöhen wir den Abstand zwischen den Zeichen.

Hier ist ein Teil der Menüstile:

Seiteninhaltsstile

Denken Sie daran, dass der Abschnitt mit dem .page-content zwei Unterabschnitte enthält.

Dieser Abschnitt wird 220 Pixel von der linken Seite des Ansichtsfensters entfernt platziert. Außerdem geben wir ihm die width: calc(100% - 220px). Beachten Sie, dass der Wert der left Eigenschaft der Headerbreite entspricht.

Seine Stile:

Such- und Benutzerstile

Denken Sie auch daran, dass der Abschnitt .search-and-user zwei Elemente enthält: das Suchformular und das .admin-profile.

Zum Erstellen verwenden wir CSS Grid. Das Suchformular deckt den gesamten verfügbaren Speicherplatz ab und es besteht eine Lücke von 50 Pixel zwischen dem Formular und seinem Geschwister. Beide Geschwister werden vertikal ausgerichtet.

Der Senden-Button im Formular ist absolut positioniert. Es enthält nur ein dekoratives Symbol. Daher benötigen wir ein ARIA-Attribut, damit Bildschirmleser es interpretieren und dadurch zugänglich machen können.

Das .admin-profile, das zwei Elemente enthält, verhält sich wie ein Flex-Container mit vertikal zentriertem Inhalt. Das Ausweiselement (Zählerelement) wird mit horizontal und vertikal zentriertem Inhalt absolut in seinem übergeordneten Element positioniert.

Hier ist ein Teil der erforderlichen Stile für diesen Abschnitt:

Rasterstile

Um die Artikel in unserem Admin-Dashboard zu gestalten, nutzen wir das CSS-Raster. Wir geben allen Artikeln eine feste Höhe von 300px. Abgesehen von den ersten und letzten Artikeln, die die gesamte übergeordnete Breite abdecken, sind alle anderen Artikel Teil eines zweispaltigen Layouts.

Die zugehörigen Stile:

4. Header umschalten

Jedes Mal, wenn wir auf die Schaltfläche zum Reduzieren / Erweitern klicken, ändert sich der Header-Status. Wenn es erweitert wird, wird es reduziert (wobei nur Symbolvarianten der Menüelemente übrig bleiben) und umgekehrt.

The expandcollapsed state of the header

Beachten Sie, dass diese Funktionalität nur auf Bildschirmen mit mehr als 767 Pixel verfügbar ist. Bei kleineren Bildschirmen hat unser Header ein anderes Layout, auf das wir in Kürze eingehen werden.

Während des reduzierten Zustands des Headers erhält der Body die collapsed Klasse. Zu diesem Zeitpunkt passieren folgende Dinge:

  • Der Header wird verkleinert. Die Breite ändert sich von 220px auf 40px.
  • Als Reaktion darauf wächst der Abschnitt mit dem .page-content. Insbesondere ändert sich seine Breite von width: calc (100% - 220px) zu width: calc (100% - 40px). Außerdem wird der Wert der left Eigenschaft 40px anstelle von 220px.
  • Das Logo, die Menüüberschriften, der Text der Menüverknüpfungen und der Text der Menüschaltfläche verschwinden.
  • Die aria-expanded und aria-label-Attributwerte der Umschalttaste werden aktualisiert. Außerdem wird das Symbol um 180 Grad gedreht, sodass es wie ein Erweiterungssymbol aussieht.

Hier ist der JavaScript-Code, der diese Funktionalität implementiert:

Und alle dazugehörigen Stile:

5. Tooltip für Admin-Menüelemente anzeigen

Gehen wir jetzt noch einen Schritt weiter und fügen dem reduzierbaren Header eine weitere neue Funktion hinzu.

Wie bereits im vorherigen Abschnitt erläutert, verschwindet der Text der Menüverknüpfungen, wenn die Kopfzeile reduziert wird. Dies bedeutet, dass zu diesem Zeitpunkt nur die SVG-Symbole sichtbar sind. Zeigen wir also einen Tooltip an, mit dem Benutzer besser verstehen, was die einzelnen Links tun.

Zu diesem Zweck fügen wir jedes Mal, wenn Sie mit der Maus über einen Menülink (Symbol) fahren, das title-Attribut hinzu, wobei der Wert der Klartext ist. Dies sollte jedoch nur dann geschehen, wenn der Header reduziert ist und die Fensterbreite mindestens 768 Pixel beträgt.

Tooltip

Hier ist das entsprechende JavaScript:

6. Responsive werden

Auf Bildschirmen mit einer Breite von bis zu 767 Pixel sieht unsere Seite folgendermaßen aus:

The mobile layoutThe mobile layoutThe mobile layout

Das ist ein großer Unterschied zu unserer Seitenleistenanordnung, oder? Lassen Sie uns die wichtigsten Unterschiede zur Desktop-Version hervorheben:

  • Sowohl der Header- als auch der .page-content haben die position: static und die width: 100%.
  • Die Flexrichtung des nav-Elements ändert sich von column zu row.
  • Die Umschalttaste für das mobile Menü wird sichtbar.
  • Das Menü befindet sich absolut direkt unter der Kopfzeile und ist zunächst ausgeblendet. Es wird jedes Mal sichtbar, wenn wir auf die Umschalttaste klicken.
  • Die Schaltfläche zum Reduzieren/Erweitern und das Element .greeting sind ausgeblendet.
  • Der .search-and-user ist absolut positioniert und befindet sich direkt neben der Umschalttaste für das mobile Menü.

Unten sehen Sie einen Teil der Reaktionsstile:

7. Mobiles Menü umschalten

Jedes Mal, wenn wir auf die Umschalttaste klicken, ändert sich der Menüstatus. Wenn es erweitert wird, wird es zusammenbrechen und umgekehrt.

The opened state of the mobile menu

Während des erweiterten Status des Menüs erhält der Körper die Klasse mob-menu-opened. Zu diesem Zeitpunkt passieren folgende Dinge:

  • Das Menü wird angezeigt.
  • Die aria-expanded und aria-label-Attributwerte der Umschalttaste werden aktualisiert. Außerdem wird das Symbol um 180 Grad gedreht, sodass es wie ein Erweiterungssymbol aussieht.

Hier ist der erforderliche JavaScript-Code:

Und das dazugehörige CSS:

Abschluss

Das ist es, Leute! Wir haben erfolgreich ein voll funktionsfähiges Admin-Dashboard-Layout erstellt. Sie können diese Grundlage erweitern, um alle Arten von Administrationsoberflächen zu erstellen. Hoffentlich hat Ihnen diese Reise genauso gut gefallen wie mir!

Nur eine letzte Anmerkung. Ich bin sicherlich kein Experte für Barrierefreiheit, habe jedoch versucht, diese Komponente durch Hinzufügen einiger allgemeiner ARIA-Attribute zugänglicher zu machen. Während dieses Vorgangs überprüfte ich die WordPress- und Codepen-Dashboards als Referenz. Möglicherweise sind zusätzliche ARIA-Attribute im Code enthalten. Zum Beispiel habe ich das aria-controls-Attribut ausgeschlossen, das für die Identifizierung des zugehörigen Inhalts verantwortlich ist, aber das lag daran, dass Aria-Controls Poop ist.

Wenn ich etwas verpasst habe oder Sie der Meinung sind, dass einige Dinge anders hätten gemacht werden sollen, lassen Sie es mich in den Kommentaren unten wissen.

Wie immer vielen Dank fürs Lesen!

Weitere Ressourcen für die Benutzeroberfläche des Admin-Dashboards

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.