[英]increase v-toolbar-side-icon Vuetify component
我是Vue的Vue新用戶,我增加了頁眉/工具欄的大小,現在我想將內容調整為新的大小,我在工具欄上什么都看不到
代碼看起來像這樣,對默認模板沒有太多修改,只是樣式含義,我將height屬性添加到120,增加大小的更好方法將不勝感激!
<template>
<v-app class="main">
<v-navigation-drawer
class="side header"
persistent
flat
:clipped="clipped"
v-model="drawer"
enable-resize-watcher
fixed
app
>
<v-list class="side">
<v-list-tile
value="true"
v-for="(item, i) in items"
:key="i"
>
<v-list-tile-action>
<v-icon v-html="item.icon"></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.title"></v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar
class="header"
app
flat
:prominent="prominent"
:clipped-left="clipped"
height=120
>
<v-toolbar-side-icon large @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title v-text ="title"></v-toolbar-title>
<v-toolbar-title v-text="slogan"></v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon @click.stop="rightDrawer = !rightDrawer">
<v-icon>menu</v-icon>
</v-btn>
</v-toolbar>
<v-content>
<router-view/>
</v-content>
<v-navigation-drawer
temporary
:right="right"
v-model="rightDrawer"
fixed
app
>
<v-list>
<v-list-tile @click="right = !right">
<v-list-tile-action>
<v-icon>compare_arrows</v-icon>
</v-list-tile-action>
<v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-footer height="200px">
</v-footer>
</v-app>
</template>
<script>
export default {
data () {
return {
prominent: true,
clipped: true,
flat: true,
drawer: false,
fixed: false,
items: [{
icon: 'bubble_chart',
title: 'Inspire'
}],
right: true,
rightDrawer: false,
title: 'something',
slogan: 'something more'
}
},
name: 'App'
}
</script>
解決了!
最后,只需將<v-toolbar>
及其內容替換為:
<v-btn icon @click.stop="drawer = !drawer">
<v-icon>menu</v-icon>
</v-btn>
然后,我們可以使用size屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.