툴바가 일반적으로 가장 중요한 사이트 탐색 방법인 것 처럼 v-toolbar 컴포넌트 역시 모든 그래픽 환경에서 충추적인 컴포넌트 입니다. The toolbar component works great in conjunction with a navigation drawer for hiding links and presenting an activator to open the sidebar on mobile.

Usage

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.

API

예제

두드러지는 툴바 (Prominent toolbars)

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 toolbars)

밀집된 툴바는 48px 높이를 사용합니다. 이는 가로 모바일 모드의 기본 작동방식이기도 합니다.

Light and Dark

툴바는 라이트/다크 두개의 변형이 있습니다. 라이트 툴바는 다크 버튼과 다크 텍스트를 가지고 다크 툴바는 흰색 버튼과 흰색 텍스트를 가집니다.

변형 (Variations)

앱바는 테마와 헬퍼 클라스들을 적용하여 다양한 변형을 만들 수 있습니다. 라이트, 다크 테마부터 색상, 투명한 변형도 가능합니다.

Prominent w/ Background

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.

Extended

Toolbars can be extended without using the extension slot.

Extension height

The extension's height can be customized.

Collapse

Toolbars can be collapsed to save screen space.

유연한 툴바와 카드 툴바 (Flexible toolbar and card toolbar)

소수의 커스텀 스타일로 놀라운 인터페이스를 만들 수 있습니다.

Contextual action bars

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.

Edit this page on Github | Translate on Crowdin
Vuetify
상점기업