Vuetify.js 반응 형 v-toolbar가 열기/닫기 이벤트를 트리거하지 않음

응답 탐색 도구 모음을 만들려고합니다 (v-toolbar component 및 router-links 사용). 모바일에서 햄버거 메뉴가 나타나고 햄버거 아이콘을 클릭하여 세로 목록을 표시하고 숨길 수 있도록 응답 가능한 세로 목록 (bootstrap navbar과 유사)으로 축소되는 탐색 모음을 만들고 싶습니다.Vuetify.js 반응 형 v-toolbar가 열기/닫기 이벤트를 트리거하지 않음

툴바 (see here)를 만들었지 만 반응 형 툴바를 활성화하기 위해 디스플레이의 크기를 줄이면 버거 (burger) 메뉴가 라우터 링크를 보여주기 위해 확장되지 않습니다. 마찬가지로 라우터 링크가 활성화되지 않습니다 (앵커 태그가 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

출처

2017-11-28 Garbit

을 codepen 작업.

출처

2017-11-28 20:03:55 LShapz

을 - 여기가 아닌 퍼그 버전의 https://codepen.io/lshapz/pen/qVJRqe – LShapz

이봐 LShapz, 나는 부모 구성 요소 내에 v-app를 가지고 있지만 v-menu는 좋은 소리입니다. 당신이 제안한 codepen은 수직 메뉴가 튀어 나오는 햄버거 메뉴를 클릭 할 때 매우 이상한 행동을합니다. Vuetify에서 트위터 스타일 드롭 다운이 지원되지 않습니까? – Garbit

아, 무슨 뜻인지 알 겠어. 메뉴보다 확장 패널에 가까운 것을 사용하겠습니까? (나는 화살표에서 햄버거/옆면 아이콘으로 트리거 아이콘을 바꿀 수 있는지 모르겠습니다.) BTW, vuetify Discord를 확인해 봤어? 매우 적극적이고 도움이되며 제작자 인 John Leider가 매일 거기에 있습니다. 그래서 그는 이미 누군가가 원하는 구현을 달성하도록 도울 수 있습니다. https://vuetifyjs.com/components/expansion-panels – LShapz

@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

여기 예를 참조하십시오 : 당신은 또한 V-응용 프로그램을 가지고 있지 않았다 https://codepen.io/atgarbett/pen/QOZoyg

출처

2017-11-29 11:44:05 Garbit

Vuetify.js 반응 형 v-toolbar가 열기/닫기 이벤트를 트리거하지 않음

답변

관련 문제