svelte-mui

by vikignt

vikignt /svelte-mui

Simple Svelte 3 UI components

190 Stars 18 Forks Last release: Not found MIT License 150 Commits 6 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

Hello {value}!

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

Checkbox

Checkbox is {checked ? 'checked' : 'unchecked'}

{ checked = !checked }} > Inverse

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.