hkh12/svmd

Material design components for Svelte

SVMD

SVMD is a set of Material Design components for Svelte. It wraps each of Google's MDC Web vanilla Components using the simple approach. It is:

• ✨ Easy to use
• 📚 Well-documented
• 🎨 Highly customizable
• 🌳 Tree-shakeable

Installation

npm i svmd # npm
yarn add svmd # yarn

Usage

SVMD has a variety of components, and you can import them like this:

import { Button, Slider, Fab } from 'svmd';
import 'svmd/dist/svmd.css';

See the docs about styles for more info about the components' styles.

Documentation

See the docs folder.

svmd's Issues

in dist folder index.html file is not generated

dist folder index.html file is not generated

after running npm run build there should be index.html file generated

In the example folder the src the url is not correct

The idea of directly integrating the material component web is good.
while first time running the build it shows error for path

ERROR in ./examples/App.svelte Module not found: Error: Can't resolve '../src/components' in '/home/abhijit/projects/learn/svelte-mui/svmd/examples' @ ./examples/App.svelte 29:0-33:29 66:16-20 111:22-32 262:14-16 269:19-25 276:19-25 284:19-25 293:19-25 491:16-19 499:16-19 507:16-19 587:14-16 607:18-24 690:14-16 707:19-25 721:19-25 739:19-25 875:17-22 936:17-22 997:17-22 1041:17-21 1050:17-21 1059:17-21 1140:14-16 1147:16-20 1273:14-16 1280:18-24 1302:22-30 1415:17-22 1472:21-30 1526:14-16 1658:14-16 1675:20-26 1767:20-28 1837:14-16 1844:21-30 1906:17-21 1914:17-21 1922:17-21 1930:17-21 1938:17-21 1946:17-21 1954:17-21 1962:17-21 2161:21-30 2171:16-20 2178:15-18 @ ./examples/main.js

A simple example in the documentation

As a newcomer to Svelte, some more documentation on how to use the SVMD components is welcome.
The documentation only shows how to import Elements, but not where the import code goes, or how to instantiate and use the actual components in Svelte.
A simple "hello world" like example with a basic button would go a long way. I think that might increase adoption, certainly among newcomers. Also, maybe a rollup config example, I can't seem to get it to work, and I suspect my rollup config...

When I combine the import statement and one of the button examples for example, I get:

Uncaught TypeError: svmd_es.Button is not a constructor
    create_fragment bundle.js:798
    init index.mjs:1451
    App bundle.js:880
    app main.js:4
    <anonymous> bundle.js:897