The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Wendet den Style position: absolute auf einer Komponente an.
Konfiguriere die aktive CSS-Klasse, wenn der Link aktiv ist. Mehr Informationen über das active-class-Props finden Sie in der vue-router Dokumentation.
Das Setzen des append-Props fügt immer den relativen Pfad an den aktuellen Pfad an. Mehr Informationen über das append-Props finden Sie in der vue-router Dokumentation.
Expands the button to 100% of available space.
Legt die Komponente nach unten aus.
Wendet eine bestimmte Farbe für die Steuerung an - es kann der Name der Materialfarbe sein (zum Beispiel success oder purple) oder css-Farben (#033 oder rgba(255, 0, 0, 0.5)). Sie finden eine Liste der eingebauten Klassen auf der Farbseite.
Wendet die dunkle Theme-Variante für die Komponente an. Mehr Informationen zur Material Design Dokumentation für dunkle Themes.
Removes the button box shadow.
Entfernt die Möglichkeit, auf die Komponente zu klicken oder diese zu selektieren.
Legt eine Höhe für die Komponente zwischen 0 und 24 fest. Weitere Informationen finden Sie auf der Höhenseite.
Stimme exakt mit dem Link überein. Andernfalls passt '/' zu jeder Route. Mehr Informationen über das exact-Props finden Sie in der vue-router Dokumentation.
Konfigurieren Sie die aktive CSS-Klasse, die angewendet wird, wenn der Link aktiv ist. Mehr Informationen über das exact-active-class-Props finden Sie in der vue-router Dokumentation.
Designates the button as a floating-action-button - round.
Wendet den Style position: fixed auf einer Komponente an.
Legt die Höhe für den Component fest.
Legt die Komponente als 'anchor ' fest und wendet das Attribut href an.
Designates the button as icon - round and flat
Controls the button's active state.
Macht die Komponente groß.
Aligns the component towards the left. This should be used with the absolute or fixed props.
Wendet die helle Theme-Variante für die Komponente an.
Legt fest, dass die Komponente ein Link ist. Dies wird automatisch festgelegt, wenn das href- oder to-Props verwendet wird.
Adds a loading icon animation
Legt die maximale Höhe für den Component fest.
Legt die maximale Breite für den Component fest.
Legt die mindest Höhe für den Component fest.
Legt die mindest Breite für den Component fest.
Legt den Link als nuxt-link fest. Für die Nutzung mit dem nuxt Framework.
Der Hintergrund wird transparent und ein dünner Rand wird hinzugefügt.
Wenn das replace-Props gesetzt wird, wird bei einem Klick router.replace() anstelle von router.push() aufgerufen, so dass die Navigation keinen Verlauf hinterlässt. Sie können weitere Informationen über das replace-Props in der vue-router Dokumentation finden.
Don't blur on click.
Aligns the component towards the right. This should be used with the absolute or fixed props.
Applies a large border radius on the button.
Applies a large border radius on the top left and bottom right of the card.
Macht die Komponente klein.
Specify a custom tag used on the root element.
Definiert das 'target '-Attribut. Dies sollte nur angewendet werden, wenn das href Prop verwendet wird.
Makes the background transparent.
Removes the component's border-radius.
Benennt die Zielroute des Links. Mehr Informationen über das to-Props finden Sie in der vue-router Dokumentation.
Legt die Komponente nach oben aus.
Set the button's type attribute
Der Wert, der verwendet wird, wenn der Component in einer Gruppe ausgewählt wird. Wenn nicht angegeben wird, wird der Index verwendet.
Legt die Breite für den Component fest.
Macht die Komponente sehr groß.
Macht die Komponente sehr klein.
Der Standard-Vue Slot.
Custom loader
Ereignis, das abgesendet wird, wenn der Component angeklickt wird
Event0.18 !default;$border-radius-root !default;0.24 !default;map-deep-merge(
(
'x-small': .625rem,
'small': .75rem,
'default': .875rem,
'large': .875rem,
'x-large': 1rem
),
$btn-font-sizes
);500 !default;0.08 !default;18px !default;12px !default;.0892857143em !default;thin !default;28px !default;map-deep-merge(
(
'x-small': 20,
'small': 28,
'default': 36,
'large': 44,
'x-large': 52
),
$btn-sizes
);uppercase !default;opacity 0.2s map-get($transition, 'ease-in-out') !default;0.28s !default;map-get($transition, 'fast-out-slow-in') !default;map-deep-merge(
(
'x-small': 18,
'small': 24,
'default': 24,
'large': 28,
'x-large': 32
),
$fab-icon-sizes
);map-deep-merge(
(
'x-small': 32,
'small': 40,
'default': 56,
'large': 64,
'x-large': 72
),
$fab-sizes
);v-btn is the only component that behaves differently when using the dark prop. Normally components use the dark prop to denote that they have a dark colored background and need their text to be white. While this will work for v-btn, it is advised to only use the prop when the button IS ON a colored background due to the disabled state blending in with white backgrounds. If you need white text, simply add the white--text class.
Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
Text buttons have no box shadow and no background. Only on hover is the container for the button shown.
Raised buttons have a box shadow that increases when clicked. This is the default style.
Depressed buttons still maintain their background color, but have no box shadow.
Button dropdowns are regular selects with additional styling.
Icons can be used for the primary content of a button.
Floating buttons are rounded and usually contain an icon.
Buttons can be given different sizing options to fit a multitude of scenarios.
Outlined buttons inherit their borders from the current color applied.
Rounded buttons behave the same as regular buttons but have rounded edges.
Tile buttons behave the same as regular buttons but have no border radius.
Block buttons extend the full available width.
Using the loading prop, you can notify a user that there is processing taking place. The default behavior is to use a v-progress-circular component but this can be customized.
Bereit für mehr? Weiter lesen mit: