Oliver/Gravwell-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Allow custom classes to be on the button, make the button change the cursor type, and adjust indent on the script to make it consistent with other components

Browse source
This commit is contained in:
Oliver-Akins 2021-12-17 01:43:45 -06:00
parent dc15f29401
commit 64a29437d1
1 changed files with 32 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web-svelte/src/components/SciFi-Button.svelte
View file

@ -4,6 +4,9 @@
export let background: string = "#00aa00"; export let background: string = "#00aa00";
export let handler: (e: Event) => unknown; export let handler: (e: Event) => unknown;
export let hoverBackground: string = "transparent"; export let hoverBackground: string = "transparent";
export let classes: string = "";
export let title: string = "";
// Add the units to the height value if not provided, and ensure that the // Add the units to the height value if not provided, and ensure that the
// provided height is not less than 50 (the default) // provided height is not less than 50 (the default)
@ -38,9 +41,13 @@
--width: {width}; --width: {width};
--background-colour: {background}; --background-colour: {background};
--hover-background-colour: {hoverBackground};" --hover-background-colour: {hoverBackground};"
class="button-container" class="button-container {classes}"
>
<button
class="clickable"
{title}
on:click|trusted|stopPropagation={handler}
> >
<button on:click={handler}>
<slot></slot> <slot></slot>
</button> </button>
</div> </div>