azizhk / svelte-ui

Simple Svelte 3 UI components

svelte-ui

Set of the UI components for Svelte (~20 KB minzipped)

View the demo

Installation

Note that you will need to have Node.js installed

npm install --save-dev @vikignt/svelte-ui

Usage

<Textfield bind:value filled label="Name" message="Enter your name" />

<h1>Hello {value}!</h1>

<script>
    // import any components you want
    import { Textfield } from '@vikignt/svelte-ui';

    let value = 'world';
</script>

This code on the Svelte REPL

Quick start with new project

Create a new project based on sveltejs/template

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

Add components

npm install --save-dev @vikignt/svelte-ui

• Optionally add focus-visible polyfill to enable focus to be visible when using TAB key. This option can be applied to Button, Checkbox, Radio button, Menuitem

npm install --save-dev focus-visible

Modify file src/App.svelte in the following way

<script>
    // optional import focus-visible polyfill only once
    import 'focus-visible';
    // import any components
    import { Button, Checkbox } from '@vikignt/svelte-ui';

    let checked = true;
</script>

<Checkbox bind:checked>Checkbox</Checkbox>

<p>Checkbox is {checked ? 'checked' : 'unchecked'}</p>

<Button
    outlined
    shaped
    color="Red"
    on:click={() => { checked = !checked }}
>
    Inverse
</Button>

...then start Rollup

npm run dev

Navigate to localhost:5000

For real applications, you have to add global styles to disabled state

    .disabled,
    [disabled] {
        opacity: 0.5;
        pointer-events: none;
    }

    .disabled .disabled,
    .disabled [disabled],
    [disabled] .disabled,
    [disabled] [disabled] {
        opacity: 1;
    }

Get started with an example

Clone repo vikignt/svelte-ui

git clone https://github.com/vikignt/svelte-ui.git

Then explore the example

cd svelte-ui/example
npm install
npm run dev

Navigate to localhost:5000