応答性のあるナビゲーションツールバーを作成しようとしています(v-toolbar componentとrouter-linksを使用しています)。私は携帯電話でハンバーガーメニューが表示され、ハンバーガーアイコンをクリックして垂直リストを表示したり隠すことができるように、応答可能な垂直リスト(bootstrap navbarに似ています)に崩壊するナビゲーションバーを作成したいと思います。Vuetify.js応答しているv-toolbarが開いている/閉じるイベントを起動していません
ツールバーを作成しましたが(see here)、応答ツールバーを有効にするためにディスプレイのサイズを小さくすると、バーガーメニューが展開されず、ルータリンクが表示されます。同様に、ルータリンクはアクティブ化されません(私はアンカータグがv-btnによって上書きされていると思われます)。
HTML(パグ)
div#app
nav
v-toolbar
v-toolbar-title
router-link.nav-item(to="/") Mysite
v-spacer
v-toolbar-side-icon.hidden-md-and-up
v-toolbar-items.hidden-sm-and-down
v-btn(flat)
router-link.nav-item(to="/about") About
v-btn(flat)
router-link.nav-item(to="/contact") Contact
編集
LShapz(updated Codepen here)からの提案を実装するために編集されたコード
nav
v-toolbar.hidden-sm-and-down
v-toolbar-title
router-link.nav-item(to="/") MySite
v-spacer
v-toolbar-items
v-btn(flat)
router-link.nav-item(to="/about") About
v-btn(flat)
router-link.nav-item(to="/contact") Contact
div.hidden-md-and-up
v-expansion-panel
v-expansion-panel-content
div(slot="header")
router-link.nav-item(to="/") MySite
v-card
v-card-text
router-link.nav-item(to="/about") About
v-card
v-card-text
router-link.nav-item(to="/contact") Contact
誰も私が/非表示を表示することができます編集を提案することができますハンバーガーメニューをクリックすると応答メニューが表示されますか?
https://codepen.io/atgarbett/pen/wPYMoY
前codepenは、あなたが実際にそこにv-menu with a list of itemsためのコードを持っていない、またV-ツールバー・サイド・アイコンの活性化因子を持っているん https://codepen.io/atgarbett/pen/QOZoyg
また、Vアプリを持っていなかった - ここでは非パグバージョンhttps://codepen.io/lshapz/pen/qVJRqe – LShapz
ですねえLShapz、私は親コンポーネント内にv-appを持っているが、v-menuは良い叫び声である。あなたが提供したcodepenは、垂直メニューがポップアップするというハンバーガーメニューをクリックすると、非常に奇妙な動作をします。 VuetifyではTwitterスタイルのドロップダウンがサポートされていませんか? – Garbit
ああ、私はあなたが意味するものを参照してください。私はあなたがメニューよりも拡張パネルに近いものを使うと思う? (トリガーアイコンを矢印からハンバーガー/サイドのアイコンに変更できるかどうかは分かりません)BTW、vuetify Discordをチェックアウトしましたか?それは非常にアクティブで役立ち、作成者のJohn Leiderが毎日そこにいるので、彼はすでにあなたが望む実装のようなものを達成するのを手助けしたかもしれません。 https://vuetifyjs.com/components/expansion-panels – LShapz