A next-generation tool to create blazing-fast documentation sites
API
created:7/29/2020
,
updated:10/20/2020

The controls api comes with a selection of pre-defined controls that can be used to create interactive examples of your components.

ControlTypes.TEXT

userName: {
type: ControlTypes.TEXT,
label: 'Name',
value: 'Storyteller',
}

all properties of ControlType in addition to:

NameTypeDescription
escapeValuebooleanallows to receive escaped string values to help prevent XSS attacks by default - false
placeholderstringplaceholder for empty properties either undefined initial value or user clears the field
rowsnumbernumber 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

more examples

ControlTypes.NUMBER

age: {
type: ControlTypes.NUMBER,
label: 'Age',
value: 78,
range: true,
min: 0,
max: 90,
step: 5,
},

all properties of ControlType in addition to:

NameTypeDescription
maxnumbermaximum allowed value for numeric property
minnumberminimum allowed value for numeric property
rangebooleanif true, will display a range type slider editor
stepnumberstepper for numeric editor /i nc/dec value

7

Name
Description
Default
Controls
number
number
7

more examples

ControlTypes.BOOLEAN

nice: {
type: ControlTypes.BOOLEAN,
label: 'Nice',
value: true,
},

all properties of ControlType

TRUE

Name
Description
Default
Controls
bool
boolean
true

more examples

ControlTypes.OPTIONS

fruit: {
type: ControlTypes.OPTIONS,
label: 'Fruit',
value: 'apple',
options: {
Apple: 'apple',
Banana: 'banana',
Cherry: 'cherry',
},
},

all properties of ControlType in addition to:

NameTypeDescription
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"
]

more examples

ControlTypes.DATE

birthday: {
type: ControlTypes.DATE,
label: 'Birthday',
value: new Date(),
},

all properties of ControlType in addition to:

NameTypeDescription
datePickerbooleanwhether to display a date picker (calendar). default: true
timePickerbooleanwhether to display a time picker (calendar). default: true

1/1/2020

Name
Description
Default
Controls
date
date
"2020-01-01T05:00:00.000Z"

more examples

ControlTypes.COLOR

color: {
type: 'color',
value: '#000000',
},

all properties of ControlType in addition to:

NameTypeDescription
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

more examples

ControlTypes.BUTTON

button: {
type: ControlTypes.BUTTON,
onClick: () => {
// .. code to modify some variables
}
},

all properties of ControlType in addition to:

NameTypeDescription
onClickfunction (prop*: ComponentControlButton): void;for button type fields, an onClick handler

Name
Description
Default
Controls
onClick
button
-

more examples

ControlTypes.OBJECT

style: {
type: ControlTypes.OBJECT,
label: 'Styles',
value: {
// do not randomize the border style
border: { 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:

NameTypeDescription
editLabelstringthe label for the editor button

Name
Description
Default
Controls
style
object
{
  "color": "red",
  "backgroundColor": "lightgrey",
  "padding": 2
}

more examples

ControlTypes.ARRAY

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:

NameTypeDescription
rowType*ComponentControlstype of the items in each row of the array
editLabelstringthe label for the editor button

Name
Description
Default
Controls
array
array
[
  {
    "label": "Button 1",
    "color": "red"
  },
  {
    "label": "Button 2",
    "color": "grey"
  }
]

more examples

ControlTypes.FILES

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:

NameTypeDescription
acceptstringtype of files to accept user to open ex 'image/*',

run time control

Name
Description
Default
Controls
files
files
[
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII="
]

more examples