CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-11 15:08:05 +12:00
Code Issues Projects Releases Wiki Activity

Add suffix prop to fancy input component

Browse source
This commit is contained in:
Andrew Kingston 2023-01-25 15:55:57 +00:00
parent fe9c233bfc
commit 1eebab8910
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/bbui/src/FancyForm/FancyInput.svelte
View file

@ -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>