Set of the UI components for Svelte (~33 KB minzipped), inspired by Google's Material Design
Note that you will need to have Node.js installed
npm install --save-dev svelte-mui
<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
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;
}
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