The controls api comes with a selection of pre-defined controls that can be used to create interactive examples of your components.
userName: {type: ControlTypes.TEXT,label: 'Name',value: 'Storyteller',}
all properties of ControlType in addition to:
| Name | Type | Description |
|---|---|---|
escapeValue | boolean | allows to receive escaped string values to help prevent XSS attacks by default - false |
placeholder | string | placeholder for empty properties either undefined initial value or user clears the field |
rows | number | number of rows for a TextArea field for longer text by default, only 1 row = means a Input field > 1 rows = an area field |
some text
Name | Description | Default | Controls |
|---|---|---|---|
| text | text | some text |
age: {type: ControlTypes.NUMBER,label: 'Age',value: 78,range: true,min: 0,max: 90,step: 5,},
all properties of ControlType in addition to:
| Name | Type | Description |
|---|---|---|
max | number | maximum allowed value for numeric property |
min | number | minimum allowed value for numeric property |
range | boolean | if true, will display a range type slider editor |
step | number | stepper for numeric editor /i nc/dec value |
7
Name | Description | Default | Controls |
|---|---|---|---|
| number | number | 7 |
nice: {type: ControlTypes.BOOLEAN,label: 'Nice',value: true,},
all properties of ControlType
TRUE
Name | Description | Default | Controls |
|---|---|---|---|
| bool | boolean | true |
fruit: {type: ControlTypes.OPTIONS,label: 'Fruit',value: 'apple',options: {Apple: 'apple',Banana: 'banana',Cherry: 'cherry',},},
all properties of ControlType in addition to:
| Name | Type | Description |
|---|---|---|
options* | Record<string, number | string[] | number[] | { label: string; value: any }> | |
display | 'select' | 'multi-select' | 'radio' | 'inline-radio' | 'check' | 'inline-check' | how to render selecting the options: default is 'select' |
watermelon
Name | Description | Default | Controls |
|---|---|---|---|
| options | options | [ "watermelon" ] |
birthday: {type: ControlTypes.DATE,label: 'Birthday',value: new Date(),},
all properties of ControlType in addition to:
| Name | Type | Description |
|---|---|---|
datePicker | boolean | whether to display a date picker (calendar). default: true |
timePicker | boolean | whether to display a time picker (calendar). default: true |
1/1/2020
Name | Description | Default | Controls |
|---|---|---|---|
| date | date | "2020-01-01T05:00:00.000Z" |
color: {type: 'color',value: '#000000',},
all properties of ControlType in addition to:
| Name | Type | Description |
|---|---|---|
kind | 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | in what format to save the color as a string (default to hex) |
#555
Name | Description | Default | Controls |
|---|---|---|---|
| color | color | #555 |
button: {type: ControlTypes.BUTTON,onClick: () => {// .. code to modify some variables}},
all properties of ControlType in addition to:
| Name | Type | Description |
|---|---|---|
onClick | function (prop*: ComponentControlButton): void; | for button type fields, an onClick handler |
Name | Description | Default | Controls |
|---|---|---|---|
| onClick | button | - |
style: {type: ControlTypes.OBJECT,label: 'Styles',value: {// do not randomize the border styleborder: { type: ControlTypes.TEXT, value: '2px dashed silver', data: null },borderRadius: { type: ControlTypes.NUMBER, value: 10 },padding: { type: ControlTypes.NUMBER, value: 10 },},}
all properties of ControlType in addition to:
| Name | Type | Description |
|---|---|---|
editLabel | string | the label for the editor button |
Name | Description | Default | Controls |
|---|---|---|---|
| style | object | {
"color": "red",
"backgroundColor": "lightgrey",
"padding": 2
} |
arrayItems: {type: ControlTypes.ARRAY,label: 'Items',rowType: {name: { type: ControlTypes.TEXT },},value: [{ name: 'Laptop' }, { name: 'Book' }, { name: 'Whiskey' }],},
all properties of ControlType in addition to:
| Name | Type | Description |
|---|---|---|
rowType* | ComponentControls | type of the items in each row of the array |
editLabel | string | the label for the editor button |
Name | Description | Default | Controls |
|---|---|---|---|
| array | array | [
{
"label": "Button 1",
"color": "red"
},
{
"label": "Button 2",
"color": "grey"
}
] |
images: {type: ControlTypes.FILES,label: 'Happy Picture',accept: 'image/*',value: ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',],},
all properties of ControlType in addition to:
| Name | Type | Description |
|---|---|---|
accept | string | type of files to accept user to open ex 'image/*', |
Name | Description | Default | Controls |
|---|---|---|---|
| files | files | [ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=" ] |