dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-27 14:02:14 +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

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

@ -2,21 +2,33 @@
export let type: 'text' | 'number' | 'tel' | 'e-mail' = 'text'; export let type: 'text' | 'number' | 'tel' | 'e-mail' = 'text';
const typeAction = (node: HTMLInputElement) => { const typeAction = (node: HTMLInputElement) => {
node.type = type; node.type = type;
} };
export let placeholder: string = ''; export let placeholder: string = '';
export let value: string = ''; export let value: string = '';
export let icon: boolean = false;
</script> </script>
<input <div class="mt-8 relative flex justify-center items-center">
bind:value <input
on:click bind:value
on:keydown on:click
on:keyup on:keydown
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" on:keyup
use:typeAction class:withIcon={icon}
{placeholder} 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> </style>

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

@ -14,7 +14,7 @@
} }
}; };
let pageIndex = 3; let pageIndex = 0;
</script> </script>
<SplitLayout> <SplitLayout>
@ -31,7 +31,10 @@
</p> </p>
<div class="flex md:flex-col items-center justify-center w-full md:w-3/5"> <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="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>
<div class="w-full md:w-3/5"> <div class="w-full md:w-3/5">
<TextField type="tel" placeholder="Telefon" /> <TextField type="tel" placeholder="Telefon" />
@ -89,7 +92,11 @@
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p> </p>
<div class="flex flex-col w-full md:w-3/5"> <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>
<div class="flex items-center justify-center w-full md:w-3/5"> <div class="flex items-center justify-center w-full md:w-3/5">
<TextField type="text" placeholder="Rodné číslo" /> <TextField type="text" placeholder="Rodné číslo" />