Menu
Vuetify docs define the sheet as follows:
The
v-sheetis designed to power other paper components within Vuetify. It is meant to be used as a low level component.
card according to docs is this:
The
v-cardcomponent is a versatile component that can be used for anything from a panel to a static image.
To me (not JS person) they seem very similar. Are they interchangeable? When to use one but not the other? Can you illustrate with examples?
475
The v-sheet component is a transformable piece of paper that provides a basic foundation for Vuetify features. For example, properties such as rounded and shaped modify the border-radius property while elevation increases/decreases box-shadow . outlined rounded shaped. Elevation. Height.
Unlike other frameworks, Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the Material Design specification .
v-spacer is a basic yet versatile spacing component used to distribute remaining width in-between a parents child components. When placing a single v-spacer before or after the child components, the components will push to the right and left of its container.
You can create Card with a header in a specific structure. For adding header you need to create a div element with e-card-header class added. You can include heading inside the Card header by adding a div element with e-card-header-caption class, and also content will be added by adding element with e-card-content .
Your question to me sounds little bit like "What is a difference between html div and section tags?"
Do you get me? I it is semantic thing.
"Low level" components tells me that you can use v-sheet in v-card but you shouldn't do the opposite.
Like putting span in p is ok, but doing the other way is a wrong practice.
Hope that helps you ;-)
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
