I am using vue.js + vuetify, and I have to position a button over a canvas component (here handled by the Konva library)
I managed it by using absolute positining of the button. To clean things up, I want to place this button in a dedicated component.
I would like to pass the positioning css inline to this new child component, but can't figure how to make it work.
I have tried the following two ways
Here is basically my code :
<template>
<v-container fluid fill-height ref="parentLayout" class="pa-0" :style="{position: 'relative'}">
<!-- Konva area overwhich the button will be placed drawn over /-->
<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 sum up I have the two following questions:
Thank you all for your help
The Problem in this case is basically what v-deep is supposed to solve in the css world (whichs is not gonna solve your problem here though)
You don't have a native element inside the konvaLayout div so the style doesn't reach the destined component.
In the MyButton.vue component you'd have two options to solve this:
style Props Overwrite -//MyButton.vue
<template>
<v-btn :style="style">{{ label }}</v-btn>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
label: String,
style: [String, Object]
}
});
</script>
You use a custom prop-name that is specifically used to style the button in my-button (lol)
//MyButton.vue
<template>
<v-btn :style="btnStyle">{{ label }}</v-btn>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
label: String,
btnStyle: [String, Object]
}
});
</script>
(No gurantee as we weren't provided a codesandbox or similar to verifying if its working)