Для бизнеса

The v-toolbar component is pivotal to any gui, as it generally is the primary source of site navigation. The toolbar component works great in conjunction with v-navigation-drawer and v-card.

A toolbar is a flexible container that can be used in a number of ways. By default, the toolbar is 64px high on desktop and 56px high on mobile. There are a number of helper components available to use with the toolbar. The v-toolbar-title is used for displaying a title and v-toolbar-items allow v-btn to extend full height.


Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.

Ниже приведена коллекция простых и сложных примеров.

Prominent toolbars increase the v-toolbar's height to 128px and positions the v-toolbar-title towards the bottom of the container. This is expanded upon in v-app with the ability to shrink a prominent toolbar to a dense or short one.

Dense панели инструментов уменьшают их высоту до 48px. Это также поведение по умолчанию для мобильной ландшафтной ориентации.

Панели инструментов представлены в двух вариантах: светлых и тёмных. Светлые панели инструментов имеют тёмные тонированные кнопки и тёмный текст, тогда как тёмные панели имеют белые тонированные кнопки и белый текст.

Панель приложений имеет несколько вариантов, которые могут применяться с темами и вспомогательными классами. Они варьируются от светлых и тёмных тем, цветных и прозрачных.

Toolbars can display a background as opposed to a solid color. This can be modified by using the img slot and providing your own v-img component. Backgrounds can be faded using a v-app-bar.

Toolbars can be extended without using the extension slot.

The extension's height can be customized.

Toolbars can be collapsed to save screen space.

С помощью нескольких пользовательских стилей вы можете легко создавать свои удивительные пользовательские интерфейсы.

It is possible to update the appearance of a toolbar in response to changes in app state. In this example, the color and content of the toolbar changes in response to user selections in the v-select.

Готовы к большему? Продолжить чтение с:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!