0.5.10 • Published 4 months ago

svelte-mui v0.5.10

Weekly downloads
245
License
MIT
Repository
github
Last release
4 months ago

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

0.5.10

4 months ago

0.5.9

5 months ago

0.5.8

8 months ago

0.5.7

1 year ago

0.5.4

1 year ago

0.5.3

1 year ago

0.5.6

1 year ago

0.5.5

1 year ago

0.5.2

1 year ago

0.5.0

2 years ago

0.4.0

2 years ago

0.4.0-2

2 years ago

0.4.0-1

2 years ago

0.3.3-6

3 years ago

0.3.3-7

3 years ago

0.3.3-5

3 years ago

0.3.3-4

4 years ago

0.3.3-3

4 years ago

0.3.3-2

4 years ago

0.3.3-1

4 years ago

0.3.3

4 years ago

0.3.2

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.2

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago