Как отобразить два v-navigation-drawer рядом друг с другом и иметь возможность скрыть правый от левого?
С Vuetify я хотел бы отображать два v-navigation-drawer рядом друг с другом и иметь возможность скрыть правый с помощью кнопки внутри левого. Мой текущий код (см. ниже) отображает правый ящик поверх левого, но я хочу, чтобы он отображал правый ящик рядом с левым (см. скрины ниже).
Я пытался найти что-то полезное в официальной документации и просмотрел несколько разных образцов шаблонов, но в моем случае ничего не помогло.
Я смог придумать следующий код:
<template>
<v-app dark>
<v-navigation-drawer v-model = "leftMenu" app clipped>
<v-container ma-0 pa-0>
<v-toolbar flat>
<span>Some helper toolbar</span>
</v-toolbar>
</v-container>
<v-container pa-1 mt-1>
<v-layout row wrap>
<v-list>
<v-list-tile>
<v-list-tile-action>
<span><a @click.stop = "toggleRightMenu"><v-icon>android</v-icon> Task Menu</a></span>
</v-list-tile-action>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<span><v-icon>android</v-icon> Menu Element #1</span>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-layout>
</v-container>
</v-navigation-drawer>
<v-navigation-drawer v-model = "rightMenu" app clipped>
<v-container>
<v-layout>
<v-list>
<v-list-tile>
<v-list-tile-action>
<span><v-icon>android</v-icon> Testing...</span>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-layout>
</v-container>
</v-navigation-drawer>
<v-toolbar app clipped-left>
<v-toolbar-side-icon @click = "leftMenu = !leftMenu"></v-toolbar-side-icon>
<v-toolbar-title class = "headline">
<span>Testing...</span>
</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-content>
<router-view/>
</v-content>
<v-footer app>
<span>Footer</span>
</v-footer>
</v-app>
</template>
<script>
export default {
name: 'App',
data() {
return {
leftMenu: true,
rightMenu: false
}
},
methods: {
toggleRightMenu() {
this.rightMenu = !this.rightMenu;
}
}
}
</script>
В настоящее время у меня есть следующее: https://i.ibb.co/txdN0X8/current-drawer.png
Я ищу что-то вроде этого: https://i.ibb.co/b514yyC/target-drawer.png
Ответы 3
Вы можете попробовать добиться этого, имея 2 навигационных ящика.
Второй ящик margin-left должен быть эквивалентен первому ящику.
Пожалуйста, взгляните на эту ручку кода. Надеюсь это поможет.
https://codepen.io/Jubels/pen/xeazYY?&editable=true&editors=101
<div id = "app">
<v-app id = "inspire">
<v-layout
wrap
style = "height: 200px;"
>
<v-container>
<v-layout justify-center>
<v-btn
color = "pink"
dark
@click.stop = "drawer = !drawer"
>
Toggle Drawer 1
</v-btn>
<v-btn
color = "pink"
dark
@click.stop = "drawer2 = !drawer2"
>
Toggle Drawer 2
</v-btn>
</v-layout>
</v-container>
<v-navigation-drawer
v-model = "drawer"
:mini-variant = "mini"
absolute
dark
>
<v-list class = "pa-1">
<v-list-tile v-if = "mini" @click.stop = "mini = !mini">
<v-list-tile-action>
<v-icon>chevron_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile avatar tag = "div">
<v-list-tile-avatar>
<img src = "https://randomuser.me/api/portraits/men/85.jpg">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>John Leider</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon @click.stop = "mini = !mini">
<v-icon>chevron_left</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
<v-list class = "pt-0" dense>
<v-divider light></v-divider>
<v-list-tile
v-for = "item in items"
:key = "item.title"
@click = ""
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-navigation-drawer :style = "`margin-left: ${drawer ? '300px' : '0'}`"
v-model = "drawer2"
:mini-variant = "mini"
absolute
dark
>
<v-list class = "pa-1">
<v-list-tile v-if = "mini" @click.stop = "mini = !mini">
<v-list-tile-action>
<v-icon>chevron_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile avatar tag = "div">
<v-list-tile-avatar>
<img src = "https://randomuser.me/api/portraits/men/85.jpg">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>John Leider</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon @click.stop = "mini = !mini">
<v-icon>chevron_left</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
<v-list class = "pt-0" dense>
<v-divider light></v-divider>
<v-list-tile
v-for = "item in items"
:key = "item.title"
@click = ""
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</v-layout>
</v-app>
</div>
Спасибо за Ваш ответ. Я думаю, что это нормально, но есть небольшая проблема с этим. Когда вы нажимаете на стрелку, чтобы свернуть меню, меню сворачивается, но остается там, где оно было раньше. Я думаю, что это признак большей проблемы с решениями, зависящими от ручной обработки ширины элементов.
width — это реальная опора навигационного ящика, так что вполне можно к ней прислушаться.
Хитрость заключается в том, чтобы v-layout заполнил всю высоту и содержал оба навигационных ящика.
Еще одна вещь, которую вы должны обязательно применить, — это наличие z-index на обоих навигационных ящиках. В противном случае, когда вы переключаете правую навигацию, она будет идти вверху левой навигации. И когда вы хотите переключить левую навигацию, вам действительно нужно переключить обе.
Я создал Кодепен, используя ваш пример данных.
<v-toolbar flat>
<v-toolbar-side-icon @click = "toggleLeftMenu"></v-toolbar-side-icon>
<v-toolbar-title class = "headline">
<span>Testing...</span>
</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-layout fill-height>
<v-navigation-drawer
style = "z-index: 2"
dark
clipped
stateless
v-model = "leftMenu"
>
<v-container ma-0 pa-0>
<v-toolbar flat>
<span>Some helper toolbar</span>
</v-toolbar>
</v-container>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon @click = "rightMenu = !rightMenu">android</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Task Menu</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-icon>android</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Menu Element #1</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-navigation-drawer
dark
style = "z-index: 1"
v-model = "rightMenu"
class = "pb-0"
stateless
>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon>android</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Testing right nav</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</v-layout>
Надеюсь, поможет :)
Спасибо, выглядит хорошо. Единственная проблема, которую я вижу, это то, что когда правое меню закрыто, и я хочу закрыть левое с помощью toggleLeftMenu, левое меню закрывается, но появляется правое меню.
Итак, когда правое меню закрыто, и вы закрываете левое меню, что вы ожидаете? просто чтобы увидеть нужное меню или закрыть их оба как codepen.io/djshan/pen/PgddLd
Когда правое меню закрыто, а я закрываю левое, то хотелось бы, чтобы они оба были закрыты. Я думаю, что этот codepen.io/djshan/pen/PgddLd — лучшее решение. Спасибо!
Еще одна проблема с решением. Когда я хочу добавить контент в приложение, контент попадает в меню, а не прямо в меню. См. здесь: codepen.io/ratk/pen/mgzjoV?editors=1010
Проблема в том, что когда у вас есть fill-height на вашем макете, он будет занимать всю ширину. Таким образом, ваш контент переходит на следующую строку. Однако, если вы поместите v-контент внутри v-layout, это решит проблему.видеть
Отображение содержимого работает правильно, но теперь обработка закрытия и открытия меню не работает должным образом.
Я пробовал все, что мог придумать. Это не работает. Я задал этот вопрос в Discord, и мне сказали, что они не поддерживают это прямо сейчас. Я собираюсь попросить добавить эту функцию в следующие версии.
Да я вижу. В любом случае спасибо за усилия и замечание!
Я сделал это как дизайн битбакета, один фиксированный (мини-вариант), а другой - ящик https://codepen.io/admica/pen/PoozMNw?editors=1010
<div id = "app">
<v-app id = "inspire">
<v-navigation-drawer
mini-variant
mini-variant-width = "56"
app
clipped
>
<v-list dense>
<v-list-item
v-for = "item in items"
:key = "item.text"
@click = ""
>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-subheader class = "mt-3 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
<v-list>
<v-list-item
v-for = "item in items2"
:key = "item.text"
@click = ""
>
<v-list-item-avatar>
<img
:src = "`https://randomuser.me/api/portraits/men/${item.picture}.jpg`"
alt = ""
>
</v-list-item-avatar>
<v-list-item-title v-text = "item.text"></v-list-item-title>
</v-list-item>
</v-list>
<v-list-item
class = "mt-3"
@click = ""
>
<v-list-item-action>
<v-icon color = "grey darken-1">add_circle_outline</v-icon>
</v-list-item-action>
<v-list-item-title class = "grey--text text--darken-1">Browse Channels</v-list-item-title>
</v-list-item>
<v-list-item @click = "">
<v-list-item-action>
<v-icon color = "grey darken-1">settings</v-icon>
</v-list-item-action>
<v-list-item-title class = "grey--text text--darken-1">Manage Subscriptions</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar
app
color = "red"
dense
>
<v-app-bar-nav-icon @click.stop = "drawer = !drawer"></v-app-bar-nav-icon>
<v-icon class = "mx-3">fab fa-youtube</v-icon>
<v-toolbar-title class = "mr-5 align-center">
<span class = "title">Youtube</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-layout
row
align-center
style = "max-width: 650px"
>
<v-text-field
:append-icon-cb = "() => {}"
placeholder = "Search..."
single-line
append-icon = "search"
color = "white"
hide-details
></v-text-field>
</v-layout>
</v-app-bar>
<v-content>
<v-container fluid fill-height>
<v-layout
align-center
style = "position:relative"
>
<v-navigation-drawer
v-model = "drawer"
v-if = "drawer"
>
<v-list-item>
<v-list-item-avatar>
<v-img src = "https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<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>
ahmed ali
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
Вместо того, чтобы использовать снимок экрана (я предполагаю, что это так), можете ли вы использовать для этого codepen?