Miss any of our Open RFC calls?Watch the recordings here! »

svelte-mui

0.3.3-4 • Public • Published

svelte-mui

Set of the UI components for Svelte (~30 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
  • 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 '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

Install

npm i svelte-mui

DownloadsWeekly Downloads

55

Version

0.3.3-4

License

MIT

Unpacked Size

287 kB

Total Files

32

Last publish

Collaborators

  • avatar