스티커 헤더 도구 모음 설정

스티커 헤더 도구 모음 설정

나는 사용한다v-toolbar아래로 스크롤하면 사라지잖아기본적으로 나는 끈적끈적한 헤더를 원한다.

이건 기본적으로 내 암호야.

<div id="app">
  <v-app>
    <v-toolbar dense>
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn>
    </v-toolbar-items>
  </v-toolbar>
   <main>
     <h1 v-for="n in 20" :key="n">{{n}}</h1>
    </main>
  </v-app>
</div>

편집: Vuetify 버전 1.5:

추가만 하면 된다.fixed당신께v-toolbar포지셔닝이 해결되는 방법:

<v-toolbar dense fixed>

여기에서 설명서를 볼 수 있다.

버전 2.0.0

vuetify 버전 1.5에서 변경:

v-app-bar: v-toolbar의 기능을 보다 효과적으로 적용하기 위해 생성된 새로운 구성 요소.v-toolbar의 기존 스크롤 기법과 앱 기능이 모두 이동되었다.접는 막대, 스크롤 축소 등 새로운 스크롤 기법이 추가됐다.

<v-app-bar fixed>도구 모음을 수리할 수 있을 겁니다.문서화

이 코드를 사용해 보십시오.

<v-app id="inspire">
    <div
      class="hide-overflow"
      style="position: relative;"
    >
      <v-toolbar
        color="teal lighten-3"
        dark
        scroll-off-screen
        scroll-target="#scrolling-techniques"
        dense
      >
        <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn>
    </v-toolbar-items>
      </v-toolbar>

      <main id="scrolling-techniques" class="scroll-y"
            style="max-height: 625px;">
     <h1 v-for="n in 20" :key="n">{{n}}</h1>
    </main>
    </div>
  </v-app>

위나 아래나 끈적끈적한 요소를 원하는 사람들은 스낵바를 사용해 보는 것이 좋다.

 <v-snackbar v-model="snackbar" timeout="-1" top app>
  jojojojojo asdfjasldf 
 </v-snackbar>

참조URL: https://stackoverflow.com/questions/55739783/vuetify-sticky-header-toolbar