0.4.11 • Published 7 years ago

@axon/lego v0.4.11

Weekly downloads
78
License
-
Repository
-
Last release
7 years ago

Axon Web Lego

npm version build

Bricks are small components given by lib.

Installation

npm i @axon/lego

Bricks

List of bricks

Form

Props

Name of FunctionRequiredTypeDefault valueDescription
onValidSubmittruefunction-Function which called after valid form submit
onInvalidSubmitfalsefunction-Function which called after invalid form submit
onChangefalsefunction-Function which called on change any input value

How to use

import {Form, Input} from '@axon/lego';

<Form
  onValidSubmit={(res) => {
    // do some stuff here...
  }}
  onInvalidSubmit={(errors) => {
    // do some stuff here...
  }}
>
  <Input name="email" placeholder="Email" required={true} validators={['email']} />
  <button type="submit">Submit</button>
</Form>

Button

Props

Name of FunctionRequiredTypeDefault valueDescription
typefalsestringbuttonType of button
disabledfalsebooleanfalseIs button disabled
loadingContentfalseobject or string-If loading === true - render this inside button
loadingfalsebooleanfalseIs button loading

How to use

import {Button} from '@axon/lego';

<Button
  type="submit"
  onClick={() => {
    // do some stuff here...
  }}
>
  Submit
</Button>

Example

Input

Props

Name of FunctionRequiredTypeDefault valueDescription
nametruestring-Name of object parameter, passed to onValidSubmit in Form
typefalsestringtextType of input
valuefalsestring or boolean-Value, which is default in input
validatorsfalsearray-Array of validators. Now available email or function, which returns null if no error or string of error
requiredfalseboolean-Check if value is empty
descriptionfalsestring-Description of input, which shows near input
valueListfalsestring[]-A set of option elements that represent the values available for other controls.

More information about validators

Now available strings 'email', 'required' or function, first parameter is inputs value second - all other form values (typed)

How to use

import {Form, Input} from '@axon/lego';

<Form
  onValidSubmit={({email}) => {
    // do some stuff here...
  }
>
  <Input name="email_one" placeholder="Email" required={true} validators={['email', (value, {email_two}) => value === email_two ? null : 'Email 1 and email 2 should be equal']} />
  <Input name="email_two" placeholder="Email" required={true} validators={['email', (value, {email_one}) => value === email_one ? null : 'Email 1 and email 2 should be equal']} />
  <button type="submit">Submit</button>
</Form>

Example

Select

Props

Name of FunctionRequiredTypeDefault valueDescription
placeholderfalsestring--
nametruestring-Name of object parameter, passed to onValidSubmit in Form
optionstruearray-Array of options to select of type {label: 'abc', value: 2}
requiredfalseboolean-On submit check if value is empty

How to use

import {Form, Select} from '@axon/lego';

<Form
  onValidSubmit={({role}) => {
    // do some stuff here...
  }}
>
  <Select
    name="role"
    placeholder="Choose role..."
    options={[{name: 'QA', value: 'qa'}, {name: 'Backend', value: 'back'}]}
    required={true}
  />
  <button type="submit">Submit</button>
</Form>

Example

Switcher

Props

Name of FunctionRequiredTypeDefault valueDescription
nametruestring-Name of object parameter, passed to onValidSubmit in Form
labeltruestring-Label of switcher shown near component
valuefalsebooleanfalseDefault value of switcher

How to use

import {Form, Switcher} from '@axon/lego';

<Form
  onValidSubmit={({active}) => {
    // do some stuff here...
  }}
>
  <Switcher name="active" label="Active" value={true} />
  <button type="submit">Submit</button>
</Form>

Example

Radio

Props

Name of FunctionRequiredTypeDefault valueDescription
nametruestring-Name of object parameter, passed to onValidSubmit in Form
labelfalsestring-Label of radio shown near component
valuetruebooleanfalseValue of radio
checkedfalsebooleanfalseInitial checked state

How to use

import {Form, Radio} from '@axon/lego';

<Form
  onValidSubmit={({active}) => {
    // do some stuff here...
  }}
>
  <Radio name="radio" label="label-1" value="val-1" checked={true} />
  <Radio name="radio" label="label-2" value="val-2" />
  <button type="submit">Submit</button>
</Form>
0.4.11-alpha2

7 years ago

0.4.11-alpha1

7 years ago

0.4.11

7 years ago

0.4.10

7 years ago

0.4.9

7 years ago

0.4.8

7 years ago

0.4.7

7 years ago

0.4.6

7 years ago

0.4.5

7 years ago

0.4.4

7 years ago

0.4.3

7 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.4.0-alpha.12

7 years ago

0.4.0-alpha.11

8 years ago

0.4.0-alpha.10

8 years ago

0.4.0-alpha.9

8 years ago

0.4.0-alpha.8

8 years ago

0.4.0-alpha.7

8 years ago

0.4.0-alpha.6

8 years ago

0.4.0-alpha.5

8 years ago

0.4.0-alpha.4

8 years ago

0.4.0-alpha.3

8 years ago

0.4.0-alpha.2

8 years ago

0.4.0-alpha.1

8 years ago