vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Feature Request] If a slot is empty on a component then the slot wrapper should be set to `display: none`

Open MatthewAry opened this issue 2 years ago • 1 comments

Problem to solve

Sometimes I want to conditionally render a slot, but if I end up using the slot, then the wrapper elements used to make the slot (e.g. VAppBar and it's Prepend and Append Slots) end up getting loaded in and applying styles which can add padding or other stuff that I don't want.

Proposed solution

For empty slots, we vuetify can check to see if there are any child nodes within it and not render any wrapper nodes, or we can use CSS (which is what I ended up doing)

.v-toolbar {
  :deep(.v-toolbar__append):empty {
    display: none;
  }

  :deep(.v-toolbar__prepend):empty {
    display: none;
  }
}

MatthewAry avatar Jul 28 '23 20:07 MatthewAry

https://github.com/vuejs/core/pull/6484

KaelWD avatar Aug 09 '23 09:08 KaelWD