epfn-sveltekit-components v0.0.3

EPFN Components for SvelteKit

Opinionated SvelteKit components for my personal purposes.

Installation

npm i epfn-sveltekit-components

Import component

<script>
	import { Drawer } from 'epfn-sveltekit-components';
</script>

Recommendation

Components have no CSS reset, use Tailwind: https://tailwindcss.com/docs/guides/sveltekit

Drawer

Headless-like side appearing drawer with backdrop. You must provide content (with styles) for button and drawer via slots. Button position is controlled by putting Drawer Component anywhere you like. Drawer position is controlled via position prop.

Props

Slots

Styling

Additional features

You can close drawer from child component via closeDrawer callback from context:

<script lang="ts">
	import { getContext } from 'svelte';
	const { closeDrawer } = getContext<{ closeDrawer: () => void }>('closeDrawer');
</script>

MenuDrawer

Vertical list of links with border between for drawer. Clicks on links closing drawer.

Props

Styling

MenuHeader

Horizontal list of links with underline on hover.

Props

Styling

Spinner

Usual animated spinner

Styling

Alerts

Vertical list of animated alerts

Props

Styling

You can apply additional styling from parent with data attributes: data-type for all items, data-type='success' for type "success", data-type='error' for type "error", data-type='warning' for type "warning"

FieldText, FieldEmail, FieldPassword, FieldTextarea, FieldCheckbox

Inputs with label

Styling