/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-toolbar/usage.vue
52 строки
1 KB
J-Sek
feat: MD3 elevation levels (#22461)
28 янв 2026, 21:17
Не верифицирован
28 янв 2026, 21:17
dfce695
Код
Авторство
О чём код?
<template> <ExamplesUsageExample v-model="model" :code="code" :name="name" :options="options" > <div> <v-toolbar v-bind="props"> <template v-slot:append> <v-btn icon="mdi-menu"></v-btn> <v-btn icon="mdi-dots-vertical"></v-btn> </template> </v-toolbar> </div> <template v-slot:configuration> <v-select v-model="density" :items="['default', 'comfortable', 'compact']" label="Density"></v-select> <v-text-field v-model="title" label="Title" clearable></v-text-field> <v-checkbox v-model="collapse" label="Collapsed"></v-checkbox> </template> </ExamplesUsageExample> </template> <script setup> const name = 'v-toolbar' const model = ref('default') const collapse = ref() const density = ref('default') const title = ref('Toolbar') const options = ['elevated', 'bordered'] const props = computed(() => { return { border: model.value === 'bordered' ? true : undefined, collapse: collapse.value || undefined, density: density.value === 'default' ? undefined : density.value, elevation: model.value === 'elevated' ? 3 : undefined, title: title.value || undefined, } }) const slots = computed(() => { return `` }) const code = computed(() => { return `<${name}${propsToString(props.value)}>${slots.value}</${name}>` }) </script>