Use with riot.js 4
- Site: https://riot.js.org/
https://infuzz.github.io/riot-formr
Then run these commands:
$ npm install infuzz/riot-formr
//$ npm install @klicat/riot-formrform2: {
attr: {
lang: 'fr',
langs: ['fr', 'en'],
proposeTranslate: true
},
desc: [
{
type: 'title',
title: 'Hello',
},
{
type: 'text',
label: 'Name'
}
]
}To add a text input just add a field with "text" as type in your desc array. You can add a label like that :
desc: [
{
id: 'myText1'
type: 'text',
label: 'Name'
}
]You can also add any HTML's attributes in your field.
desc: [
{
id: myText
type: 'text',
label: 'Name',
placeHolder: 'Smith',
size: 8
}
]Text area works just the same as a text input except that the type is 'textarea' and you need to add the rows attribute :
desc: [
{
id: myTextArea
type: 'textarea',
label: 'Review',
placeHolder: 'Type your review here...',
rows: 8
}
]Here, you need to set the type as password :
desc: [
{
id: 'myPassword'
type: 'password',
label: 'Please type your password :'
}
]This text editor is from quill.js. It works the same as text area except that it handle html input.
{
id: 'mytextedit',
label: 'Article',
type: 'texteditor',
value: '<p><strong><s><u>My first text </u></s></strong></p>'
},To add check boxes, you have to specify the different options givens by your check boxes. You can also specify the values of each checkbox by adding the value attribute :
{
id: 'checboxTransport',
type: 'checkbox',
label: 'Transport choices',
opts: [
{
label: 'Car',
id: 'car'
},
{
label: 'Bus',
id: 'bus',
value: true
}
]
}A switch button is a checkbox who retuen a value when it is checked and when it is not. Furthermore it can control other items by showing or hiding them. To do this you have to specify the id of the element that you want to be controlled by the switch button in the checked or the unchecked array.
{
id: 'switchTest',
type: 'switch',
label: 'Animal',
opts: [
{
checkedLabel: 'He fly',
uncheckedLabel: 'He fall',
checkedValue: 'fly',
uncheckedValue: 'fall',
value: 'fly',
ctrl: {
checked: ["flyDescription"],
unchecked: ["fallDescription"]
}
}Check boxes and radios are really similar. The only diference is that you can check only one radio.
{
id: 'radioAnimal',
type: 'radio',
label: 'Choix animal',
value: 'dog',
opts: [
{
label: 'chien',
id: 'dog',
tip: 'Il faut bien écrire vous avez affaire avec un président'
},
{
label: 'chat',
achecked: true,
id: 'cat',
help: 'Help Please verify your info before'
}
]
},{
id: 'genre',
type: 'select',
label: 'Genre',
value: 'girl',
opts: [
{
label: 'I'm a boy',
value: 'boy'
},
{
label: 'I'm a girl',
value: 'girl'
}
]
}- If you want to turn it into a multiselect input just change the type as multiselect.
We are using the Mobius1 selector which is very complete for the tag selection. To incorporate it in your form you need to set the type as multiselect and set tag as true. In order to add a tag that wasn't in options you need to set the attribute userAddOption as true.
{
id: 'music',
type: 'select',
multiple: true,
tag: true,
userAddOption: true,
label: 'Music',
value: ['guitar'],
opts: [
{
label: 'Piano',
value: 'piano'
},
{
label: 'Guitar',
value: 'guitar',
}
]
},For the date time picker we are using Flatpickr.
By default this picker allow you to choose the date if you want to add time, just set enableTime as true.
{
type: 'datetimepicker',
id: 'mydatetimepicker',
label: 'Date de naissance',
enableTime: true,
tip: 'Tip Please verify your info before',
help: 'Help Please verify your info before',
value: 56564415
},- Note : The format of the returned value is Unix timestamp.
For the color picker we are using Simonwep/pickr wich is a color and opacity picker.
{
id: 'mycolor',
label: 'First color',
type: 'colorpicker',
value: 'red'
},à compléter
à compléter
à compléter
{
type: 'title',
title: 'Hello'
},{
type: 'hr',
label: 'Fly information',
},{
type: 'alert',
color: 'danger',
message: "This is an alert message"
},If you want to display fields inline :
{
id: 'row1',
type: 'row',
desc: [
{
id: 'emailInrRow',
type: 'email',
label: 'E-mail adress',
},
{
id: 'passwordInRow',
type: 'password',
label: 'Password'
},
]
}You can custom fields by adding :
Add the help attribute in your field :
{
id: 'myText',
type: 'text',
help: 'Here you need to type your text'
}à compléter
Add the tip attribute here :
{
type: 'text',
id: "flyDescription",
label: 'Fly description',
tip: 'Précisez l\'oiseau svp'
}This form generator allows multilang forms :
form2: {
attr: {
lang: 'fr',
langs: ['fr', 'en'],
proposeTranslate: true
},
desc: [
{
type: 'title',
title: 'Hello',
},
{
type: 'textarea',
label: 'Write a message here',
multilang: true,
proposeTranslate: 'true
}
]
}In attr :
- lang is your default language
- langs contains all the languages your form allows
- proposeTranslate permit the user to auto-translate the inputs wich are multilang
In desc :
- set multilang as true if your input is a multilang input.
Use the setFormValues() function to set your form. The function needs 2 attributes : formName and data.
data = {
mydatetimepicker: 1488136398547,
checboxTransport: {
car: false,
bus: true
},
emailInrRow: "emailInrRow changed",
fallDescription: {
fr: "fallDescription fr",
en: "fallDescription en"
}
}
setFormValues(myForm,data)Use the getFormValues() function to get your form's values. The function needs 1 attribute : formName. The function will return an object similar to the data object that we have created for the setFormValues() function.