Table of Contents
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.
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
Go to Ketchup Showcase to see our components live.
All information for developers is to be found in the Development guide.
- 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" />
In order to keep the code under control, if you want to contribute you must have knowledge of the following fundamentals:
- Git (how branching works, scoped commits and clear pull requests);
- Deep understanding of TypeScript, Sass and JSX (the core of the library);
- Basic understanding of Vue2 (this is only for the showcase, yet still important because components must be showcased once created).
If you respect this prerequisites 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.
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.
Distributed under the Apache 2.0 License. Click here for more information.
List of open source libraries/resources we used and which we'd like to thank: