Навигационные панели удобны для навигации по веб-приложению. Они обеспечивают легкодоступные средства быстрого перехода из одного места в другое. В этой статье мы узнаем, как создавать и настраивать панели навигации с помощью Vuetify.
Компонент v-navigation-drawer
Мы создаем навигационные панели в Vuetify с помощью компонента v-navigation-drawer. Мы устанавливаем реквизит app для этого компонента, чтобы указать платформе Vuetify, что он является частью макета приложения.
<template> <v-app> <v-app-bar color="green" class="flex-grow-0" app dark> <v-app-bar-title>Coding Beauty</v-app-bar-title> </v-app-bar> <v-navigation-drawer app> <v-list-item> <v-list-item-content> <v-list-item-title class="text-h6"> Learning Vuetify </v-list-item-title> <v-list-item-subtitle> Navigation drawers</v-list-item-subtitle> </v-list-item-content> </v-list-item> <v-divider></v-divider> <v-list dense nav> <v-list-item v-for="item in items" :key="item.title" link> <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon><v-list-item-content> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> </v-app> </template><script> export default { name: 'App', data: () => ({ items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard' }, { title: 'Account', icon: 'mdi-account-box' }, { title: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Временные ящики навигации в Vuetify
Навигационные ящики не нужно исправлять. Мы можем использовать переменную для переключения видимости через v-model. Мы делаем это в коде ниже, когда выбран v-app-bar-nav-icon. Помимо установки для этой переменной значения false, щелчок за пределами открытого навигационного ящика также может закрыть его.
<template> <v-app> <v-app-bar color="primary" class="flex-grow-0" app dark> <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> <v-app-bar-title>Coding Beauty</v-app-bar-title> </v-app-bar> <v-navigation-drawer app v-model="drawer"> <v-list-item> <v-list-item-content> <v-list-item-title class="text-h6"> Learning Vuetify</v-list-item-title> <v-list-item-subtitle> Using Navigation drawers</v-list-item-subtitle> </v-list-item-content> </v-list-item> <v-divider></v-divider> <v-list dense nav> <v-list-item v-for="item in items" :key="item.title" link> <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon><v-list-item-content> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> </v-app> </template><script> export default { name: 'App', data: () => ({ drawer: false, items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard' }, { title: 'Account', icon: 'mdi-account-box' }, { title: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Скачать бесплатную копию здесь!
Настройка цветов панели навигации в Vuetify
Мы можем использовать различные цветовые стили в наших навигационных ящиках с реквизитом color. С помощью реквизита dark мы также можем сделать текст, содержащийся в ящике, светлым или темным, чтобы он правильно сочетался с цветом его фона:
<template> <v-app> <v-app-bar color="primary" class="flex-grow-0" app dark> <v-app-bar-title>Coding Beauty</v-app-bar-title> </v-app-bar> <v-navigation-drawer app color="green" dark> <v-divider></v-divider> <v-list dense nav> <v-list-item v-for="item in items" :key="item.title" link> <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon><v-list-item-content> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> </v-app> </template><script> export default { name: 'App', data: () => ({ items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard' }, { title: 'Account', icon: 'mdi-account-box' }, { title: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Нижние навигационные ящики в Vuetify
Мы можем переместить панель навигации так, чтобы она располагалась в нижней части экрана на мобильных устройствах, установив свойство bottom на true. Этот альтернативный стиль активируется только при соблюдении его mobile-breakpoint.
<template> <v-app> <v-app-bar color="primary" class="flex-grow-0" app dark> <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> <v-app-bar-title>Coding Beauty</v-app-bar-title> </v-app-bar> <v-navigation-drawer app v-model="drawer" bottom> <v-list-item> <v-list-item-content> <v-list-item-title class="text-h6"> Learning Vuetify</v-list-item-title> <v-list-item-subtitle> Using Navigation drawers</v-list-item-subtitle> </v-list-item-content> </v-list-item> <v-divider></v-divider> <v-list dense nav> <v-list-item v-for="item in items" :key="item.title" link> <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon><v-list-item-content> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> </v-app> </template><script> export default { name: 'App', data: () => ({ drawer: false, items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard' }, { title: 'Account', icon: 'mdi-account-box' }, { title: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Мини-вариант Vuetify Navigation Drawer
С помощью реквизита mini-variant мы можем уменьшить размер ящика и отображать только первый элемент каждого из элементов внутри v-list. Ящик по умолчанию уменьшается до размера 56 пикселей.
<template> <v-app> <v-app-bar color="primary" class="flex-grow-0" app dark> <v-app-bar-title>Coding Beauty</v-app-bar-title> </v-app-bar> <v-navigation-drawer app mini-variant> <v-divider></v-divider> <v-list dense nav> <v-list-item v-for="item in items" :key="item.title" link> <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon><v-list-item-content> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> </v-app> </template><script> export default { name: 'App', data: () => ({ items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard' }, { title: 'Account', icon: 'mdi-account-box' }, { title: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Расширение навигационных ящиков при наведении
Если мы хотим, чтобы панель навигации мини-варианта расширялась при наведении, мы можем установить свойство expand-on-hover в true:
<template> <v-app> <v-app-bar color="primary" class="flex-grow-0" app dark> <v-app-bar-title>Coding Beauty</v-app-bar-title> </v-app-bar> <v-navigation-drawer app expand-on-hover> <v-divider></v-divider> <v-list dense nav> <v-list-item v-for="item in items" :key="item.title" link> <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon><v-list-item-content> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> </v-app> </template><script> export default { name: 'App', data: () => ({ items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard' }, { title: 'Account', icon: 'mdi-account-box' }, { title: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Навигационные ящики с выравниванием по правому краю в Vuetify
Установка свойства right на true в компоненте навигационного ящика выровняет его по правому краю экрана, а не по левому краю по умолчанию.
<template> <v-app> <v-app-bar color="red" class="flex-grow-0" app dark> <v-app-bar-title>Coding Beauty</v-app-bar-title> </v-app-bar> <v-navigation-drawer app right> <v-list-item> <v-list-item-content> <v-list-item-title class="text-h6"> Learning Vuetify </v-list-item-title> <v-list-item-subtitle> Navigation drawers</v-list-item-subtitle> </v-list-item-content> </v-list-item> <v-divider></v-divider> <v-list dense nav> <v-list-item v-for="item in items" :key="item.title" link> <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon><v-list-item-content> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> </v-app> </template><script> export default { name: 'App', data: () => ({ items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard' }, { title: 'Account', icon: 'mdi-account-box' }, { title: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Ящики постоянной навигации
По умолчанию навигационные ящики скрываются, когда выполняется mobile-breakpoint:
Мы можем предотвратить это, используя реквизит permanent:
<template> <v-app> <v-app-bar color="indigo" class="flex-grow-0" app dark> <v-app-bar-title>Coding Beauty</v-app-bar-title> </v-app-bar> <v-card elevation="12"> <v-navigation-drawer app permanent> <v-list-item> <v-list-item-content> <v-list-item-title class="text-h6"> Learning Vuetify </v-list-item-title> <v-list-item-subtitle> Navigation drawers</v-list-item-subtitle> </v-list-item-content> </v-list-item> <v-divider></v-divider> <v-list dense nav> <v-list-item v-for="item in items" :key="item.title" link> <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon><v-list-item-content> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> </v-card> </v-app> </template><script> export default { name: 'App', data: () => ({ items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard' }, { title: 'Account', icon: 'mdi-account-box' }, { title: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Краткое содержание
Подобно вкладкам, мы можем использовать навигационные панели, чтобы добавить дополнительный уровень навигации в ваши веб-приложения. Vuetify предоставляет компонент v-navigation-drawer для их создания с различными реквизитами для настройки.
Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе новых полезных материалов.
Получить обновленную статью на codingbeautydev.com.
