svelte-mui
Set of the UI components for Svelte (~30 KB minzipped), inspired by Google's Material Design
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
- Optionally add focus-visible polyfill to enable focus to be visible when using TAB key. This option can be applied to
Button,Checkbox,Radiobutton,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 '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>
Note for the sapper application, you must import components from svelte-mui/src like so
import { Button, Checkbox } from 'svelte-mui/src';
...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-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
Get started with an sapper example
Clone repo vikignt/sapper-mui
git clone https://github.com/vikignt/sapper-mui.git
cd sapper-mui
npm install
npm run dev
Navigate to localhost:3000