Wondering what’s next for npm?Check out our public roadmap! »

    svelte-mui

    0.3.3-7 • 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

    237

    Version

    0.3.3-7

    License

    MIT

    Unpacked Size

    286 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar