I am a novice in the realm of storytelling, attempting to craft tales involving a basic button and a button adorned with icons. My objective is to have the ability to switch out the icons within the button utilizing the knobs section. For example:
export const textButton = () => ({
components: { PButton },
template: `<p-button
:color="color"
:text="label"
/>`,
props: {
color: {
default: select(
"color",
["transparent", "black", "blue", "orange"],
"black"
)
},
label: { default: text("label", "Button") }
}
});
The above showcases the story for a plain button where I can interchange colors from the knobs section. Likewise, I seek the correct syntax for the template to facilitate switching the icons contained within the button as individual components.
export const textWithIcon = () => ({
components: { PButton, Arrow, Bullet, Check, Chevron, Cross, Delete, Edit, Info, Lock, Play, Plus, Search, UpDown, Upload },
template: `<p-button
:text="label"
:color="color"
>
<template v-slot:icon>{{icon}}</template>
</p-button>`,
props: {
icon: {
default: select('icon', ['<Arrow />', '<Bullet />', '<Check />', '<Chevron />', '<Cross />', '<Delete />', '<Edit />', '<Info />', '<Lock />', '<Play />', '<Plus />', '<Search />', '<UpDown />', '<Upload />'], '<Arrow />'),
},
label: { default: text('label', 'Button') },
},
});
https://i.sstatic.net/y3yX7.png
How can I accomplish this? What is the correct format? Any guidance or documentation reference would be greatly appreciated as I have been unable to find relevant information on this topic.