hc-web-library v1.2.0

wc

A design system / UI component library built with LitElement. Based on the web components standards, wc 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 through npm:

npm install hc-web-library--save

Integration of Components

Load the whole bundle

The most simple and common way of including the components into an application is by loading the core bundle:

// include bundle through module import
import 'hc-web-library'
// if using JS, css can also be imported. if using TS, use html stylesheet as shown below
import 'hc-web-library/wc-styles.css'

or

<!-- include bundle and styles in html file -->
<script type="text/javascript" charset="utf-8" src="node_modules/hc-web-library/index.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/hc-web-library/wc-styles.css">

Load single components

As an alternative, you can also load individual components to reduce loading time. Be aware that components are inter-dependent and should be imported independently:

// include individual components and styles through module import
import 'hc-web-library/components/button'
import 'hc-web-library/components/text'
// if using JS, css can also be imported. if using TS, use html stylesheet as shown below
import 'hc-web-library/wc-styles.css'

or

<!-- include single components and styles in html file -->
<script type="text/javascript" charset="utf-8" src="node_modules/hc-web-library/components/button/index.js"></script>
<script type="text/javascript" charset="utf-8" src="node_modules/hc-web-library/components/text/index.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/hc-web-library/wc-styles.css">

Usage

Use the wc 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:

<!-- button variations -->
<wc-button label="Hello World" color="primary"></wc-button>
<wc-button label="Hello World" color="secondary" disabled></wc-button>
<!-- Input variations -->
<wc-input condensed label="Text condensed empty"></wc-input>
<wc-input label="Text filled" value="Hi"></wc-input>
<wc-input label="Text icon">
<wc-icon button icon="text_format" slot="functions"></wc-icon>
</wc-input>
<!-- search -->
<wc-input label="Search" value="Hi" type="search"></wc-input>
<!-- number -->
<wc-input
condensed
label="Number condensed empty"
type="number"
></wc-input>
<wc-input
label="Number empty (min 50, max 100, step 10)"
type="number"
min="50"
max="100"
step="10"
></wc-input>
<!-- date -->
<wc-input type="date"></wc-input>
<!-- status -->
<wc-input label="Status error" status="error"></wc-input>
<wc-input label="Status success" status="success"></wc-input>
<wc-input label="Status warning" status="warning"></wc-input>