svelte-mui

Set of the UI components for Svelte (~33 KB minzipped), inspired by Google's Material Design

View the demo

Installation

Note that you will need to have Node.js installed

npm install --save-dev svelte-mui

Usage

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

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

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

    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 svelte-mui

Modify file src/App.svelte in the following way

<script>
    // import any components
    import { Button, Checkbox } from 'svelte-mui';

    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:8080

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-mui

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

Then explore the example

cd svelte-mui/example
npm install
npm run dev

Navigate to localhost:5000