Zen Svelte Ui

Svelte lightweight componets

#svelte #sveltejs #ui-components

Download

ZEN SVELTE UI

Features

Based on Svelte
Lightweight
Support modern browsers and IE 12+

Installation

npm install zen-svelte-ui

Usage

In .svelte file

ZenButton

<script>
    import { ZenButton } from 'zen-svelte-ui';
</script>

<ZenButton on:click={() => console.log('hello')} type="success" hollow>Hello world!</ZenButton>

Property	Description	Type	Accepted Values	Default
type	The button style	String	primary, success	primary
width	Button width	String	css width values	100%
rounded	Round corners	Boolean	true, false	false
disabled	Disabling style and cancel click event	Boolean	true, false	false
hollow	Hollow style	Boolean	true, false	false
Slot	Button text	String	any	''

ZenInput

<script>
    import { ZenInput } from 'zen-svelte-ui';
    let name = '';
</script>

<ZenInput bind:value={name} placeholder="Your name" width="200px" status="error"></ZenInput>

Property	Description	Type	Accepted Values	Default
type	The input type	String	text, password	text
width	Input width	String	css width values	100%
disabled	Disabling style and input	Boolean	true, false	false
placeholder	Input placeholder	String	any	''
status	Status styles	String	info, success, error, warning	''

ZenCheckbox

<script>
    import { ZenCheckbox } from 'zen-svelte-ui';
    let checked = false;
</script>

<ZenCheckbox bind:checked={checked}>Check this out!</ZenCheckbox>

Property	Description	Type	Accepted Values	Default
disabled	Disabling style and cancel check event	Boolean	true, false	false
Slot	Label text	String	any	''

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing