Vuetify에서 호버 구성 요소를 사용하는 방법

반응형

codingbeautydev.com에서 이 기사의 최신 버전을 읽어보십시오.

CSS :hover pseudo-class를 사용하여 마우스 포인터의 요소 스타일을 사용자 지정할 수 있지만 Vuetify는 v-hover 구성 요소를 통해 깔끔한 방법을 제공합니다. 어떻게 사용할 수 있는지 이 글에서 알아보겠습니다.

v-hover 사용

<template>
    <v-app>
      <v-hover v-slot="{ hover }">
              <v-card
        class="ma-4 pa-4"
        width="200"
        height="200"
        :elevation="hover ? 12 : 2"
      >
                  Hover over me!
                          </v-card>
    </v-hover>
  </v-app>
</template>
<script>
                    export default {
  name: 'App',
};
</script>

 

v-hover 기본 슬롯은 호버 구성 요소 하위의 현재 호버 상태에 따라 값이 변경되는 호버 요소를 제공합니다. 마우스가 호버 위에 있지 않으면 호버 기본 슬롯은 거짓으로 유지됩니다. 우리의 경우, 그러면 카드의 고도가 2로 설정됩니다.

그리고 우리가 그 위를 맴돌면, 호버(hover)가 참이 되고 카드 상승이 12가 됩니다.

열기 지연을 가리킵니다.

 

오픈 딜레이 소품으로 호버 소품 변경을 거짓에서 참으로 지연시킬 수 있습니다. 아래 코드에서는 오픈 딜레이를 사용하여 마우스 포인터에서 호버 프로펠트가 true가 되는 지연 시간을 200ms로 설정합니다.

<template>
    <v-app>
      <v-hover v-slot="{ hover }" open-delay="200">
              <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
                  <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
<script>
                    export default {
  name: 'App',
};
</script>

호버 닫기 지연

 

마찬가지로 근접 지연 프로포트를 사용하여 마우스가 떠난 후 호버 프로포트를 참에서 거짓으로 지연시킬 수 있습니다. 따라서 마우스가 카드를 떠난 후 카드의 높이를 줄이는 데 200ms가 소요됩니다.

<template>
    <v-app>
      <v-hover v-slot="{ hover }" close-delay="200">
              <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
                  <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

장애인 프로펠러

비활성화된 소품으로 호버 기능을 비활성화할 수 있습니다.

<template>
    <v-app>
      <v-hover v-slot="{ hover }" disabled>
              <v-card
        :elevation="hover ? 12 : 2"
        class="mx-auto"
        height="100"
        max-width="250"
      >
                  <v-card-text class="my-4 text-center text-h6">
                              Hover disabled
                                      </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

 

카드 위에 마우스를 올려도 아무 일도 일어나지 않습니다.

호버 목록

v-hover와 v-for를 결합하여 사용자가 목록과 상호 작용할 때 단일 항목을 두드러지게 만들 수 있습니다.

<template>
    <v-app>
      <v-container>
        <v-row class="fill-height" align="center" justify="center">
                  <v-col v-for="(letter, index) in letters" :key="index">
                              <v-hover v-slot="{ hover }">
                                            <v-card
              height="200"
              elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover }"
            >
                              <div
                class="text-h1 d-flex justify-center align-center fill-height"
              >
                  { letter }
              </div>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>
<script>
                  export default {
  name: 'App',
      data() {
        return {
                letters: ['A', 'B', 'C'],
        };
  },
};
</script>

 

예를 들어 B 카드 중 하나를 가리킬 때 눈에 띕니다.

호버 전환

호버 구성 요소를 사용하여 사용자 상호 작용에 따라 고도로 맞춤화된 방식으로 대응하는 구성 요소를 만들 수 있습니다. 예:

<template>
    <v-app>
      <v-hover v-slot="{ hover }">
              <v-card class="ma-4 pa-4" width="300">
                        <p class="mb-4">Free music for everyone!</p>
        <v-expand-transition>
                                    <div v-if="hover"><v-btn color="primary" dark>Sign up</v-btn></div>
                                              </v-expand-transition>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

 

카드 위에 마우스를 놓으면 v-expansion-transition 구성 요소 덕분에 "가입" 버튼이 포함된 추가 부분이 미끄러져 나옵니다.

요약

Vuetify는 현재 호버 상태에 따라 전환되는 구성 요소 스타일을 처리하기 위한 v-hover 구성 요소를 제공합니다. 호버 이벤트가 탐지되는 데 걸리는 시간을 지연시키는 것과 같은 사용자 정의 옵션을 제공합니다.

 

주간 뉴스레터에 등록하여 NAT의 더 좋은 콘텐츠로 최신 정보를 받아보십시오!

원래 codingbeautydev.com에서 게시됨