https://github.com/vikignt/svelte-mui

Simple Svelte 3 UI components
https://github.com/vikignt/svelte-mui

material svelte svelte-mui svelte-ui sveltejs ui

Last synced: 27 days ago
JSON representation

Simple Svelte 3 UI components

• Host: GitHub
• URL: https://github.com/vikignt/svelte-mui
• Owner: vikignt
• License: mit
• Created: 2019-08-07T13:17:38.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-17T20:39:28.000Z (about 2 months ago)
• Last Synced: 2024-10-09T22:44:45.239Z (27 days ago)
• Topics: material, svelte, svelte-mui, svelte-ui, sveltejs, ui
• Language: Svelte
• Homepage:
• Size: 325 KB
• Stars: 317
• Watchers: 12
• Forks: 38
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-mui

Set of the UI components for [Svelte](https://svelte.dev) (~33 KB minzipped), inspired by Google's [Material Design](https://material.io/design/)

[View the demo](https://svelte-mui.now.sh)

## Installation

_Note that you will need to have [Node.js](https://nodejs.org) installed_

```bash

npm install --save-dev svelte-mui

```

## Usage

```html

Hello {value}!


    // import any components you want

    import { Textfield } from 'svelte-mui';

    let value = 'world';

```

This code on the [Svelte REPL](https://svelte.dev/repl/dfec17bd888749a1b76fa950df40f5dd?version=3.18.1)

## Quick start with new project

Create a new project based on [sveltejs/template](https://github.com/sveltejs/template)

```bash

npx degit sveltejs/template svelte-app

cd svelte-app

npm install

```

Add components

```bash

npm install --save-dev svelte-mui

```

Modify file `src/App.svelte` in the following way

```html

    // import any components

    import { Button, Checkbox } from 'svelte-mui';

    let checked = true;

Checkbox

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


 { checked = !checked }}

>

    Inverse

```

...then start [Rollup](https://rollupjs.org/)

```bash

npm run dev

```

Navigate to [localhost:8080](http://localhost:8080)

For real applications, you have to add global styles to `disabled` state

```css

    .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](https://github.com/vikignt/svelte-mui.git)

```bash

git clone https://github.com/vikignt/svelte-mui.git

```

Then explore the __example__

```bash

cd svelte-mui/example

npm install

npm run dev

```

Navigate to [localhost:5000](http://localhost:5000)