VUE 탭을 사용하는 방법

및 구성 요소를 사용하여 vue.js에서 탭 인터페이스를 만듭니다. 단계는 다음과 같습니다. 가져 오기 구성 요소 : 'vuetify/lib'에서 import {vtabs, vtab}; 탭 그룹 만들기 그룹 : 탭 정의 : 탭 막대 위치 설정 : 소품 "위치"탭 폭 넓은 모드 설정 : 소품 "기타 기능 : 아이콘, 비활성화, 반응 형, 시각적 전환 효과"

vue 탭 사용

및 구성 요소는 탭 인터페이스를 만들기 위해 vue.js에 제공됩니다.

사용 단계 :

1. 컴포넌트 가져 오기 : VUE 파일에서 가져 오기 탭 구성 요소를 가져옵니다.

 <code class="js">import { VTabs, VTab } from 'vuetify/lib';</code>

2. 탭 그룹 만들기 : 구성 요소를 사용하여 탭 그룹을 정의하십시오.

 <code class="html"><v-tabs> <!-- 选项卡内容--> </v-tabs></code>

3. 정의 탭 : 구성 요소를 사용하여 각 탭을 정의하고 각 탭의 제목과 내용을 지정하십시오.

 <code class="html"><v-tab> <template>选项卡一</template> <!-- 内容一--> </v-tab> <v-tab> <template>选项卡二</template> <!-- 内容二--> </v-tab></code>

4. 탭 막대 위치 설정 : 탭 막대의 위치는 소품 "위치"를 통해 설정할 수 있습니다. 선택적 값은 "상단", "하단", "왼쪽"및 "오른쪽"이며 기본값은 "상단"입니다.

 <code class="html"><v-tabs position="bottom"> <!-- ... --> </v-tabs></code>

5. 탭 너비 모드 설정 : 탭 너비 모드는 소품 "grow"를 통해 설정할 수 있습니다. 선택적 값은 "true"및 "false"이고 기본값은 "false"입니다. "true"로 설정하면 탭은 내용 길이에 따라 너비를 자동으로 확장합니다.

 <code class="html"><v-tabs grow> <!-- ... --> </v-tabs></code>

기타 기능 :

• 지원 아이콘 : 아이콘은 소품 "아이콘"을 통해 추가 할 수 있습니다.
• 비활성화 지원 : "비활성화 된"소품을 통해 탭을 비활성화 할 수 있습니다.
• 응답 성 : 응답 형 중단 점은 소품 "모바일 브레이크 포인트"를 통해 설정할 수 있습니다.
• 시각적 전환 효과를 지원합니다. "게으른"소품을 통해 게으른로드 전이 효과를 활성화 할 수 있습니다.

위 내용은 VUE 탭을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!