Svelte Utils
Handy Svelte components for the whole family
TL;DR:
- MIT Licensed Simple Svelte Components
- Live demo of components: https://svelte-utils.netlify.com/
- Example code: ./src/App.svelte
Included:
To override all Svelte Utils default colors, set the following with CSS:
Installation
npm i svelte-utils
;
Button
Confirm
Common use parameters
- onClick:
(event) => Promise
- icon?:
path to image
- backgroundColor?:
hex, rgba, etc.
Control state with
- disabled?:
boolean
- pending?:
boolean
- success?:
boolean
- error?:
boolean
Form
<Form = ="/lock.svg" = ="Submit Form"> <div ="title">This is a form title</div> <div ="description">It looks like </div> <div ="input"> <label ="name">Name</label> <input ="text" ="name" ="name" ="Joe Bloggs" /> </div></Form>
Automatic styling will be applied for:
Form > .title
Form > .description
Form > label
Form > div.input *
Common use parameters
- handleSubmit:
(data, ev) => Promise
- onDone:
(handleSubmitRes) => Promise
- buttonText?:
string
<slot />
The first argument for
handleSubmit
will be a Key-Value-Store (object) with keys based on the inputname
attribute.For
input[type=checkbox]
elements, the value is an array of checked values
Rejected promises should contain a
message
property which will be shown on the form
Other parameters
- buttonIcon?:
string
- afterButtonText?:
string
- disabled?:
boolean
Spinner
Parameters
- black?:
boolean
(default isfalse
- will display a white spinner) - size?:
px value
Sprite
Parameters
- spritesheetUrl:
string
- index?:
number
(sprite index) - spriteWidth:
number
(pixel width of sprite on spritesheet) - spriteHeight:
number
(pixel height of sprite on spritesheet) - width?:
number
(width to scale sprite to) - height?:
number
(height to scale sprite to) - rowLength?:
number
(number of sprites per row on spritesheet)
Advanced Parameters
- getSpritePos?:
(spriteIndex) => { x: string, y: string }
StackRouter
Parameters
- onReady:
(router: { pushRoute, popRoute, replaceRoute }) => void
- defaultRoute:
Route
({ component: SvelteComponent, props: { name: 'Joe' }}
) - stack?:
Route[]
Contributing
Make a PR, I won't bite 💖
Also see
- Svelte London Meetup - https://meetup.com/svelte
- News Hackathons - https://HackThePress.org
- Political Hackathons - https://ToryTechs.uk
- Joe Reeve - https://SimmsReeve.com