real-ui v1.0.4

Real-UI

An Angular UI component library for Real.

Installation

npm install real-ui

To use the module, first import the components on app.module :

import { AlertModule, InputModule, ToggleSwitchModule } from 'real-ui';

then add them to your imports:

...
imports: [
    AlertModule,
    InputModule,
    ToggleSwitchModule,
  ],
...

You can now use them directly in your Angular app:

<rul-alert></rul-alert>

<rul-toggle-switch></rul-toggle-switch>

<rul-input></rul-input>

For additional information, please have a look at the usages section.

Known issues

To solve the issue: ERROR in ./node_modules/real-ui/src/public-api.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):

You should add real-ui to include on tsconfig.app.json as shown below:

...
"include": [
  "src/**/*.ts", 
  "node_modules/real-ui/**/*"   
],
...

Usage

This library provides three customizable UI elements for easy usage.

Alert

<rul-alert type="success" alertMessage="changes are saved" delay="3000" closable="true"></rul-alert>

Available settings

type - 'default'|'success'|'warning'|'error' alertMessage - String - The alert message to be displayed delay - Number - Sets the amount of time in for the alert to be displayed for, in ms closable - Boolean - If true, the alert disappears upon mouse click

Toggle-Switch

<rul-toggle-switch checked="true" disabled="true"></rul-toggle-switch>

Available settings

checked - Boolean - If true, makes the toggle checked as default disabled - Boolean - If true, makes the toggle disabled name - String - To set a name for the toggle label - String - To set a label for the toggle id - String - To set an id for the toggle

Input

<rul-input placeholder="this is a placeholder" required="true" type='email' label="Name" ></rul-input>

Available settings

placeholder - String - Determines the placeholder text label - String - Determines the label disabled - Boolean - Disables the input field if true - Does not work when false, it has to be either null or true. required - Boolean - Makes the input field required if true readonly - Boolean - Makes the input field not editable type - Enum text, number, email, password - Determines the input type