0.4.11 • Published 7 years ago
@axon/lego v0.4.11
Axon Web Lego
Bricks are small components given by lib.
Installation
npm i @axon/lego
Bricks
List of bricks
Form
Props
Name of Function | Required | Type | Default value | Description |
---|---|---|---|---|
onValidSubmit | true | function | - | Function which called after valid form submit |
onInvalidSubmit | false | function | - | Function which called after invalid form submit |
onChange | false | function | - | 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 Function | Required | Type | Default value | Description |
---|---|---|---|---|
type | false | string | button | Type of button |
disabled | false | boolean | false | Is button disabled |
loadingContent | false | object or string | - | If loading === true - render this inside button |
loading | false | boolean | false | Is 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 Function | Required | Type | Default value | Description |
---|---|---|---|---|
name | true | string | - | Name of object parameter, passed to onValidSubmit in Form |
type | false | string | text | Type of input |
value | false | string or boolean | - | Value, which is default in input |
validators | false | array | - | Array of validators. Now available email or function, which returns null if no error or string of error |
required | false | boolean | - | Check if value is empty |
description | false | string | - | Description of input, which shows near input |
valueList | false | string[] | - | 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 Function | Required | Type | Default value | Description |
---|---|---|---|---|
placeholder | false | string | - | - |
name | true | string | - | Name of object parameter, passed to onValidSubmit in Form |
options | true | array | - | Array of options to select of type {label: 'abc', value: 2} |
required | false | boolean | - | 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 Function | Required | Type | Default value | Description |
---|---|---|---|---|
name | true | string | - | Name of object parameter, passed to onValidSubmit in Form |
label | true | string | - | Label of switcher shown near component |
value | false | boolean | false | Default 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 Function | Required | Type | Default value | Description |
---|---|---|---|---|
name | true | string | - | Name of object parameter, passed to onValidSubmit in Form |
label | false | string | - | Label of radio shown near component |
value | true | boolean | false | Value of radio |
checked | false | boolean | false | Initial 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