vue + vuetify: split-button implementation

0
votes

I am building a split-button like this one: https://codepen.io/mtermoul/pen/KKMPqvd,

<v-btn-toggle>
    <v-btn>Edit Avatar</v-btn>
    <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
            <v-btn v-on="on" v-bind="attrs"><v-icon>arrow_drop_down</v-icon></v-btn>
        </template>
        <v-list>
            <v-list-item>
                <v-list-item-title>Copy from local</v-list-item-title>
            </v-list-item>
        </v-list>
    </v-menu>
</v-btn-toggle>

But I don't want the buttons to remain in toggle state after the user clicks them.

Any idea about how to disable that behavior in the v-btn-toggle?

2
vue.jsvuetify.js

2 Answers

1
votes

v-btn-toggle have active-state which you cannot disable, till now no support for this feature. You can use the following code

<v-item-group class="v-btn-toggle">
    <v-btn>Edit Avatar</v-btn>
          <v-menu offset-y>
            <template v-slot:activator="{ on, attrs }">
              <v-btn v-on="on" v-bind="attrs"><v-icon>arrow_drop_down</v-icon></v-btn>
            </template>
            <v-list>
              <v-list-item>
                <v-list-item-title>Copy from local</v-list-item-title>
              </v-list-item>
              <v-list-item>
                <v-list-item-title>Upload</v-list-item-title>
              </v-list-item>
              <v-list-item>
                <v-list-item-title>Delete</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
  </v-item-group>

Paste it in your codepen and its working as expected.

0
votes

Whenever you face similar problems inspect the element and identify the css attribute that is giving it the style:

This should do:

.theme--light.v-btn--active::before,
.theme--light.v-btn--active:hover::before,
.theme--light.v-btn:focus::before {
  opacity: 0 !important;
}