/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-btn-toggle/prop-variant.vue
64 строки
2 KB
J-Sek
feat: migrate to MD3 typography (#22557)
28 янв 2026, 21:50
Не верифицирован
28 янв 2026, 21:50
311daf4
Код
Авторство
О чём код?
<template> <div class="d-flex align-center flex-column pa-6"> <div class="text-title-small">Default</div> <v-btn-toggle v-model="toggle" color="primary" > <v-btn icon="mdi-format-align-left"></v-btn> <v-btn icon="mdi-format-align-center"></v-btn> <v-btn icon="mdi-format-align-right"></v-btn> <v-btn icon="mdi-format-align-justify"></v-btn> </v-btn-toggle> <div class="mt-6 text-title-small">Text</div> <v-btn-toggle v-model="toggle" color="primary" variant="text" > <v-btn icon="mdi-format-align-left"></v-btn> <v-btn icon="mdi-format-align-center"></v-btn> <v-btn icon="mdi-format-align-right"></v-btn> <v-btn icon="mdi-format-align-justify"></v-btn> </v-btn-toggle> <div class="mt-6 text-title-small">Plain</div> <v-btn-toggle v-model="toggle" color="primary" variant="plain" > <v-btn icon="mdi-format-align-left"></v-btn> <v-btn icon="mdi-format-align-center"></v-btn> <v-btn icon="mdi-format-align-right"></v-btn> <v-btn icon="mdi-format-align-justify"></v-btn> </v-btn-toggle> <div class="mt-6 text-title-small">Outlined</div> <v-btn-toggle v-model="toggle" color="primary" variant="outlined" > <v-btn icon="mdi-format-align-left"></v-btn> <v-btn icon="mdi-format-align-center"></v-btn> <v-btn icon="mdi-format-align-right"></v-btn> <v-btn icon="mdi-format-align-justify"></v-btn> </v-btn-toggle> </div> </template> <script setup> import { ref } from 'vue' const toggle = ref(null) </script> <script> export default { data: () => ({ toggle: null, }), } </script>