Skip to content

feat(VExpansionPanelTitle): add hover prop to disable hover effect#22827

Open
selfAnnihilator wants to merge 32 commits into
vuetifyjs:masterfrom
selfAnnihilator:feat/expansion-panel-hover-prop-v2
Open

feat(VExpansionPanelTitle): add hover prop to disable hover effect#22827
selfAnnihilator wants to merge 32 commits into
vuetifyjs:masterfrom
selfAnnihilator:feat/expansion-panel-hover-prop-v2

Conversation

@selfAnnihilator
Copy link
Copy Markdown

Resolves #21615

Adds hover boolean prop to VExpansionPanelTitle (and VExpansionPanel via prop spreading) to disable the hover overlay effect without relying on custom CSS.

Changes:

  • VExpansionPanelTitle.tsxhover prop (default true); toggles v-expansion-panel-title--no-hover class
  • VExpansionPanel.sass.v-expansion-panel-title--no-hover uses tools.layer('trumps') to suppress overlay opacity on hover
  • VExpansionPanels.tsxhover added to pick() and provideDefaults so it cascades to all child panels
  • new-in.json — entry added for VExpansionPanels and VExpansionPanelTitle at 4.1.0
  • VExpansionPanels.spec.browser.tsx — 3 tests + showcase story

Backwards compatible. Default hover=true preserves existing behaviour.

Markup:

<template>
  <v-app>
    <v-container style="max-width: 600px">
      <p class="mb-2">Default (hover enabled)</p>
      <v-expansion-panels>
        <v-expansion-panel title="With hover" text="Hover to see overlay effect." />
      </v-expansion-panels>

      <p class="mt-6 mb-2">hover=false on panel</p>
      <v-expansion-panels>
        <v-expansion-panel :hover="false" title="Without hover" text="No overlay on hover." />
      </v-expansion-panels>

      <p class="mt-6 mb-2">hover=false on panels (cascades)</p>
      <v-expansion-panels :hover="false">
        <v-expansion-panel title="Panel A" text="Content A" />
        <v-expansion-panel title="Panel B" text="Content B" />
      </v-expansion-panels>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {
      return {}
    },
  }
</script>

J-Sek and others added 30 commits February 28, 2026 21:17
…js#22662)

Co-authored-by: J-Sek <J-Sek@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Add a way to disable the hover effect on <v-expansion-panels>

6 participants