Vuetify로 하단 네비게이션에 부동 버튼을 추가
소개
Vuetify를 사용하면 뛰어난 UI를 매우 간단하게 만들 수 있지만, 조금 특별한 일을 하려고 하면 집착하는 경우가 많습니다.
이 기사에서는 모바일 앱에서 자주 볼 수 있는 하단 탐색에서 튀어나온 아이츠를 붙이는 방법을 설명합니다.
아이츠 
아이츠의 일반적인 명칭은, 아마 「오버랩 FAB」입니다만.
완성되는 것
개발 환경
아이콘 설치
우선 아이콘을 준비합시다. 이번에는 Fontawesome을 사용합니다.
환경에 맞추어 자유롭게 부디.
npm install @fortawesome/fontawesome-free -D
main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import '@fortawesome/fontawesome-free/css/all.css' /* この行を追加する */
하단 네비게이션 추가
v-app 지시문 뒤에 코드를 추가합니다.
App.vue
<template>
<v-app>
<!-- 省略 -->
<!-- ここからボトムナビゲーション -->
<v-bottom-navigation
dark
grow
>
<v-btn>
<span>Home</span>
<v-icon>fas fa-home</v-icon>
</v-btn>
<v-btn>
<span>Edit</span>
<v-icon>fas fa-edit</v-icon>
</v-btn>
</v-bottom-navigation>
<!-- ここまでボトムナビゲーション -->
</v-app>
</template>
하단 내비게이션이 표시되었습니다!
플로팅 버튼 준비
Vuetify에서는 v-speed-dial 지시어를 사용하여 자식 버튼을 포함하는 부동 버튼을 사용할 수 있습니다.
App.vue
<template>
<v-app>
<!-- 省略 -->
<!-- ここからフローティングボタン -->
<v-layout justify-center row wrap>
<v-speed-dial
v-model="fab"
>
<template v-slot:activator>
<v-btn
color="red darken-2"
dark
fab
>
<v-icon v-if="fab">mdi-close</v-icon>
<v-icon v-else>mdi-plus</v-icon>
</v-btn>
</template>
<v-btn
fab
dark
small
color="orange"
>
<v-icon>mdi-note</v-icon>
</v-btn>
<v-btn
fab
dark
small
color="red"
>
<v-icon>mdi-camera</v-icon>
</v-btn>
<v-btn
fab
dark
small
color="indigo"
>
<v-icon>mdi-file</v-icon>
</v-btn>
</v-speed-dial>
</v-layout>
<!-- ここまでフローティングボタン -->
<!-- 省略 -->
<script>
export default {
name: 'App',
components: {
},
data: () => ({
fab: false, /* フローティングボタン のために追加 */
}),
};
</script>
그리고는 플로팅 버튼을, 하단 네비게이션에 넣으면 완성이네요
완성, 그런 일은 없었다
죄송합니다. 아무래도 쉽게 할 수 없는 것 같습니다.
하단 네비게이션에 부동 버튼을 넣으면 매우 유감스러운 결과를 얻을 수 있습니다.
일단 소스도 둡니다.
App.vue
<template>
<v-app>
<!-- 省略 -->
<v-bottom-navigation
dark
grow
>
<v-btn>
<span>Home</span>
<v-icon>fas fa-home</v-icon>
</v-btn>
<!-- ここからフローティングボタン -->
<v-layout justify-center>
<v-speed-dial
v-model="fab"
>
<template v-slot:activator>
<v-btn
color="red darken-2"
dark
fab
>
<v-icon v-if="fab">mdi-close</v-icon>
<v-icon v-else>mdi-plus</v-icon>
</v-btn>
</template>
<v-btn
fab
dark
small
color="orange"
>
<v-icon>mdi-note</v-icon>
</v-btn>
<v-btn
fab
dark
small
color="red"
>
<v-icon>mdi-camera</v-icon>
</v-btn>
<v-btn
fab
dark
small
color="indigo"
>
<v-icon>mdi-file</v-icon>
</v-btn>
</v-speed-dial>
</v-layout>
<!-- ここまでフローティングボタン -->
<v-btn>
<span>Edit</span>
<v-icon>fas fa-edit</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
버튼의 스타일을 !important 로 무리하게 재기록하면 다소의 저항은 할 수 있을 것 같습니다만, 시간의 낭비입니다.
물론 나는 해냈다
그만두는 것이 길입니다
하단 네비게이션과 플로팅 버튼은 분리
하단 네비게이션에 부동 버튼을 넣을 수 없습니다
하단 네비게이션은 화면 하단에 고정되므로 드디어 플로팅 버튼도 하단 네비게이션에 포함하고 싶지만 작동하지 않습니다.
그런 다음 v-footer 지시문을 준비하고 그 안에 부동 버튼과 하단 탐색을 넣습니다.
...라는 이유로 v-footer 지시문에 부동 버튼과 하단 탐색을 넣습니다.
또한 v-footer에는 fixed 속성을 부여하여 화면 하단에 고정합니다.
App.vue
<template>
<v-app>
<!-- 省略 -->
<v-footer
padless
fixed
>
<v-row>
<v-col
cols="12"
class="pa-0"
>
<v-layout justify-center>
<v-speed-dial
v-model="fab"
>
<template v-slot:activator>
<v-btn
color="red darken-2"
dark
fab
class="float"
>
<v-icon v-if="fab">mdi-close</v-icon>
<v-icon v-else>mdi-plus</v-icon>
</v-btn>
</template>
<v-btn
fab
dark
small
color="orange"
>
<v-icon>mdi-note</v-icon>
</v-btn>
<v-btn
fab
dark
small
color="red"
>
<v-icon>mdi-camera</v-icon>
</v-btn>
<v-btn
fab
dark
small
color="indigo"
>
<v-icon>mdi-file</v-icon>
</v-btn>
</v-speed-dial>
</v-layout>
</v-col>
<v-col
cols="12"
class="pa-0"
>
<v-bottom-navigation
dark
grow
>
<v-btn>
<span>Home</span>
<v-icon>fas fa-home</v-icon>
</v-btn>
<v-btn>
<span>Edit</span>
<v-icon>fas fa-edit</v-icon>
</v-btn>
</v-bottom-navigation>
</v-col>
</v-row>
</v-footer>
</v-app>
</template>
마침내 표시 할 수있었습니다
마무리
부동 버튼을 하단 네비게이션에 겹칩니다.
우선, 플로팅 버튼을 배치하고 있는 row 의 높이를 0 으로 합니다.
App.vue
<template>
<v-app>
<!-- 省略 -->
<v-footer
padless
fixed
>
<v-row>
<v-col
cols="12"
class="pa-0"
style="height: 0px;" <!-- 高さを 0 にする -->
>
<!-- 省略 -->
</v-col>
</v-row>
</v-footer>
</v-app>
</template>
완전히 겹쳤습니다.
그런 다음 부동 버튼을 위쪽으로 밀어 내기 위해 스타일을 적용합니다.
App.vue
<template>
<v-app>
<!-- 省略 -->
<template v-slot:activator>
<v-btn
color="red darken-2"
dark
fab
class="float" <!-- 位置調整用のスタイルを適用 -->
>
<v-icon v-if="fab">mdi-close</v-icon>
<v-icon v-else>mdi-plus</v-icon>
</v-btn>
</template>
<!-- 省略 -->
</v-app>
</template>
<script>
export default {
name: 'App',
components: {
},
data: () => ({
fab: false,
}),
};
</script>
<style>
.float {
-webkit-transform: translateY(-20%); /* フローティングボタンを上部にズラす */
transform: translateY(-20%);
}
</style>
드디어 겨냥한 위치에 넣을 수 있었습니다
요약
Vuetify는 과도하게 훌륭하고 훌륭하지만, 단순히 너무 많이하면 도가니에 빠집니다.
역시 어떤 프레임워크를 사용하든 CSS의 기본적인 지식(특히 Flexbox)은 중요하네요.
그리고, 더 편한 방법 있으면 코멘트 주시면 기쁩니다!
Reference
이 문제에 관하여(Vuetify로 하단 네비게이션에 부동 버튼을 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/t-ube/items/d0cd49295b1ad85f2911텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
