juja-library v0.2.6

Getting Started

To get started with the juja-library you should get in to your projects directory, open command line and write this command:

npm i juja-library

After including juja-library to your project let's say you want to display simple Button component in your app.

You can check out the documentation of juja-library which is generated by using Storybook tool. https://5fe0daad1293580021c6a69e-qxjuvzdymo.chromatic.com/

Firstly, you need to import JujaBtnModule to your app.module.ts file.

import { JujaBtnModule } from 'juja-library';
…
@NgModule ({....
  imports: [...,
  JujaBtnModule,
…]
})

Then add the <juja-btn> tag to the app.component.html like so:

<juja-btn text="Click me!"></juja-btn>

If you want to add other components the same goes with every each of them. Add components module to your wanted module. And after that you can use it's template to display the component. More examples are listed below.

Button

How to use juja-btn component.

Copy this line of code below and you'll get Button component with primary color and "Primary" text in it.

<juja-btn btnClass="csomething" btnType="primary" text="Primary"></juja-btn>

If you would like to add another parameters or change the existing ones then they are listed in Buttons section.

Checkbox

How to use juja-checkbox component.

Copy this line of code below and you'll get Checkbox component with secondary color and "Checkbox 1" text in it.

<juja-checkbox [color]="'secondary'" text="Checkbox 1"></juja-checkbox>

If you would like to add another parameters or change the existing ones then they are listed in Checkboxes section.

Input

How to use juja-input component.

Copy this line of code below and you'll get Input component with secondary color and "Add new item" text in it. Implement public onInputChange(e): void {console.log(e)} method in .ts file and on input value change you will get new value emitted.

<juja-input [color]="'secondary'" text="Add new item" (inputValueChanged)="onInputChange($event)">
</juja-input>

If you would like to add another parameters or change the existing ones then they are listed in Input section.

Radio Group

How to use juja-radio-group and juja-radio components.

Copy this line of code below and you'll get Radio group component working with secondary color three radios. Implement public onChanges(e): void {console.log(e)} method in .ts file and on radio click change you will get new value emitted.

<juja-radio-group (checkChanged)="onChanges($event)" name="something">
        <juja-radio [color]="'secondary'" value="multi-bubble" text="Multi bubble spinner"></juja-radio>
        <juja-radio [checked]="true" [color]="'secondary'" value="circle" text="Circle spinner"></juja-radio>
        <juja-radio [color]="'secondary'" value="dots" text="Dots spinner"></juja-radio>
        <juja-radio></juja-radio>
</juja-radio-group>

If you would like to add another parameters or change the existing ones then they are listed in RadioGroup section.

Spinner

How to use juja-spinner component.

Copy this line of code below and you'll get default Spinner component with primary color;

<juja-spinner></juja-spinner>

If you would like to add another parameters they are listed in Spinners section.

Switches

How to use juja-switch component.

Copy this line of code below and you'll get Switch component with secondary color and "Switch 1" text in it.

<juja-switch [color]="'secondary'" text="Switch 1"></juja-switch>

If you would like to add another parameters they are listed in Switches section.