Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svelte-toolbox/svelte-toolbox
A UI component library for Svelte implementing Google's Material Design specification
https://github.com/svelte-toolbox/svelte-toolbox
component library svelte svelte-components ui uikit
Last synced: about 1 month ago
JSON representation
A UI component library for Svelte implementing Google's Material Design specification
- Host: GitHub
- URL: https://github.com/svelte-toolbox/svelte-toolbox
- Owner: svelte-toolbox
- License: mit
- Archived: true
- Created: 2019-06-17T20:24:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-24T17:10:26.000Z (about 1 year ago)
- Last Synced: 2024-04-05T06:22:13.477Z (3 months ago)
- Topics: component, library, svelte, svelte-components, ui, uikit
- Language: Svelte
- Homepage: https://svelte-toolbox.github.io/website/
- Size: 1.7 MB
- Stars: 75
- Watchers: 6
- Forks: 4
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE-OF-CONDUCT.md
Lists
- awesome-svelte-resources - `svelte-toolbox` - toolbox</sub> - (components and libraries / ui component sets)
- awesome-stars - svelte-toolbox - toolbox | 72 | (Svelte)
README
> No longer maintained
##### [Chat on Discord](https://discord.gg/bWZnuvd) • [Documentation](#documentation) • [Changelog](./CHANGELOG.md) • [Component Status](#component-status)
# Svelte Toolbox ([demo](https://svelte.dev/repl/5cf847108884453cbedd5920e919b630?version=3.6.5))
A UI component library for Svelte implementing Google's Material Design specification.
Beacuse Svelte Toolbox is early in development, some things may change before we hit `v1.0.0` (Please see [Component Status](#component-status)).
## Contributing
Pull requests are always welcome!
```bash
git clone https://github.com/svelte-toolbox/svelte-toolbox.git
cd svelte-toolbox
npm install
```
To start the development server:
```bash
npm run dev
```
To clean up the project and format the files:
```bash
npm run lint
```
You are welcome to add new features or components, but please open an issue to discuss your idea first.
## Usage
Not all of these components are stable. Please see the [Component Status](#component-status) section.
There is detailed documentation about each of the components [below](#documentation), but the basic usage can bee seen below.
### Svelte/Sapper
Installing `svelte-toolbox` as a `devDependency` allows Svelte to compile the svelte-toolbox components right along with the rest of your code.
```shell
npm i --save-dev svelte-toolbox
# or yarn
```
```html
import { UIButton, Ripple } from 'svelte-toolbox';
Click me!
There is a nice ripple effect on this text.
```
### HTML/CSS/VanillaJS
You can use CDN's from `jsDelivr.net`, `unpkg.com`, or `bundle.run`. You can also install `svelte-toolbox` into your project via `npm` or `yarn`.
In this example, however, we will use the `unpkg` CDN:
```html
new Toolbox.UIButton({ target: document.querySelector('#button') });
```
### Demos
- [Svelte](https://svelte.dev/repl/5cf847108884453cbedd5920e919b630?version=3.6.5)
- [Sapper](https://codesandbox.io/s/github/svelte-toolbox/sapper-example)
- [HTML/CSS/VanillaJS](https://jsfiddle.net/Vehmloewff/5rfdh0y2/64/)
### Global Styles
We recommend adding the contents of [`public/global.css`](public/global.css) to your global stylesheet. These will be the default styles for the components you import from `svelte-toolbox`.
P.S. If you like the styles in [`public/global.css`](public/global.css), and don't want to change them, you could just link to it:
```html
```
### Component Status
| Component | Status |
| :------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
| [Ripple](src/components/ripple/README.md) | **Stable**, no breaking changes or new features are expected. |
| [UIButton](src/components/button/README.md) | **Stable**, in that no breaking chenges are expected, but new features are. |
| [UIInput](src/components/input/README.md) | **Mostly Stable**, there is some improvment under the hood to be done. This _might_ effect the public API. |
| [IconButton](src/components/icon-button/README.md) | **Stable**. Although new features are expected, no breaking changes are. |
| [Switch](src/components/switch/README.md) | **Stable**. Although new features are expected, no breaking changes are. |
| [Card](src/components/card/README.md) | **Stable**, no breaking changes or new features are expected. |
| [Checkbox](src/components/checkbox/README.md) | **Unstable**. This component is not yet finished. Please see [this project](https://github.com/svelte-toolbox/svelte-toolbox/projects/1). |
### Documentation
Some of these components are still unstable. Please see the [Component Status](#component-status) section.
- [Ripple](src/components/ripple/README.md)
- [UIButton](src/components/button/README.md)
- [UIInput](src/components/input/README.md)
- [IconButton](src/components/icon-button/README.md)
- [Switch](src/components/switch/README.md)
- [Card](src/components/card/README.md)
- [Checkbox](src/components/checkbox/README.md)
## Need help? Have a question?
Then you have come to the right place.
[Open an Issue](https://github.com/svelte-toolbox/svelte-toolbox/issues/new) or join the question friendly [Discord Server](https://discord.gg/bWZnuvdhttps://discord.gg/bWZnuvd).
## Credits
- [@YogliB](https://github.com/YogliB) for providing the [svelte-component-template](https://github.com/YogliB/svelte-component-template) used for this project
- [@TehShrike](https://github.com/TehShrike) for his help and advice
## Inspiration
As I was working on an app using [Sapper](http://sapper.dev), I was made aware of the fact that if there was a UI component library out there for [Svelte](http://svelte.dev), it would make developing a Svelte app so much easier!
I am a big fan of the Google Material Design patterns, and because I really like [React Toolbox](https://github.com/react-toolbox/react-toolbox), I decided to make something like it for Svelte.
## License
[MIT](LICENSE)