Skip to content

V-menu

v-menu 구성 요소는 활성화하는 데 사용된 요소의 위치에 메뉴를 표시합니다.

Usage

사용시, activator 슬롯을 꼭 추가해야 한다.

Example 

    <v-menu
        transition="slide-y-transition"
        :offset-y="true"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
            icon
            @click="onClickConfigButton"
            v-bind="attrs"
            v-on="on"
        >
          <v-icon>settings</v-icon>
        </v-btn>
      </template>

      <v-list>
        <v-list-item>
          <v-list-item-title v-text="'API Origin'"></v-list-item-title>
        </v-list-item>
        <v-list-item>
          <v-list-item-title v-text="'Dark/Light'"></v-list-item-title>
        </v-list-item>
        <v-list-item>
          <v-list-item-content v-text="'Language'"></v-list-item-content>
        </v-list-item>
      </v-list>
    </v-menu>

Activator and tooltip

With the new v-slot syntax, nested activators such as those seen with a v-menu and v-tooltip attached to the same activator button, need a particular setup in order to function correctly. Note: this same syntax is used for other nested activators such as v-dialog w/ v-tooltip.

새로운 v-slot 구문을 사용하면 동일한 활성화 버튼에 연결된 v-menu 및 v-tooltip 설명과 같이 중첩된 활성화가 올바르게 작동하기 위해 특정 설정이 필요합니다.

INFORMATION

이 구문은 v-dialog/v-tooltip과 같은 다른 중첩 활성기에 사용됩니다. 

<template>
  <div class="text-center">
    <v-menu>
      <template v-slot:activator="{ on: menu, attrs }">
        <v-tooltip bottom>
          <template v-slot:activator="{ on: tooltip }">
            <v-btn
              color="primary"
              dark
              v-bind="attrs"
              v-on="{ ...tooltip, ...menu }"
            >
              Dropdown w/ Tooltip
            </v-btn>
          </template>
          <span>Im A ToolTip</span>
        </v-tooltip>
      </template>
      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

See also

Favorite site