a-elements-library v0.0.3

Accessible angular components

This library was generated with Angular CLI version 10.1.2.

Installation

Open angular CLI and run npm i a-elements-library. The library will be installed on your node_modules folder: node_modules/a-elements-library.

Import modules

Go to your app.modules.ts file and choose which component modules to import:

import {
  NestednumberModule,
  NumberModule,
  TextModule,
  CheckboxModule,
  CheckboxgroupModule,
  RadioButtonModule,
  RadioGroupModule,
  EmailModule,
  SelectModule,
  SubmitButtonModule,
  ResetButtonModule,
  SvgcheckboxModule,
  PasswordModule,
} from "a-elements-library";

Add modules to import array

Remain in app.modules.ts file and add all imported modueles to imports array inside @NgModule({}) decorator:

imports: [
  NestednumberModule,
  NumberModule,
  TextModule,
  CheckboxModule,
  CheckboxgroupModule,
  RadioButtonModule,
  RadioGroupModule,
  EmailModule,
  SelectModule,
  SubmitButtonModule,
  ResetButtonModule,
  SvgcheckboxModule,
  PasswordModule,
];

Syntax examples

a-text component:

<a-text _id="username" _label="left|Insert username"></a-text>

a-email component:

<a-email _id="email" _label="left|Insert your email"></a-email>

a-password component:

<a-password _id="password" _minmax="4,8" _label="left|Choose a password"></a-password>

a-number component:

<a-number _id="age" _label="left|Insert your age"></a-number>

a-checkbox-group component:

<a-checkbox-group _id="myGroup" _group-title="Favourite sport"></a-checkbox-group>

Note: inside this tag you should use just a-checkbox component

a-checkbox component:

<a-checkbox _value="soccer" _label="left|Soccer" _id="favorirteSport1"></a-checkbox>
<a-checkbox _value="baseball" _label="left|Baseball" _id="favorirteSport2"></a-checkbox>
<a-checkbox _value="basketball" _label="left|Basketball" _id="favorirteSport3"></a-checkbox>
<a-checkbox _value="rugby" _label="left|Rugby" _id="favorirteSport4"></a-checkbox>

a-radio-group component:

<a-radio-group _id="myGenderGroup" _group-title="Choose your gender"></a-radio-group>

Note:inside this tag you should use just a-checkbox component

a-radio component:

<a-radio _id="myRadio" _value="male" _label="right|Male" _name="gender"></a-radio>
<a-radio _id="myRadio1" _value="female" _label="right|Female" _name="gender"></a-radio>

a-select component:

<a-select _id="Birthplace" _label="Birthplace:" _values="Alabama,Alaska,Arizona,California,Colorado,Florida,Minnesota,Mississippi"></a-select>

a-checkbox-icon component:

<a-checkbox-icon _unchecked-icon="myUncheckedIcon.png" _checked-icon="/myCheckedIcon.png" _value="italian" _label="right|Italian" _id="spokenLang1"></a-checkbox-icon>
<a-checkbox-icon _unchecked-icon="myUncheckedIcon.png" _checked-icon="/myCheckedIcon.png" _value="italian" _label="right|english" _id="spokenLang2"></a-checkbox-icon>

an-number component:

<an-number _lposition="left" _id="lbl">Insert a number :</an-number>

Note: this tag is similar to a-number but has a different syntax

a-reset component:

<a-reset></a-reset>

a-submit component:

<a-submit></a-submit>

Required attributs

The attributes _id and _label are alwayes required. If you don't provide the required attributes you will have errors on your console

Other attributes

There are other attributes to improve style or validation : _lcss_,_css,_class,_lclass_

Other info

All components can be used on a native form.

Note: All components can be used inside a native form.