menuMDUIDocs
color_lens
Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Hilfsklassen

Abstände

Diese Reihe von Utility-Klassen kann Elementen margin und padding hinzufügen, die Standardwerte sind alle Vielfache von 8px.

Das Format des Klassennamens ist: .mdui-{Eigenschaft}-{Richtung}-{Größe}

Eigenschaft:

  • m - Setzt margin
  • p - Setzt padding

Richtung:

  • t - Setzt margin-top oder padding-top
  • b - Setzt margin-bottom oder padding-bottom
  • l - Setzt margin-left oder padding-left
  • r - Setzt margin-right oder padding-right
  • x - Setzt margin-left margin-right oder padding-left padding-right
  • y - Setzt margin-top margin-bottom oder padding-top padding-bottom
  • a - Setzt margin oder padding

Größe:

  • 0 - 0px
  • 1 - 8px
  • 2 - 16px
  • 3 - 24px
  • 4 - 32px
  • 5 - 40px
.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

Schnelles Floating

  • .mdui-float-left lässt das Element nach links floaten
  • .mdui-float-right lässt das Element nach rechts floaten
code
Beispiel
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Horizontal zentrieren

Fügen Sie einem beliebigen Element die Klasse .mdui-center hinzu, um es horizontal zu zentrieren.

code
Beispiel
<div class="mdui-center" style="width: 200px">mdui-center</div>

Vertikal zentrieren

Fügen Sie einem beliebigen Element die Klasse .mdui-valign hinzu, um die Kindelemente innerhalb dieses Elements vertikal zu zentrieren.

code
Beispiel
<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

Horizontale Ausrichtung

  • .mdui-text-left Text linksbündig ausrichten.
  • .mdui-text-center Text zentriert ausrichten.
  • .mdui-text-right Text rechtsbündig ausrichten.
code
Beispiel
<div class="mdui-text-left">This should be left aligned</div>
<div class="mdui-text-center">This should be center aligned</div>
<div class="mdui-text-right">This should be right aligned</div>

Text-Groß-/Kleinschreibung

  • .mdui-text-lowercase Den Text in Kleinbuchstaben umwandeln.
  • .mdui-text-uppercase Den Text in Großbuchstaben umwandeln.
  • .mdui-text-capitalize Den ersten Buchstaben jedes Wortes großschreiben.
code
Beispiel
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

Automatisches Abschneiden von Text

.mdui-text-truncate Kürzt den Text automatisch und ersetzt ihn durch Auslassungspunkte, wenn er die Längenbegrenzung überschreitet.

code
Beispiel
<p class="mdui-text-truncate" style="max-width: 200px;">Dies ist ein sehr, sehr, sehr, sehr, sehr, sehr, sehr, sehr, sehr, sehr, sehr, sehr langer Text.</p>

Floating aufheben

Fügen Sie dem Elternelement die Klasse .mdui-clearfix hinzu, um Floating aufzuheben.

code
Beispiel
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

Inhalt ausblenden

  • Die Klasse .mdui-hidden wird zum Ausblenden von Elementen verwendet, was dem Hinzufügen des Stils display: none; entspricht. Das ausgeblendete Element nimmt keinen Platz auf der Seite ein.
  • Die Klasse .mdui-invisible wird verwendet, um Elemente unsichtbar zu machen, wobei sie jedoch weiterhin Platz auf der Seite einnehmen. Dies entspricht dem Hinzufügen des Stils visibility: hidden;.

Responsive Hilfsprogramme

Diese Utility-Klassen blenden Inhalte für verschiedene Geräte mithilfe von Media-Queries aus. Zu diesen Utility-Klassen gehören:

  • .mdui-hidden-*: Ausblenden auf Geräten mit der angegebenen Breite.
  • .mdui-hidden-*-up: Ausblenden auf Geräten mit der angegebenen Breite und darüber.
  • .mdui-hidden-*-down: Ausblenden auf Geräten mit der angegebenen Breite und darunter.
Extra kleine Bildschirme
<600px		Kleine Bildschirme
>=600px - <1024px		Mittlere Bildschirme
>=1024px - <1440px		Große Bildschirme
>=1440px - <1920px		Extra große Bildschirme
>=1920px
.mdui-hidden-xsSichtbarSichtbarSichtbarSichtbar
.mdui-hidden-smSichtbarSichtbarSichtbarSichtbar
.mdui-hidden-mdSichtbarSichtbarSichtbarSichtbar
.mdui-hidden-lgSichtbarSichtbarSichtbarSichtbar
.mdui-hidden-xlSichtbarSichtbarSichtbarSichtbar
.mdui-hidden-xs-downSichtbarSichtbarSichtbarSichtbar
.mdui-hidden-sm-downSichtbarSichtbarSichtbar
.mdui-hidden-md-downSichtbarSichtbar
.mdui-hidden-lg-downSichtbar
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upSichtbar
.mdui-hidden-md-upSichtbarSichtbar
.mdui-hidden-lg-upSichtbarSichtbarSichtbar
.mdui-hidden-xl-upSichtbarSichtbarSichtbarSichtbar

Passen Sie die Größe des Browserfensters an oder sehen Sie sich die folgenden Beispiele auf verschiedenen Geräten an. Der dunkel gefärbte Teil zeigt an, was im aktuellen Browserfenster sichtbar ist.

✔ .mdui-hidden-xs
✔ .mdui-hidden-sm
✔ .mdui-hidden-md
✔ .mdui-hidden-lg
✔ .mdui-hidden-xl
✔ .mdui-hidden-xs-down
✔ .mdui-hidden-sm-down
✔ .mdui-hidden-md-down
✔ .mdui-hidden-lg-down
✔ .mdui-hidden-xl-down
✔ .mdui-hidden-xs-up
✔ .mdui-hidden-sm-up
✔ .mdui-hidden-md-up
✔ .mdui-hidden-lg-up
✔ .mdui-hidden-xl-up
arrow_backPrevious
Medien
arrow_forwardNext
Schatten