/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-bottom-navigation/usage.vue
80 строк
2 KB
J-Sek
docs: `overflow-visible` has no effect on VLayout without `!important`
26 дек 2025, 00:28
26 дек 2025, 00:28
f06270a
Код
Авторство
О чём код?
<template> <ExamplesUsageExample v-model="model" :code="code" :name="name" :options="options" > <v-layout class="border" style="height: 150px;"> <v-main></v-main> <v-bottom-navigation v-bind="props"> <v-btn value="history"> <v-icon>mdi-history</v-icon> <span>Recent</span> </v-btn> <v-btn value="favorites"> <v-icon>mdi-heart</v-icon> <span>Favorites</span> </v-btn> <v-btn value="nearby"> <v-icon>mdi-map-marker</v-icon> <span>Nearby</span> </v-btn> </v-bottom-navigation> </v-layout> <template v-slot:configuration> <v-slider v-model="elevation" label="Elevation" max="24" min="0" step="1"></v-slider> </template> </ExamplesUsageExample> </template> <script setup> const name = 'v-bottom-navigation' const model = ref('default') const options = ['grow', 'shift'] const elevation = ref(4) const props = computed(() => { return { elevation: elevation.value === 4 ? undefined : elevation.value, grow: model.value === 'grow' || undefined, mode: model.value === 'shift' ? 'shift' : undefined, } }) const slots = computed(() => { let str = '' str += ` <v-btn value="recent"> <v-icon>mdi-history</v-icon> <span>Recent</span> </v-btn> <v-btn value="favorites"> <v-icon>mdi-heart</v-icon> <span>Favorites</span> </v-btn> <v-btn value="nearby"> <v-icon>mdi-map-marker</v-icon> <span>Nearby</span> </v-btn> ` return str }) const code = computed(() => { return `<${name}${propsToString(props.value)}>${slots.value}</${name}>` }) </script>