Skip to content

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

Open
mixelburg wants to merge 1 commit intovuetifyjs:masterfrom
mixelburg:feat/expansion-panel-no-hover-21615
Open

feat(VExpansionPanelTitle): add hover prop to disable hover effect#22725
mixelburg wants to merge 1 commit intovuetifyjs:masterfrom
mixelburg:feat/expansion-panel-no-hover-21615

Conversation

@mixelburg
Copy link
Copy Markdown
Contributor

Summary

Closes #21615

There was no built-in prop to disable the hover overlay effect on v-expansion-panels; the only option was a CSS workaround:

.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
  --v-hover-opacity: 0;
}

This PR adds a hover boolean prop (default: true) to both VExpansionPanelTitle and VExpansionPanels.

Usage

<!-- Individual panel title -->
<v-expansion-panel-title :hover="false">Title</v-expansion-panel-title>

<!-- All panels in a group -->
<v-expansion-panels :hover="false">
  <v-expansion-panel>...</v-expansion-panel>
</v-expansion-panels>

Changes

  • VExpansionPanelTitle.tsx — adds hover: { type: Boolean, default: true } prop and applies the v-expansion-panel-title--no-hover modifier class when disabled
  • VExpansionPanel.sass — adds CSS rule that forces overlay opacity to 0 when the modifier class is present
  • VExpansionPanels.tsx — adds 'hover' to the pick() list and to provideDefaults so the value cascades to all child panels
  • VExpansionPanelTitle.json — adds documentation for the new prop

Adds a boolean hover prop (default: true) to VExpansionPanelTitle that
controls the hover overlay. When set to false a no-hover modifier class
is added which forces the overlay opacity to zero.

The prop is also forwarded from VExpansionPanels so that the whole panel
group can be configured from a single place:

  <v-expansion-panels :hover="false">

Closes vuetifyjs#21615
@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Mar 17, 2026

  • PRs adding new props need to target dev
  • needs entry in new-in.json
  • cannot use !important, should either add --hover class to "set" hover effect or make use of tools.layer('trumps') if there is no better way and we have to override the CSS from lower layers

I can see the changes in the dedicated tab, no need to repeat those - better to leave PR description for information that is not clear upon inspecting the code (like motivation behind some less-obvious of the changes).

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>

2 participants