kor-ui v1.0.3

kor

Visit www.kor-ui.com for samples, APIs and other design/development documentation

A design system / UI component library built with LitElement. Based on the web components standards, kor is browser-, framework- and OS-agnostic and can be used to build web, desktop and mobile applications using Angular, Vue, React, plain JS and so on.

Installation

Install the library in your project's folder:

npm install kor-ui --save

Integration of Components

There are three main ways of integrating the components into your app:

• Include the whole JS bundle and CSS styles directly in your index.html file:

<script type="text/javascript" charset="utf-8" src="node_modules/kor-ui/kor.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/kor-ui/kor-styles.css">

• Import modules in your .js or .ts files (load kor-styles.css in addition to this):

// either import the whole bundle to enable all components
import 'kor-ui/kor' 
// or import individual modules to load only the desired components
import { korButton } from 'kor-ui/components/kor-button' 

Usage

Use the kor components as if they were native HTML tags. All components allow one and two-way data binding and the attributes fire an attribute-changed event when modified:

<kor-button label="Hello World" color="secondary" disabled></kor-button>
<!-- data binding -->
<kor-accordion [label]="myVar" (expanded-changed)="myFunction()"></kor-accordion>