Awesome

Ketchup: super-rich components for web applications

<div style="margin: 20px 0; width: 100%; display: flex; justify-content: center;"> <img style="display: block; margin: 10px auto;" width="50%" src="https://raw.githubusercontent.com/smeup/ketchup/develop/docs/images/ketchup_logo.svg"></img> </div> <details style="margin: 30px 0"> <summary>Table of Contents</summary> <ol> <li> <a href="#about-ketchup">About Ketchup</a> <ul> <li><a href="#built-with">Built With</a></li> <li><a href="#how-the-repo-is-organized">How the repo is organized</a></li> </ul> </li> <li><a href="#showcase">Showcase</a></li> <li><a href="#getting-started">Getting started</a> <ul> <li><a href="#how-to-use-ketchup-in-your-project">How to use Ketchup in your project</a></li> <li><a href="#contributing">Contributing</a></li> <li><a href="#issues">Issues</a></li> </ul></li> <li><a href="#license">License</a></li> <li><a href="#credits">Credits</a></li> </ol> </details>

About Ketchup

Ketchup is a web components library, built with Ionic’s Stencil, a TypeScript based web component compiler.

Web Components is a suite of different technologies allowing to create reusable custom elements that you can use in your web apps. For more information visit this link: https://developer.mozilla.org/en-US/docs/Web/Web_Components

The primary focus of Ketchup is to provide a suite of powerful and customizable Web Components, whose main objective is abstracting complex and recurrent programming patterns.

Built with

How the repo is organized

Ketchup repository is a monorepo multi-package repository managed with Lerna.

packages/ketchup contains the Stencil web components library
packages/ketchup_showcase contains the code of the components showcase (a Vue application built using Vue CLI)
docs contains documentation<p align="right">(<a href="#top">back to top</a>)</p>

Showcase

Go to Ketchup Showcase to see our components live.<p align="right">(<a href="#top">back to top</a>)</p>

Getting started

All information for developers is to be found in the Development guide.

How to use Ketchup in your project

Add the dependency:

npm install "@sme.up/ketchup" --save

Define Ketchup custom elements in your pages:

import { defineCustomElements } from '@sme.up/ketchup/dist/loader';
defineCustomElements(window);

Use Ketchup components in your pages. About components and their props and events see Ketchup Showcase. A simple sample for a Ketchup button can be:

<kup-button label="I'm a button" @kup-button-click="myButtonAction" />

Contributing

If you have amazing ideas and you wish to contribute to this project, you're welcome to do so. Check out our style guide for more details about our coding practices.

Issues

If you run into an error or an unexpected behavior, or you just want to give us feedback on how to improve, feel free to use the issues page.<p align="right">(<a href="#top">back to top</a>)</p>

License

Distributed under the Apache 2.0 License. Click here for more information.<p align="right">(<a href="#top">back to top</a>)</p>

Credits

List of open source library/resources we used and which we'd like to thank:

Day.js
d3-shape
ECharts
FullCalendar
Google Charts
html2canvas
jQuery and jQuery Sparlines
Interact.js
Numeral.js
Material Components Web
Material Icons
MDI Icons
Vanilla Picker<p align="right">(<a href="#top">back to top</a>)</p>