/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-fab/usage.vue
51 строка
1 KB
John Leider
docs(VFab): usage example color issue
10 мар 2025, 16:34
10 мар 2025, 16:34
a7fb8e0
Код
Авторство
О чём код?
<template> <ExamplesUsageExample v-model="model" :code="code" :name="name" :options="options" > <div class="text-center"> <v-fab v-bind="props"></v-fab> </div> <template v-slot:configuration> <v-select v-model="color" :items="items" label="Color" clearable ></v-select> <v-checkbox v-model="extended" label="Extended"></v-checkbox> </template> </ExamplesUsageExample> </template> <script setup> const variants = ['outlined', 'tonal', 'flat', 'text', 'plain'] const name = 'v-fab' const model = shallowRef('default') const options = [...variants] const extended = shallowRef(false) const color = shallowRef() const items = ['primary', 'success', 'surface-variant'] const props = computed(() => { return { color: color.value || undefined, extended: extended.value || undefined, icon: !extended.value ? '$vuetify' : undefined, 'prepend-icon': extended.value ? '$vuetify' : undefined, text: extended.value ? 'Extended' : undefined, variant: variants.includes(model.value) ? model.value : undefined, } }) const slots = computed(() => { return '' }) const code = computed(() => { return `<${name}${propsToString(props.value)}>${slots.value}</${name}>` }) </script>