The v-bottom-navigation is an alternative to the sidebar. It is primarily used on mobile and comes in two variants, icons and text, and shift.
While the bottom nav is meant to be used with the vue-router, you can also programmatically control the active state of the buttons by using the active.sync prop. You can change a button's value by using its value attribute.
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.
The class applied to a v-btn when activated.
Bezeichnet die Komponente als Teil des Anwendungslayouts. Wird zum dynamischen Anpassen der Inhaltsgröße verwendet. Komponenten, die diese Props verwenden, sollten sich outside der v-main-Komponente befinden, damit sie ordnungsgemäß funktionieren. Weitere Informationen zu Layouts finden Sie auf der [Anwendungsseite] (/components/application). Hinweis: Diese Props wendet automatisch position: fixed auf das Layoutelement an. Sie können diese Funktionalität mit der Props absolute überschreiben
Changes the background-color for the component.
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.
Wendet den Style position: fixed auf einer Komponente an.
Legt die Höhe für den Component fest.
Will transition the navigation off screen when scrolling up.
Controls whether the component is visible or hidden. Supports the .sync modifier.
Wendet die helle Theme-Variante für die Komponente an.
Erzwingt einen Wert immer ausgewählt zu sein (falls verfügbar).
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.
Bestimmt das Element für Scroll-Ereignisse. Verwendet standardmäßig window.
Die Anzahl der Scrollstrecke bevor hide-on-scroll aktiviert wird.
Holds the value of the currently active v-btn. If the button has no value supplied, its index will be used instead..
Legt die Breite für den Component fest.
Der Standard-Vue Slot.
The value of currently selected button. If no value is assigned, will be the current index of the button.
anyThe event used for input-value.sync.
string | numbermap-deep-get($headings, 'caption', 'size') !default;168px !default;80px !default;calc(100% - 22px) !default;calc(100% - 12px) !default;Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
The color prop applies a color to the background the bottom navigation. It is recommended to use the light and dark props to properly contrast text color.
If v-bottom-navigation has grow property, buttons within it grow to fill available space.
The horizontal prop, places nav text next to the icon as appose to beneath it.
The shift prop will hide the button text until active. For this to work, v-btn text is required to be wrapped in a <span> tag.
The display state of v-bottom-navigation can be toggled using the input-value prop. You can also control the currently active button using v-model.
Hide-on-scroll hides v-bottom-navigation when target element is scrolled.
scroll-threshold property allows you to customize the threshold you can scroll before v-bottom-navigation disappears.