vue.js - Vuetify 框架怎么查看有哪些CSS 类名，如何查询？

Question

vuetfiy 框架怎么查看有哪些CSSS类名？
比如下面的class="text-h2 pa-12" class="justify-end" 在什么地方可以完全查看这些类名具体是什么样式？

<template>
    <v-dialog width="auto" v-model="dialog">
        <v-card color="white" v-click-outside="{handler: onClickOutside}">
            <v-toolbar color="primary">
                <v-card-title>
                    <span>{{dialogData.title}}</span>
                </v-card-title>
            </v-toolbar>
            <v-card-text>
                <div class="text-h2 pa-12">{{dialogData.content}}</div>
            </v-card-text>
            <v-card-actions class="justify-end">
                <v-btn variant="text" @click="closeDialog">Close</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

Answer 1

样式和动画

Answer 2

在 Vuetify 框架中，要查看有哪些 CSS 类名，可以通过以下几种方式：

1. **官方文档**：
   Vuetify 的官方文档详细列出了各个组件的 CSS 类名。你可以访问 [Vuetify 官方文档](https://vuetifyjs.com/en/components/) 来查找特定组件的 CSS 类名。

2. **浏览器开发者工具**：
   使用浏览器的开发者工具（如 Chrome DevTools）可以检查页面上应用的 CSS 类名。右键点击页面元素，选择“检查”或“Inspect”，然后在开发者工具中查看元素的 CSS 类名。

3. **Vuetify 源代码**：
   如果你有访问 Vuetify 的源代码，可以直接在源代码中查找 CSS 类名。通常，这些类名会定义在组件的 `<style>` 标签内或外部的 CSS 文件中。

4. **第三方工具**：
   一些第三方工具或插件（如 Vue Devtools）也可以帮助你查看页面上使用的 CSS 类名。这些工具通常提供更为直观的界面来查看和调试 Vue 组件及其样式。

通过以上方法，你可以方便地查看 Vuetify 框架中的 CSS 类名。