2017-11-28 43 views
1

応答性のあるナビゲーションツールバーを作成しようとしています(v-toolbar componentrouter-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

答えて

1


をcodepen取り組んでいます。

+1

また、Vアプリを持っていなかった - ここでは非パグバージョンhttps://codepen.io/lshapz/pen/qVJRqe – LShapz

+0

ですねえLShapz、私は親コンポーネント内にv-appを持っているが、v-menuは良い叫び声である。あなたが提供したcodepenは、垂直メニューがポップアップするというハンバーガーメニューをクリックすると、非常に奇妙な動作をします。 VuetifyではTwitterスタイルのドロップダウンがサポートされていませんか? – Garbit

+1

ああ、私はあなたが意味するものを参照してください。私はあなたがメニューよりも拡張パネルに近いものを使うと思う? (トリガーアイコンを矢印からハンバーガー/サイドのアイコンに変更できるかどうかは分かりません)BTW、vuetify Discordをチェックアウトしましたか?それは非常にアクティブで役立ち、作成者のJohn Leiderが毎日そこにいるので、彼はすでにあなたが望む実装のようなものを達成するのを手助けしたかもしれません。 https://vuetifyjs.com/components/expansion-panels – LShapz

1

@LShapzが示唆しているように、v-toolbarとv-expansion-panelの組み合わせを使用できます。それぞれは、ディスプレイのサイズに応じて表示または非表示になります。これにより、より小さなディスプレイの場合に垂直リストスタイルのナビゲーションが可能になります。

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/QOZoyg

関連する問題