I have developed a customizable Button component that can be styled dynamically and accept values for text/icons, etc.
Here is the code for my "ActionButton" in Vue 3. Although I am new to this framework, I am facing some difficulties understanding certain concepts related to styling and passing props.
<template>
<button class="pr-5 mr-3" :class="buttonStyle">
<span class="inline-block px-2">
<svg class="inline-block" :class="svgStyle" xmlns="http://www.w3.org/2000/svg" :viewBox="svgViewBox" :fill="svgFill">
<path :d="svgValue"/>
</svg>
<span class="inline-block ml-4" :class="textStyle">{{ inlineText }}</span>
</span>
</button>
</template>
<script lang="ts" >
import { defineComponent, computed } from "@vue/runtime-core";
export default defineComponent({
name: "ActionButton",
props: {
title: {
required: false,
type: String,
default: "Title",
},
inlineText: {
required: false,
type: String,
default: "Button",
},
inlineTextSize: {
required: false,
type: String,
default: "text-xs"
},
... (continued) ...
}
},
});
</script>
I am seeking guidance on making these components reusable across multiple pages with different button configurations. Any assistance would be greatly appreciated.
I attempted to create an array of ActionButtons but struggled to correctly pass the necessary values:
<image-card
:client-projects="clientProjects"
image-state="true"
:action-buttons="cardActionButtons"
/>
const cardActionButtons = ref(
[
{
title: "Edit Button",
inlineText: "EDIT",
... (continued) ...
},
]
)