Need help with svelte-mui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

vikignt
208 Stars 21 Forks MIT License 150 Commits 12 Opened issues

Description

Simple Svelte 3 UI components

Services available

!
?

Need anything else?

Contributors list

No Data

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.