- Required Files
- Directory Path Structure
- Component Package (
component.json
) - Component Methods, Data and Events (
component.js
) - Component Template Markup (
component.html
)
User can add new component, by adding a directory with three required files
your-component
|__ component.json
|__ component.js
|__ component.html
|__ css
|_____ hello.css
|__ js
|_____ world.js
|__ img
|_____ icon.svg
Note
icon.svg
oricon.png
is optional, if this value is blank, it will be replaced with our default icon.- CSS and Javascript directory is optional, you can load additional css it from
component.json
The format must be in JSON format and must be valid.
id {String}
(required) Your component unique value.label {String}
(optional) Your component name. Will displays in component section. Default isUnlabeled
group {String}
(required) Component group. Your can name group with whatever. Your component will displays here.settings {Array}
(optional) Custom settings. If you want to override custom settings and applying to your mark up, you can create custom forms here. Forms has these default format:id {String}
(required). Only accepts lowercase letter and _type {String}
(required). Available values:text|textarea|list|switch|button|radio|checkbox|range|imageupload
label {String}
(optional). Form label.value {String}
(optional). Default value.attrs {String}
(optional). Additional form attributes. You can add your custom class, data, etc.list {Array}
(optional). Only available if type isdropdown
. e.g["Apple", "Banana"]
multiple {Boolean}
(optional). Only available, if type arebutton
,radio
,checkbox
,range
.button {Array>Object}
(optional). Only available, if type isbutton
.- e.g
[ { "label": "Button 1", "value": "button1" }, { "label": "Button 2", "value": "button2" } ]
- e.g
radio {Array>Object}
(optional). Only available, if type isradio
.- e.g
[ { "label": "Radio 1", "value": "radio1" }, { "label": "Radio 2", "value": "radio2" } ]
- e.g
checkbox {Array>Object}
(optional). Only available, if type ischeckbox
.- e.g
[ { "label": "Checkbox 1", "value": "radio1" }, { "label": "Checkbox 2", "value": "radio2" } ]
- e.g
range {Array|Number}
(optional). Only available, if type isrange
. Ifmultiple
is set as true, only array will be accepted as value. e.g10
or[5, 10]
css {Array}
(optional) Additional css. You can add external urls.js {Array}
(optional) Additional javascript. You can add external urls.
{
"id": "unique-id",
"label": "My Element",
"group": "Custom Component",
"settings": [
{
"id": "my-text"
"type": "text",
"value": "",
...
},
...
],
"css": ["hello.css", "http://your-external.css"],
"js": ["world.js", "http://your-external.js"]
}
Collection of data, methods, and events in components.
Custom data belongs here, this data is separated from component package settings, but you can call this data in forms (settings).
Event when uno is initializing component
Event when component is dragged and dropped into blocks.
Event data observer, when data or settings are changed.
Event when user start to dragging component.
Event when user dragging component.
Event after component dropped, but it calls before ready.
// This declaration must be written in component.js
// Or your component will be not loaded
uno.component.add({
data: {},
init: function () {},
ready: function () {},
change: function (key, value, oldValue) {},
dragstart: function () {},
dragmove: function (coords) {},
dragend: function () {}
})
Component markup specification.
Wrapper is non selectable element
accept {String}
(required) Acceptable parent, separated by commas. Default isnull
tag {String}
(optional) Element tag. Default issection
<wrapper class=“uk-row” tag=“section” accept=“section,container”>
...
</wrapper>
Element is a selectable element. Builder can select element and see the outline in the editor.
accept {String}
(required) Acceptable parent, separated by commas. Default isnull
accept-child {Boolean}
(optional). Whether element is dropable or not. Default isfalse
tag {String}
(optional) Element tag. Default isdiv
<wrapper class=“uk-row” tag=“section” accept=“section,container”>
<wrapper class=“uk-width-1-1”>
<element accept-child=“true”></element>
</wrapper>
</wrapper>
Content is an editable element with basic editor (Bold, Italic, Link). Builder can edit this element via double click.
tag {String}
(optional) Element tag, you may change this tospan
to create an inline-block editor. Default isdiv
<editor tag="span">Your content here</editor>
Column is an dropable and selectable element.
grid {String}
(optional) Column grid, how many grid your column is.
<element class="grid">
<column grid="3">..</column>
<column grid="7">..</column>
</element>