Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 5 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 (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-17T20:39:28.000Z (3 months ago)
- Last Synced: 2024-12-13T13:03:26.452Z (12 days ago)
- Topics: material, svelte, svelte-mui, svelte-ui, sveltejs, ui
- Language: Svelte
- Homepage:
- Size: 325 KB
- Stars: 316
- Watchers: 12
- Forks: 37
- 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)