Vuetify

https://v2.vuetifyjs.com
Admin
Vuetify is a no design skills required UI Framework providing beautifully handcrafted Vue Components...
Tokens:34,504
Snippets:194
Trust Score:7.5
Update:6 months ago
Show doc for...
Tokens:
Raw
### v-menu Activator Slot Example

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-menu

This example demonstrates how to use the activator slot in v-menu to manually control the menu's activation. It shows how to bind event handlers and manage the menu's visibility state.

```html
<template>
  <v-menu
    v-model="menu"
    :close-on-content-click="false"
  >
    <template v-slot:activator="{ on, attrs }"
    >
      <v-btn
        color="indigo"
        dark
        v-bind="attrs"
        v-on="on"
      >
        Menu
      </v-btn>
    </template>

    <v-card>
      <v-list>
        <v-list-item>
          <v-list-item-title>NaBr</v-list-item-title>
        </v-list-item>

        <v-divider></v-divider>

        <v-list-item link>
          <v-list-item-title>Logout</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-card>
  </v-menu>
</template>

<script>
  export default {
    data: () => ({
      menu: false,
    }),
  }
</script>
```

--------------------------------

### Install Vuetify Dependencies for Webpack

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Install the required Vuetify and Sass dependencies for a manual Webpack setup.

```bash
yarn add vuetify@v2-stable
# OR
npm install vuetify@v2-stable
```

```bash
yarn add sass@~1.32 sass-loader deepmerge -D
# OR
npm install sass@~1.32 sass-loader deepmerge -D
```

--------------------------------

### Install Vuetify Nightly Builds

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Install nightly builds of Vuetify from the @vuetify/nightly NPM namespace using package aliases. These builds are for testing purposes only.

```bash
分支名称 | 用途 | package.json entry | 变更日志  
---|---|---|---  
`master` | Bug修复 | `"vuetify": "npm:@vuetify/nightly@latest"` | 变更日志  
`dev` | 新功能 | `"vuetify": "npm:@vuetify/nightly@dev"` | 变更日志  
`next` | Breaking changes | `"vuetify": "npm:@vuetify/nightly@next"` | 变更日志  

```

--------------------------------

### Install Nuxt Vuetify Module

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Add the Vuetify module to a Nuxt project and configure it in the build settings.

```bash
yarn add @nuxtjs/vuetify -D
# 或者
npm install @nuxtjs/vuetify -D
```

```javascript
// nuxt.config.js
{
  buildModules: [
    // 简单使用
    '@nuxtjs/vuetify',

    // 和选项一起
    ['@nuxtjs/vuetify', { /* 模块选项 */ }]
  ]
}
```

--------------------------------

### Install Vuetify with Electron Builder

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Add the electron-builder plugin to your project using Vue CLI to integrate Vuetify with Electron applications.

```bash
# 安装
vue add electron-builder

# 使用
yarn electron:build
yarn electron:serve

```

--------------------------------

### Add Capacitor Plugin for Vuetify

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Install the Capacitor plugin using Vue CLI to integrate Vuetify with Capacitor projects.

```bash
# 安装
$ vue add @nklayman/capacitor

# 使用
$ yarn capacitor:serve

```

--------------------------------

### v-menu Activator Slot Properties

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-menu

This example details the properties provided by the activator slot in v-menu, including attributes for accessibility and event handlers for controlling the menu's behavior.

```javascript
{
  attrs: { role: string, aria-haspopup: boolean, aria-expanded: string },
  on: { [eventName]: eventHandler },
  value: boolean
}
```

--------------------------------

### v-date-picker with Picker Date Synchronization

Source: https://v2.vuetifyjs.com/zh-Hans/components/date-pickers

Observe the `picker-date` prop to perform actions when the displayed month/year changes. This example uses the `.sync` modifier.

```html
<v-date-picker v-model="date" :picker-date.sync="pickerDate"></v-date-picker>
```

--------------------------------

### Add PWA Support to Vue CLI Project

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Install the Progressive Web App (PWA) Support package into an existing Vue CLI project.

```bash
vue add pwa

```

--------------------------------

### v-banner Icon Slot Example

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-banner

Customize the banner's icon using the icon slot. This allows for more complex or dynamic icon implementations.

```html
<template>
  <v-banner
    icon="custom-icon"
    color="info"
  >
    Discover Vuetify 3

    <template v-slot:icon>
      <v-icon
        large
        color="primary"
      >
        mdi-vuetify
      </v-icon>
    </template>
  </v-banner>
</template>
```

--------------------------------

### v-date-picker with Allowed Dates

Source: https://v2.vuetifyjs.com/zh-Hans/components/date-pickers

Specify allowed dates using an array, object, or function. This example shows a date picker for March 2018.

```html
<v-date-picker :allowed-dates="allowedDates"></v-date-picker>
```

--------------------------------

### Hex Color Model Example

Source: https://v2.vuetifyjs.com/zh-Hans/components/color-pickers

Represents a color value using the hexadecimal format.

```text
#FF00FF
```

--------------------------------

### Integrate Vuetify with Cordova

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Add the Cordova plugin via Vue CLI to use Vuetify with Cordova projects. Includes commands for installation and serving/building for different platforms.

```bash
# 如果 cordova 尚未安装
yarn global add cordova

# 安装
vue add cordova

# 使用
yarn cordova-serve-android # Development Android
yarn cordova-build-android # Build Android
yarn cordova-serve-ios # Development IOS
yarn cordova-build-ios # Build IOS
yarn cordova-serve-browser # Development Browser
yarn cordova-build-browser # Build Browser

```

--------------------------------

### v-date-picker with Show Adjacent Months

Source: https://v2.vuetifyjs.com/zh-Hans/components/date-pickers

Display days from the previous and next months using the `show-adjacent-months` prop. This example shows April 2026.

```html
<v-date-picker show-adjacent-months></v-date-picker>
```

--------------------------------

### v-banner Actions Slot Example

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-banner

Use the actions slot to add interactive elements like buttons to the banner. The dismiss method within this slot can be used to close the banner.

```html
<template>
  <v-banner
    :value="true"
    icon="mdi-alert"
    color="warning"
  >
    Learn more about this template

    <template v-slot:actions>
      <v-btn
        text
        color="white"
      >
        Dismiss
      </v-btn>
    </template>
  </v-banner>
</template>
```

--------------------------------

### Initialize Vuetify in Main Entry

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Import the Vuetify instance and mount it to the root Vue application.

```javascript
// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')
```

--------------------------------

### Initialize Vue Project with CLI

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Create a new Vue project and add the Vuetify plugin using the Vue CLI.

```bash
vue create my-app
# 切换到新项目目录
cd my-app
```

```bash
vue add vuetify
```

--------------------------------

### Launch Vue UI

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Verify the Vue CLI version and launch the graphical user interface for project management.

```bash
# 确保 Vue CLI 版本是 >= 3.0
vue --version
//或
vue -V

# 然后启动 UI
vue ui
```

--------------------------------

### touchstart:day

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-calendar

The touchstart event on a day. The event passed is the day object. Native mouse event is passed as a second argument.

```APIDOC
## touchstart:day

### Description
The touchstart event on a day. The event passed is the day object. Native mouse event is passed as a second argument.

### Method
Event

### Endpoint
N/A

### Parameters
#### Event Data
- **date** (string) - The date of the event.
- **time** (string) - The time of the event.
- **year** (number) - The year of the event.
- **month** (number) - The month of the event.
- **day** (number) - The day of the month.
- **hour** (number) - The hour of the event.
- **minute** (number) - The minute of the event.
- **weekday** (number) - The day of the week.
- **hasDay** (boolean) - Indicates if the day is present.
- **hasTime** (boolean) - Indicates if the time is present.
- **past** (boolean) - Indicates if the event is in the past.
- **present** (boolean) - Indicates if the event is happening now.
- **future** (boolean) - Indicates if the event is in the future.
- **timeToY** (function) - Converts time to a Y coordinate.

#### Native Event
- **MouseEvent | TouchEvent** - The native browser event.

### Response Example
```json
{
  "date": "2023-10-27",
  "time": "10:30",
  "year": 2023,
  "month": 10,
  "day": 27,
  "hour": 10,
  "minute": 30,
  "weekday": 5,
  "hasDay": true,
  "hasTime": true,
  "past": false,
  "present": false,
  "future": true,
  "timeToY": "function"
}
```
```

--------------------------------

### v-fab-transition API

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-fab-transition

Documentation for the v-fab-transition component properties.

```APIDOC
## v-fab-transition

### Description
A transition component designed for floating action buttons.

### Properties
- **group** (boolean) - Default: false - Creates a `transition-group` component.
- **hide-on-leave** (boolean) - Default: false - Hides the element on leave (no exit animation).
- **leave-absolute** (boolean) - Default: false - Sets the leave element to absolute position (useful for FLIP).
- **mode** (string) - Default: 'out-in' - Sets the transition mode (not applied to transition groups).
- **origin** (string) - Default: 'center center' - Sets the animation origin on the element.
```

--------------------------------

### v-banner Default Slot Example

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-banner

The default slot is used for the main content of the banner. This is where the primary message or information is displayed.

```html
<template>
  <v-banner
    single-line
    icon="mdi-information"
  >
    This is a single-line banner message.
  </v-banner>
</template>
```

--------------------------------

### v-date-picker with Readonly Prop

Source: https://v2.vuetifyjs.com/zh-Hans/components/date-pickers

Disable the selection of new dates by adding the `readonly` prop. This example shows a date picker for April 2026.

```html
<v-date-picker readonly></v-date-picker>
```

--------------------------------

### v-scale-transition Component API

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-scale-transition

Documentation for the properties available on the v-scale-transition component.

```APIDOC
## v-scale-transition API

### Description
The v-scale-transition component provides a scaling transition effect. It supports standard Vue transition properties and specific configuration for animation behavior.

### Properties
- **group** (boolean) - Optional - Default: false - Creates a `transition-group` component.
- **hide-on-leave** (boolean) - Optional - Default: false - Hides the element on leave (no exit animation).
- **leave-absolute** (boolean) - Optional - Default: false - Sets the leaving element to absolute position (useful for FLIP).
- **mode** (string) - Optional - Default: undefined - Sets the transition mode (not applied to transition groups).
- **origin** (string) - Optional - Default: 'top center 0' - Sets the animation origin on the element.
```

--------------------------------

### Basic v-color-picker Configuration

Source: https://v2.vuetifyjs.com/zh-Hans/components/color-pickers

Configures the dot size and maximum height of the swatches area for the color picker.

```html
<v-color-picker
  dot-size="25"
  swatches-max-height="200"
></v-color-picker>
```

--------------------------------

### v-date-picker with Height (z-axis)

Source: https://v2.vuetifyjs.com/zh-Hans/components/date-pickers

The `v-date-picker` component supports a maximum height (z-axis) of 24. This example shows a date picker for April 2026.

```html
<v-date-picker height="24"></v-date-picker>
```

--------------------------------

### Basic v-overflow-btn Usage

Source: https://v2.vuetifyjs.com/zh-Hans/components/overflow-btns

Use the v-overflow-btn component to create a selection list. This is the most basic implementation.

```html
<v-overflow-btn></v-overflow-btn>
```

--------------------------------

### Loading v-overflow-btn

Source: https://v2.vuetifyjs.com/zh-Hans/components/overflow-btns

Display a 'loading' state with a linear progress bar within the v-overflow-btn. This indicates an ongoing operation.

```html
<v-overflow-btn loading :items='["foo", "bar", "baz"]'></v-overflow-btn>
```

--------------------------------

### v-date-picker with Custom Icons

Source: https://v2.vuetifyjs.com/zh-Hans/components/date-pickers

Override the default icons used within the date picker. This example shows a date picker for April 2026 with custom icons.

```html
<v-date-picker :prev-icon="'mdi-chevron-left'" :next-icon="'mdi-chevron-right'"></v-date-picker>
```

--------------------------------

### $vuetify.goTo Function

Source: https://v2.vuetifyjs.com/zh-Hans/api/vuetify

Documentation for the $vuetify.goTo function used to scroll to specific targets within the application.

```APIDOC
## $vuetify.goTo

### Description
Scrolls to a target position or element using the provided configuration options.

### Method
Function Call

### Parameters
#### Arguments
- **target** (number | string | HTMLElement | Vue) - Required - The target element, selector, or pixel offset to scroll to.
- **options** (Object) - Optional - Configuration object for the scroll behavior.
  - **container** (string | HTMLElement | Vue) - Optional - The container to scroll within.
  - **duration** (number) - Optional - The duration of the scroll animation in milliseconds.
  - **offset** (number) - Optional - The offset from the target position.
  - **easing** (VuetifyGoToEasing) - Optional - The easing function to use for the animation.
  - **appOffset** (boolean) - Optional - Whether to account for the application layout offset.

### Response
- **Promise<number>** - Returns a promise that resolves with the final scroll position.
```

--------------------------------

### 在模板中导入全局变量

Source: https://v2.vuetifyjs.com/zh-Hans/features/sass-variables

在 Vue 组件的 style 块中导入全局 Vuetify 样式文件。

```sass
<style lang="sass">
  @import '~vuetify/src/styles/styles.sass'

  @media #{map-get($display-breakpoints, 'md-and-down')}
    .custom-class
      display: none
</style>
```

--------------------------------

### 在模板中导入组件变量

Source: https://v2.vuetifyjs.com/zh-Hans/features/sass-variables

在 Vue 组件的 style 块中导入特定组件的 SASS 变量文件。

```scss
<style lang="scss">
  @import '~vuetify/src/components/VStepper/_variables.scss';

  .custom-class {
    padding: $stepper-step-padding;
  }
</style>
```

--------------------------------

### Include Fonts and Icons via CDN

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Add Roboto font and Material Design Icons to your index.html file.

```html
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
```

--------------------------------

### 自定义变量文件详细示例

Source: https://v2.vuetifyjs.com/zh-Hans/features/sass-variables

展示如何定义全局变量、组件特定变量以及 SASS 映射变量。

```scss
// src/sass/variables.scss

// 全局变量
$body-font-family: 'Work Sans', serif;
$border-radius-root: 6px;
$font-size-root: 14px;

// 变量必须定义在 import 之前
$btn-letter-spacing: 0;
$btn-font-weight: 400;
$list-item-title-font-size: 0.929rem;
$list-item-dense-title-font-size: 0.929rem;
$list-item-dense-title-font-weight: initial;
$fab-icon-sizes: (
  'small': 20
);
$btn-sizes: (
  'default': 41,
  'large': 54
);

$headings: (
  'h1': (
    'size': 3.3125rem,
    'line-height': 1.15em
  ),
  'h2': (
    'size': 2.25rem,
    'line-height': 1.5em
  )
);
```

--------------------------------

### Configure Component Spacing and Padding

Source: https://v2.vuetifyjs.com/zh-Hans/api/vuetify

Sets default spacing and padding values for specific UI elements.

```scss
$input-top-spacing| 16px !default;
```

```scss
$kbd-padding| .2em .4rem !default;
```

--------------------------------

### Configure Grid System

Source: https://v2.vuetifyjs.com/zh-Hans/api/vuetify

Adjusts grid breakpoints, column counts, and gutter spacing.

```scss
$grid-breakpoints| map-deep-merge( ( 'xs': 0, 'sm': 600px, 'md': 960px, 'lg': 1280px - 16px, 'xl': 1920px - 16px ), $grid-breakpoints );
```

```scss
$grid-columns| 12 !default;
```

```scss
$grid-gutter| $spacer * 6 !default;
```

```scss
$grid-gutters| map-deep-merge( ( 'xs': $grid-gutter / 12, 'sm': $grid-gutter / 6, 'md': $grid-gutter / 3, 'lg': $grid-gutter * 2/3, 'xl': $grid-gutter ), $grid-gutters );
```

--------------------------------

### v-tooltip Component API

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-tooltip

Detailed documentation for the v-tooltip component properties, slots, and styling variables.

```APIDOC
## v-tooltip Component

### Description
The v-tooltip component is used to display information when a user interacts with an element via hover, focus, or click.

### Properties
- **absolute** (boolean) - Optional - Applies position: absolute to the component.
- **activator** (any) - Optional - Specifies a custom activator when not using the activator slot.
- **allow-overflow** (boolean) - Optional - Removes overflow repositioning.
- **attach** (any) - Optional - Specifies a DOM element to attach the component to.
- **bottom** (boolean) - Optional - Aligns the component to the bottom.
- **close-delay** (number | string) - Optional - Delay in ms before closing.
- **color** (string) - Optional - Sets the color of the component.
- **content-class** (string) - Optional - Applies a custom class to the detached element.
- **disabled** (boolean) - Optional - Disables the tooltip.
- **eager** (boolean) - Optional - Forces the component content to render on load.
- **internal-activator** (boolean) - Optional - Specifies if an internal activator is used.
- **left** (boolean) - Optional - Aligns the component to the left.
- **max-width** (number | string) - Optional - Sets the maximum width of the content.
- **min-width** (number | string) - Optional - Sets the minimum width of the content.
- **nudge-bottom/left/right/top/width** (number | string) - Optional - Adjusts the position or width of the content.
- **offset-overflow** (boolean) - Optional - Flips the component to the other side when repositioning due to overflow.
- **open-delay** (number | string) - Optional - Delay in ms before opening.
- **open-on-click** (boolean) - Optional - Opens on click.
- **open-on-focus** (boolean) - Optional - Opens on focus.
- **open-on-hover** (boolean) - Optional - Opens on hover.
- **position-x/y** (number) - Optional - Used for positioning when not using an activator.
- **right** (boolean) - Optional - Aligns the component to the right.
- **tag** (string) - Optional - Custom tag for the activator wrapper.
- **top** (boolean) - Optional - Aligns the component to the top.
- **transition** (string) - Optional - Sets the component transition.
- **value** (any) - Optional - Controls visibility.
- **z-index** (number | string) - Optional - Sets the z-index.

### Slots
- **activator** - Used to activate the component.
- **default** - The default Vue slot for tooltip content.

### SASS Variables
- **$tooltip-background-color** - Background color of the tooltip.
- **$tooltip-text-color** - Text color of the tooltip.
- **$tooltip-opacity** - Opacity of the tooltip.
- **$tooltip-border-radius** - Border radius of the tooltip.
- **$tooltip-font-size** - Font size of the tooltip.
- **$tooltip-padding** - Padding of the tooltip.
```

--------------------------------

### v-overflow-btn with Hint

Source: https://v2.vuetifyjs.com/zh-Hans/components/overflow-btns

Provide user guidance by adding a 'hint' prop to the v-overflow-btn. This text appears below the input field.

```html
<v-overflow-btn hint='I am a hint text' persistent :items='["foo", "bar", "baz"]'></v-overflow-btn>
```

--------------------------------

### touchstart:time-category event structure

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-calendar

The event object passed during a touchstart interaction in the category view, containing date/time metadata and helper methods.

```typescript
{
  date: string,
  time: string,
  year: number,
  month: number,
  day: number,
  hour: number,
  minute: number,
  weekday: number,
  hasDay: boolean,
  hasTime: boolean,
  past: boolean,
  present: boolean,
  future: boolean,
  timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false,
  timeDelta: (time: string | number | {hour: number, minute: number}): number | false,
  minutesToPixels: (minutes: number): number,
  week: [
    {
      date: string,
      time: string,
      year: number,
      month: number,
      day: number,
      hour: number,
      minute: number,
      weekday: number,
      hasDay: boolean,
      hasTime: boolean,
      past: boolean,
      present: boolean,
      future: boolean
    }
  ]
}, TouchEvent
```

--------------------------------

### v-scroll-x-reverse-transition API

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-scroll-x-reverse-transition

Documentation for the v-scroll-x-reverse-transition component properties.

```APIDOC
## v-scroll-x-reverse-transition

### Description
A transition component that provides a horizontal reverse scroll effect.

### Properties
- **group** (boolean) - Optional - Default: false - Creates a `transition-group` component.
- **hide-on-leave** (boolean) - Optional - Default: false - Hides the leaving element (no exit animation).
- **leave-absolute** (boolean) - Optional - Default: false - Sets the leaving element to absolute position (useful for FLIP).
- **mode** (string) - Optional - Default: undefined - Sets the transition mode (not applied to transition groups).
- **origin** (string) - Optional - Default: 'top center 0' - Sets the animation origin on the element.
```

--------------------------------

### touchstart:time-category Event

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-calendar

Triggered when a touchstart event occurs at a specific time in the category view of the calendar.

```APIDOC
## touchstart:time-category

### Description
The touchstart event at a specific time in the category view. The event passed is the day & time object. A native mouse event is passed as a second argument.

### Parameters
#### Event Object
- **date** (string) - Date string
- **time** (string) - Time string
- **year** (number) - Year
- **month** (number) - Month
- **day** (number) - Day
- **hour** (number) - Hour
- **minute** (number) - Minute
- **weekday** (number) - Weekday index
- **hasDay** (boolean) - Indicates if the event has a day
- **hasTime** (boolean) - Indicates if the event has a time
- **past** (boolean) - Indicates if the event is in the past
- **present** (boolean) - Indicates if the event is in the present
- **future** (boolean) - Indicates if the event is in the future
- **timeToY** (function) - Calculates Y position for a given time
- **timeDelta** (function) - Calculates time delta
- **minutesToPixels** (function) - Converts minutes to pixel value
- **week** (array) - Array of day objects representing the week

### Response Example
{
  "date": "2023-10-27",
  "time": "14:30",
  "year": 2023,
  "month": 10,
  "day": 27,
  "hour": 14,
  "minute": 30,
  "weekday": 5,
  "hasDay": true,
  "hasTime": true,
  "past": false,
  "present": true,
  "future": false
}
```

--------------------------------

### Configure Typography

Source: https://v2.vuetifyjs.com/zh-Hans/api/vuetify

Defines font families and heading styles using map-deep-merge.

```scss
$heading-font-family| $body-font-family !default;
```

```scss
$headings| map-deep-merge( ( 'h1': ( 'size': 6rem, 'weight': 300, 'line-height': 6rem, 'letter-spacing': -.015625em, 'font-family': $heading-font-family, 'text-transform': false ), 'h2': ( 'size': 3.75rem, 'weight': 300, 'line-height': 3.75rem, 'letter-spacing': -.0083333333em, 'font-family': $heading-font-family, 'text-transform': false ), 'h3': ( 'size': 3rem, 'weight': 400, 'line-height': 3.125rem, 'letter-spacing': normal, 'font-family': $heading-font-family, 'text-transform': false ), 'h4': ( 'size': 2.125rem, 'weight': 400, 'line-height': 2.5rem, 'letter-spacing': .0073529412em, 'font-family': $heading-font-family, 'text-transform': false ), 'h5': ( 'size': 1.5rem, 'weight': 400, 'line-height': 2rem, 'letter-spacing': normal, 'font-family': $heading-font-family, 'text-transform': false ), 'h6': ( 'size': 1.25rem, 'weight': 500, 'line-height': 2rem, 'letter-spacing': .0125em, 'font-family': $heading-font-family, 'text-transform': false ), 'subtitle-1': ( 'size': 1rem, 'weight': normal, 'line-height': 1.75rem, 'letter-spacing': .009375em, 'font-family': $body-font-family, 'text-transform': false ), 'subtitle-2': ( 'size': .875rem, 'weight': 500, 'line-height': 1.375rem, 'letter-spacing': .0071428571em, 'font-family': $body-font-family, 'text-transform': false ), 'body-1': ( 'size': 1rem, 'weight': 400, 'line-height': 1.5rem, 'letter-spacing': .03125em, 'font-family': $body-font-family, 'text-transform': false ), 'body-2': ( 'size': .875rem, 'weight': 400, 'line-height': 1.25rem, 'letter-spacing': .0178571429em, 'font-family': $body-font-family, 'text-transform': false ), 'button': ( 'size': .875rem, 'weight': 500, 'line-height': 2.25rem, 'letter-spacing': .0892857143em, 'font-family': $body-font-family, 'text-transform': uppercase ), 'caption': ( 'size': .75rem, 'weight': 400, 'line-height': 1.25rem, 'letter-spacing': .0333333333em, 'font-family': $body-font-family, 'text-transform': false ), 'overline': ( 'size': .75rem, 'weight': 500, 'line-height': 2rem, 'letter-spacing': .1666666667em, 'font-family': $body-font-family, 'text-transform': uppercase ) ), $headings );
```

```scss
$line-height-root| 1.5 !default;
```

--------------------------------

### 自定义变量文件示例

Source: https://v2.vuetifyjs.com/zh-Hans/features/sass-variables

定义 SASS 变量以覆盖 Vuetify 的默认样式。

```scss
// assets/variables.scss

// 你想修改的变量
$btn-border-radius: 0px;

// 修改 SASS 映射的变量
$material-light: ( cards: blue );
```

--------------------------------

### Configure Light Theme Variables

Source: https://v2.vuetifyjs.com/zh-Hans/api/vuetify

Defines the light theme color map using map-deep-merge to override default values.

```scss
$material-light| map-deep-merge( ( 'status-bar': ( 'regular': map-get($grey, 'lighten-2'), 'lights-out': rgba(map-get($shades, 'white'), 0.7) ), 'app-bar': map-get($grey, 'lighten-4'), 'background': map-get($shades, 'white'), 'bottom-navigation': map-get($shades, 'white'), 'surface': map-get($shades, 'white'), 'calendar': ( 'background-color': map-get($shades, 'white'), 'outside-background-color': #f7f7f7, 'weeknumber-background-color': #f1f3f4, 'line-color': map-get($grey, 'lighten-2'), 'interval-color': map-get($grey, 'darken-3'), 'interval-line-color': map-get($grey, 'lighten-2'), 'text-color': map-get($shades, 'black'), 'past-color': rgba(map-get($shades, 'black'), .38) ), 'cards': map-get($shades, 'white'), 'chips': #e0e0e0, 'code': ( 'background': rgba(map-get($shades, 'black'), 0.05), 'color': currentColor ), 'kbd': ( 'background': #212529, 'color': map-get($shades, 'white') ), 'dividers': rgba(map-get($shades, 'black'), 0.12), 'text': ( 'theme': map-get($shades, 'white'), 'primary': rgba(map-get($shades, 'black'), 0.87), 'secondary': rgba(map-get($shades, 'black'), 0.6), 'disabled': rgba(map-get($shades, 'black'), 0.38), 'link': map-get($blue, 'darken-2'), 'link-hover': map-get($grey, 'darken-3') ), 'icons': ( 'active': rgba(map-get($shades, 'black'), 0.54), 'inactive': rgba(map-get($shades, 'black'), 0.38) ), 'inputs': ( 'box': rgba(map-get($shades, 'black'), 0.04), 'solo-inverted': rgba(map-get($shades, 'black'), 0.06), 'solo-inverted-focused': map-get($grey, 'darken-3'), 'solo-inverted-focused-label': rgba(map-get($shades, 'white'), .7), 'solo-inverted-focused-placeholder': rgba(map-get($shades, 'white'), 0.5), 'solo-inverted-focused-text': map-get($shades, 'white') ), 'buttons': ( 'disabled': rgba(map-get($shades, 'black'), 0.26), 'focused': rgba(map-get($shades, 'black'), 0.12), 'focused-alt': rgba(map-get($shades, 'white'), 0.6), 'pressed': rgba(#999, 0.4) ), 'expansion-panels': ( 'focus': map-get($grey, 'lighten-3') ), 'navigation-drawer': map-get($shades, 'white'), 'selection-controls': ( 'disabled': rgba(map-get($shades, 'black'), 0.26), 'thumb': ( 'inactive': map-get($shades, 'white'), 'disabled': map-get($grey, 'lighten-5') ), 'track': ( 'inactive': rgba(map-get($shades, 'black'), 0.38), 'disabled': rgba(map-get($shades, 'black'), 0.12) ) ), 'slider': ( 'active': rgba(map-get($shades, 'black'), 0.38), 'inactive': rgba(map-get($shades, 'black'), 0.26), 'disabled': rgba(map-get($shades, 'black'), 0.26), 'discrete': map-get($shades, 'black') ), 'skeleton': linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)), 'states': ( 'hover': 0.04, 'focus': 0.12, 'selected': 0.08, 'activated': 0.12, 'pressed': 0.16, 'dragged': 0.08 ), 'tabs': rgba(0, 0, 0, 0.54), 'toggle-buttons': ( 'color': map-get($shades, 'black') ), 'text-fields': ( 'filled': rgba(map-get($shades, 'black'), 0.06), 'filled-hover': rgba(map-get($shades, 'black'), 0.12), 'outlined': rgba(map-get($shades, 'black'), 0.38), 'outlined-disabled': rgba(map-get($shades, 'black'), 0.26), 'outlined-hover': rgba(map-get($shades, 'black'), 0.86) ), 'toolbar': map-get($shades, 'white'), 'input-bottom-line': rgba(map-get($shades, 'black'), 0.42), 'stepper': ( 'active': rgba(map-get($shades, 'white'), 1), 'completed': rgba(map-get($shades, 'black'), 0.87), 'hover': rgba(map-get($shades, 'black'), 0.54) ), 'table': ( 'active': map-get($grey, 'lighten-4'), 'hover': map-get($grey, 'lighten-3'), 'group': map-get($grey, 'lighten-3') ), 'picker': ( 'body': map-get($shades, 'white'), 'clock': map-get($grey, 'lighten-2'), 'indeterminateTime': map-get($grey, 'lighten-1'), 'title': map-get($grey, 'lighten-2') ), 'color-picker': ( 'checkerboard': rgba(map-get($shades, 'white'), 0) ), 'bg-color': map-get($shades, 'white'), 'fg-color': map-get($shades, 'black'), 'text-color': map-get($shades, 'black'), 'primary-text-percent': 0.87, 'secondary-text-percent': 0.6, 'disabledORhints-text-percent': 0.38, 'divider-percent': 0.12, 'active-icon-percent': 0.54, 'inactive-icon-percent': 0.38 ), $material-light );
```

--------------------------------

### v-menu API

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-menu

Documentation for the v-menu component's properties, events, and slots.

```APIDOC
## v-menu API

### Description
Provides copy-paste ready CSS & JavaScript patterns with accessibility baked in for menus.

### Properties

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None

## Properties

| Name | Type | Default | Description |
|---|---|---|---|
| absolute | boolean | false | Applies the `position: absolute` positioning to the component. |
| activator | any | undefined | Specify a custom activator when not using the activator slot. String can be any valid querySelector, object can be any valid Node. |
| allow-overflow | boolean | false | Removes the overflow repositioning of the content. |
| attach | any | false | Attaches the component to another node. Can be any valid querySelector string or any valid Node. Defaults to the root `v-app` element. |
| auto | boolean | false | Centers the list on the selected element. |
| bottom | boolean | false | Aligns the component to the bottom. |
| close-delay | number | string | 0 | The number of milliseconds to wait before closing the component. Only applies when using the `open-on-hover` prop. |
| close-on-click | boolean | true | Specifies that the menu should close when the activator is clicked outside. |
| close-on-content-click | boolean | true | Specifies whether the menu should close when the content is clicked. |
| content-class | string | undefined | Apply custom classes to the detached element. Useful for applying classes to the detached menu content. |
| content-props | object | {} | Applies props/attributes to the detached menu. Useful for applying `data-cy` for testing purposes. |
| dark | boolean | false | Applies dark theme variant to the component. |
| disable-keys | boolean | false | Removes all keyboard interaction functionality. |
| disabled | boolean | false | Disables the menu. |
| eager | boolean | false | Forces the component content to render on load. Useful for SEO optimization. |
| internal-activator | boolean | false | Detaches the menu content internally, contrary to the documentation. |
| left | boolean | false | Aligns the component to the left. |
| light | boolean | false | Applies light theme variant to the component. |
| max-height | number | string | auto | Sets the maximum height of the menu content. |
| max-width | number | string | auto | Sets the maximum width of the content. |
| min-width | number | string | undefined | Sets the minimum width of the content. |
| nudge-bottom | number | string | 0 | Nudges the content down. |
| nudge-left | number | string | 0 | Nudges the content to the left. |
| nudge-right | number | string | 0 | Nudges the content to the right. |
| nudge-top | number | string | 0 | Nudges the content up. |
| nudge-width | number | string | 0 | Nudges the content width. |
| offset-overflow | boolean | false | Causes the component to flip to the other side when repositioned due to overflow. |
| offset-x | boolean | false | Offsets the menu on the x-axis, works in conjunction with left/right. |
| offset-y | boolean | false | Offsets the menu on the y-axis, works in conjunction with top/bottom. |
| open-delay | number | string | 0 | The number of milliseconds to wait before opening the component. Only applies when using the `open-on-hover` prop. |
| open-on-click | boolean | true | Specifies whether to open the menu on activator click. |
| open-on-focus | boolean | false | Opens the menu when the activator gains focus. |
| open-on-hover | boolean | false | Specifies whether to open the menu on activator hover. |
| origin | string | 'top left' | Sets the origin of the animation on the element. |
| position-x | number | undefined | Used to position the content when not using the activator slot. |
| position-y | number | undefined | Used to position the content when not using the activator slot. |
| return-value | any | undefined | The value to update when the menu is closed - must be a primitive value. Supports dot notation. |
| right | boolean | false | Aligns the component to the right. |
| rounded | boolean | string | undefined | Applies the `border-radius` style to the specified component. |
| tile | boolean | false | Removes the `border-radius` style from the component. |
| top | boolean | false | Aligns the component to the top. |
| transition | boolean | string | v-menu-transition | Sets the component transition. Can be a built-in transition or a custom one. |
| value | any | undefined | Controls the visibility of the component. |
| z-index | number | string | undefined | The z-index to use for the component. |

## Events

| Name | Description |
|---|---|
| input | Fired when the bound model is updated. |

## Slots

| Name | Description |
|---|---|
| activator | When used, will activate the component after clicking (or hovering a specific component), it manually prevents event propagation. If the component is opened by the model without this slot, you will need to manually prevent event propagation. |
| | ```
{
  attrs: { role: string, aria-haspopup: boolean, aria-expanded: string },
  on: { [eventName]: eventHandler },
  value: boolean
}
``` |
| default | The default Vue slot. |

## SASS Variables

| Name | Default | Description |
|---|---|---|
| $menu-content-border-radius | $border-radius-root !default |  |
| $menu-content-elevation | 8 !default |  |
```

--------------------------------

### Available Overflow Utility Classes

Source: https://v2.vuetifyjs.com/zh-Hans/styles/overflow

List of all supported overflow utility classes for controlling element content bounds.

```text
overflow-auto
overflow-hidden
overflow-visible
overflow-x-auto
overflow-x-hidden
overflow-x-visible
overflow-y-auto
overflow-y-hidden
overflow-y-visible
```

--------------------------------

### Using Vuetify with CDN

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Include Vuetify and Vue via CDN in your index.html for quick project testing without Vue CLI. Ensure your application is wrapped in a v-app component.

```html
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>Hello world</v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

```

--------------------------------

### Basic v-date-picker

Source: https://v2.vuetifyjs.com/zh-Hans/components/date-pickers

A functional date selection component for picking a single date or a date range. Accepts ISO 8601 date strings.

```html
<v-date-picker></v-date-picker>
```

--------------------------------

### v-slide-x-reverse-transition Component API

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-slide-x-reverse-transition

API reference for the v-slide-x-reverse-transition component properties.

```APIDOC
## v-slide-x-reverse-transition

### Description
A transition component that provides a slide-x-reverse animation effect.

### Properties
- **group** (boolean) - Default: false - Creates a `transition-group` component.
- **hide-on-leave** (boolean) - Default: false - Hides the element on leave (no exit animation).
- **leave-absolute** (boolean) - Default: false - Sets the leave element to absolute position (useful for FLIP).
- **mode** (string) - Default: undefined - Sets the transition mode (not applied to transition-group).
- **origin** (string) - Default: 'top center 0' - Sets the animation origin on the element.
```

--------------------------------

### Set Default Material Theme

Source: https://v2.vuetifyjs.com/zh-Hans/api/vuetify

Sets the default material theme to the light variant.

```scss
$material-theme| $material-light !default;
```

--------------------------------

### v-date-picker with Range Selection

Source: https://v2.vuetifyjs.com/zh-Hans/components/date-pickers

Select a date range using the `range` prop. The component's model should be an array of two dates or an empty array.

```html
<v-date-picker v-model="dateRange" range></v-date-picker>
```

--------------------------------

### v-slide-y-reverse-transition Component API

Source: https://v2.vuetifyjs.com/zh-Hans/api/v-slide-y-reverse-transition

Documentation for the properties of the v-slide-y-reverse-transition component.

```APIDOC
## v-slide-y-reverse-transition

### Description
A transition component that provides a vertical slide-y-reverse animation effect.

### Properties
- **group** (boolean) - Optional - Default: false - Creates a `transition-group` component.
- **hide-on-leave** (boolean) - Optional - Default: false - Hides the element on leave (no exit animation).
- **leave-absolute** (boolean) - Optional - Default: false - Sets the leave element to absolute position (useful for FLIP).
- **mode** (string) - Optional - Default: undefined - Sets the transition mode (not applied to transition-group).
- **origin** (string) - Optional - Default: 'top center 0' - Sets the animation origin on the element.
```

--------------------------------

### Create Vuetify Plugin

Source: https://v2.vuetifyjs.com/zh-Hans/getting-started/installation

Define the Vuetify plugin instance for your Vue application.

```javascript
// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)
```

```javascript
// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)
```
Tokens:
Raw