search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.67k stars 6.95k forks source link

[Bug][3.5.8] Labs Speed Dial #19355

Open markedro opened 6 months ago

markedro commented 6 months ago

Environment

Vuetify Version: 3.5.8 Vue Version: 3.4.21 Browsers: Chrome 119.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

I know Speed Dial was just released but I was trying to get a feel for it. I wasn't able to get anything to visibly show up yet with it in my project. That seems consistent with the result on the link locatied in the Speed Dial docs that point to the vue playground example. (the info above is simply to the vue playground on the vuetify speed dial docs page)

Expected Behavior

a visible speed dial

Actual Behavior

speed dial isn't visible

Reproduction Link

https://play.vuetifyjs.com/#...

YouthGuy commented 6 months ago

In practice, I found that when I moved the v-fab outside, it was functional, but it was invisible in the speed dial. I also found this quite strange.

<v-speed-dial activator="parent" location="bottom center" transition="fade-transition">
    <v-btn key="1" icon="$success"></v-btn>
    <v-btn key="2" icon="$info"></v-btn>
</v-speed-dial>
<v-fab size="large" icon="$vuetify" color="#587ea1"></v-fab>
jo3codes commented 6 months ago

You can get it to work by wrapping SpeedDial with Fab

<v-fab ...>
  <v-speed-dial activator="parent">
    ...
  </v-speed-dial>
</v-fab>
m50S79sM6SRNp8Jn commented 6 months ago

You can get it to work by wrapping SpeedDial with Fab

<v-fab ...>
  <v-speed-dial activator="parent">
    ...
  </v-speed-dial>
</v-fab>

Confirmed, but the question begs would this be considered a workaround or just how it's supposed to be used?

jo3codes commented 6 months ago

Workaround. I think this is how you would expect to use it: https://github.com/vuetifyjs/vuetify/issues/19422