Add suffix prop to fancy input component
This commit is contained in:
parent
fe9c233bfc
commit
1eebab8910
1 changed files with 12 additions and 0 deletions
|
@ -2,6 +2,7 @@
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
import FancyField from "./FancyField.svelte"
|
import FancyField from "./FancyField.svelte"
|
||||||
import FancyFieldLabel from "./FancyFieldLabel.svelte"
|
import FancyFieldLabel from "./FancyFieldLabel.svelte"
|
||||||
|
import { fade } from "svelte/transition"
|
||||||
|
|
||||||
export let label
|
export let label
|
||||||
export let value
|
export let value
|
||||||
|
@ -9,6 +10,7 @@
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let error = null
|
export let error = null
|
||||||
export let validate = null
|
export let validate = null
|
||||||
|
export let suffix = null
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
@ -38,6 +40,9 @@
|
||||||
on:blur={() => (focused = false)}
|
on:blur={() => (focused = false)}
|
||||||
class:placeholder
|
class:placeholder
|
||||||
/>
|
/>
|
||||||
|
{#if suffix && !placeholder}
|
||||||
|
<div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
|
||||||
|
{/if}
|
||||||
</FancyField>
|
</FancyField>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -60,4 +65,11 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.suffix {
|
||||||
|
color: var(--spectrum-global-color-gray-600);
|
||||||
|
transform: translateY(9px);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 17px;
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue