I am currently using vue.js with vuetify, and I need to position a button on top of a canvas component (managed by the Konva library).
I successfully achieved this by using absolute positioning for the button. However, in order to organize my code better, I want to place this button in a separate dedicated component.
My goal is to pass the positioning CSS inline to this new child component, but I am struggling to make it work.
I have attempted two approaches:
- Trying to pass it with a :style="xxx" binding, similar to how I did it when using v-btn directly
- Passing the positioning to a parent div: this works if the div has a width != 0, but it feels like a workaround. Additionally, in this case, the z-index property is not applied to the button.
- I could pass the attributes with a specific prop, but it seems that vuetify does not require it
Below is a snippet of my code:
<template>
<v-container fluid fill-height ref="parentLayout" class="pa-0" :style="{position: 'relative'}">
<div ref="konvaLayout" :style="{backgroundColor:'rgb( 40, 40, 40 )'}">
<!-- This works /-->
<v-btn absolute :style="{top:'10%', left:'10%', width: '100px'}"> THIS WORKS </v-btn>
<!-- This does not /-->
<my-button :style="{position: absolute, top:'2%', left:'2%'}" />
</v-container>
</template>
To summarize, I have the following questions:
- How can I correctly bind :style to the child element, similar to how vuetify handles it?
- What is the recommended approach for passing CSS position attributes to child components? Is using style binding the standard method as described in question 1?
Thank you everyone for your assistance