Aktualisieren Sie Ihr Layout ohne neue Klassen zu erstellen. Abstandshelfer sind nützlich, um das 'padding ' und das 'margin ' eines Elements zu ändern.
Benutze die Spielwiese, um ein Gefühl dafür zu bekommen, was die verschiedenen Helferklassen tun können. Für eine Erklärung, wie sie funktionieren, siehe den Abschnitt Wie es funktioniert unten.
Die Hilfsklassen wenden margin oder padding auf ein Element von 0 bis 12 an. Jede Größensteigerung wurde so gestaltet, dass sie mit den üblichen Abständen des Material-Designs übereinstimmt. Diese Klassen können im folgenden Format angewendet werden {property}{direction}-{size}.
Die Eigenschaft wendet den Typ des Abstands an:
m- wendetmarginanp- wendetpaddingan
direction bezeichnet die Seite, auf die die Eigenschaft zutrifft:
t- wendet den Abstand fürmargin-topundpadding-topanb- wendet den Abstand fürmargin-bottomundpadding-bottomanl- wendet den Abstand fürmargin-leftundpadding-leftanr- wendet den Abstand fürmargin-rightundpadding-rightans- wendet den Abstand fürmargin-left/padding-left(im LTR-Modus) undmargin-right/padding-right(im RTL-Modus)e- wendet den Abstand fürmargin-right/padding-right(im LTR-Modus) undmargin-left/padding-left(im RTL-Modus)x- wendet den Abstand für*-leftund*-rightany- wendet den Abstand für*-topund*-bottomana- wendet den Abstand für die Eigenschaft in alle Richtungen an
Das size-Element steuert den Anstieg der Eigenschaft in 4px Intervallen:
0- eliminiert allemarginoderpaddingdurch die Einstellung01- setztmarginoderpaddingauf 4px2- setztmarginoderpaddingauf 8px3- setztmarginoderpaddingauf 12px4- setztmarginoderpaddingauf 16px5- setztmarginoderpaddingauf 20px6- setztmarginoderpaddingauf 24px7- setztmarginoderpaddingauf 28px8- setztmarginoderpaddingauf 32px9- setztmarginoderpaddingauf 36px10- setztmarginoderpaddingauf 40px11- setztmarginoderpaddingauf 44px12- setztmarginoderpaddingauf 48pxn1- setzt negativenmarginauf 4pxn2- setzt negativenmarginauf 8pxn3- setzt negativenmarginauf 12pxn4- setzt negativenmarginauf 16pxn5- setzt negativenmarginauf 20pxn6- setzt negativenmarginauf 24pxn7- setzt negativenmarginauf 28pxn8- setzt negativenmarginauf 32pxn9- setzt negativenmarginauf 36pxn10- setzt negativenmarginauf 40pxn11- setzt negativenmarginauf 44pxn12- setzt negativenmarginauf 48pxauto- setzt den Abstand aufauto
Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
Mit Hilfe der Margin Helfer Klassen können Sie Inhalte einfach horizontal zentrieren.
Margin kann auch negativ in den gleichen 1 bis 12 Intervallen angewendet werden.
Vuetify verfügt über ein 12-Punkte-Rastersystem, das mit Flexbox erstellt wurde. Spacing wird verwendet, um bestimmte Layouts innerhalb eines Anwendungsinhalts zu erstellen. Es besteht aus 5 Media-Haltepunkten, die für bestimmte Bildschirmgrößen oder -Orientierungen verwendet werden: xs, sm, md, lg und xl. Die Standardauflösungen sind unten in der Tabelle Viewport Haltepunkte definiert und können durch Anpassung der Haltepunktkonfiguration geändert werden.
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Die Helferklassen gelten an einem gegebenen Haltepunkt margin oder padding. Diese Klassen können im folgenden Format angewendet werden: {property}{direction}-{breakpoint}-{size}. Dies gilt nicht für xs da es abgeleitet ist; z.B. ma-xs-2 entspricht ma-2.
Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
Abstand mit md und lg Haltepunkte