vikignt / Svelte Mui
Licence: mit
Simple Svelte 3 UI components
Stars: ✭ 234
Projects that are alternatives of or similar to Svelte Mui
Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (+50%)
Mutual labels: material, svelte
Smelte
UI framework with material components built with Svelte and Tailwind CSS
Stars: ✭ 871 (+272.22%)
Mutual labels: material, svelte
Svelte Material Ui
Svelte Material UI Components
Stars: ✭ 2,081 (+789.32%)
Mutual labels: material, svelte
Parcel Plugin Svelte
A parcel plugin that enables svelte support
Stars: ✭ 214 (-8.55%)
Mutual labels: svelte
Simplesearchview
A simple SearchView for Android based on Material Design
Stars: ✭ 222 (-5.13%)
Mutual labels: material
Hexo Theme Fluid
🌊 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo
Stars: ✭ 3,700 (+1481.2%)
Mutual labels: material
Svelte Component Template
A base for building shareable Svelte 3 components
Stars: ✭ 208 (-11.11%)
Mutual labels: svelte
Ragtextfield
Subclass of UITextField that adds an animated placeholder and an optional hint label below the text.
Stars: ✭ 227 (-2.99%)
Mutual labels: material
Svelte Notifications
Simple and flexible notifications system
Stars: ✭ 217 (-7.26%)
Mutual labels: svelte
Matblazor
Material Design components for Blazor and Razor Components
Stars: ✭ 2,599 (+1010.68%)
Mutual labels: material
Shaarli Material
Shaarli Material is a theme for Shaarli, the famous personal, minimalist, super-fast, database free, bookmarking service.
Stars: ✭ 228 (-2.56%)
Mutual labels: material
Flutter Shapeofview
Give a custom shape to any flutter widget, Material Design 2 ready
Stars: ✭ 211 (-9.83%)
Mutual labels: material
Blockly Samples
Plugins, codelabs, and examples related to the Blockly library.
Stars: ✭ 222 (-5.13%)
Mutual labels: svelte
Aaf Easydiary
📘 A diary application optimized for user experience.
Stars: ✭ 216 (-7.69%)
Mutual labels: material
Rplibs
Refs.cn 原型设计元件库,基于Axure RP 10/9/8,支持 Android、Apple、Windows、微信,移动、桌面平台的应用和网站原型设计。五年历程 2.6k+ star,感谢大家使用。
Stars: ✭ 2,622 (+1020.51%)
Mutual labels: material
Material Backdrop
A simple solution for implementing Backdrop pattern for Android
Stars: ✭ 221 (-5.56%)
Mutual labels: material
svelte-mui
Set of the UI components for Svelte (~30 KB minzipped), inspired by Google's Material Design
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].