dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-24 12:35:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add icon to textfield

Browse source
This commit is contained in:
EETagent 2022-11-21 12:57:33 +01:00
parent 6454a84586
commit c213cfa8ba
2 changed files with 34 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/lib/components/textfield/TextField.svelte
View file

@ -2,21 +2,33 @@
export let type: 'text' | 'number' | 'tel' | 'e-mail' = 'text';
const typeAction = (node: HTMLInputElement) => {
node.type = type;
}
};
export let placeholder: string = '';
export let value: string = '';
export let icon: boolean = false;
</script>
<input
bind:value
on:click
on:keydown
on:keyup
class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
use:typeAction
{placeholder}
/>
<div class="mt-8 relative flex justify-center items-center">
<input
bind:value
on:click
on:keydown
on:keyup
class:withIcon={icon}
class="bg-[#f8fafb] w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
use:typeAction
{placeholder}
/>
{#if icon}
<span class="flex absolute right-0 top-0 bottom-0 my-auto bg-transparent p-3">
<slot name="icon" />
</span>
{/if}
</div>
<style>
</style>
.withIcon {
@apply pr-14;
}
</style>

13
frontend/src/routes/register/+page.svelte
View file

@ -14,7 +14,7 @@
}
};
let pageIndex = 3;
let pageIndex = 0;
</script>
<SplitLayout>
@ -31,7 +31,10 @@
</p>
<div class="flex md:flex-col items-center justify-center w-full md:w-3/5">
<TextField type="text" placeholder="Jméno a příjmení" />
<TextField type="e-mail" placeholder="Email" />
<TextField type="e-mail" placeholder="Email" icon>
<div slot="icon" class="flex items-center justify-centertext-center text-2xl text-sspsBlue pb-1"
>@</div>
</TextField>
</div>
<div class="w-full md:w-3/5">
<TextField type="tel" placeholder="Telefon" />
@ -89,7 +92,11 @@
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="flex flex-col w-full md:w-3/5">
<TextField type="text" placeholder="Občanství" />
<TextField type="text" placeholder="Občanství" icon>
<div slot="icon">
ssj
</div>
</TextField>
</div>
<div class="flex items-center justify-center w-full md:w-3/5">
<TextField type="text" placeholder="Rodné číslo" />