Make form submit button bold by default, add optional reset button
This commit is contained in:
parent
e9acde6313
commit
93be06d10f
@ -11,6 +11,8 @@
|
||||
export let submitText: string;
|
||||
export let submitIcon: string;
|
||||
export let submitClass: string = undefined;
|
||||
export let isBoldSubmit: boolean = true;
|
||||
export let resetButton: boolean = false;
|
||||
export let confirm: string = undefined;
|
||||
|
||||
const formId = nextAvailableFormId++;
|
||||
@ -23,17 +25,35 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> :last-child:not(* + :last-child) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<form {action} method="POST" id="{formId}-form" on:submit={handleSubmit}>
|
||||
<CsrfTokenField/>
|
||||
<slot/>
|
||||
<button type="submit" class={submitClass}>
|
||||
{#if submitIcon}
|
||||
<Icon name={submitIcon}/>
|
||||
<div class="form-controls">
|
||||
{#if resetButton}
|
||||
<button type="reset"><Icon name="trash"/>Reset</button>
|
||||
{/if}
|
||||
{#if button}
|
||||
<span class="tip">{submitText}</span>
|
||||
{:else}
|
||||
{submitText}
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button type="submit" class={submitClass} class:bold={isBoldSubmit}>
|
||||
{#if submitIcon}
|
||||
<Icon name={submitIcon}/>
|
||||
{/if}
|
||||
{#if button}
|
||||
<span class="tip">{submitText}</span>
|
||||
{:else}
|
||||
{submitText}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
Loading…
Reference in New Issue
Block a user