Table of Contents
- Required Files
- Directory Path Structure
- Component Package (
component.json
) - Component Methods, Data and Events (
component.js
) - Component Template Markup (
component.html
)
Required Files
User can add new component, by adding a directory with three required files
Directory path structure
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
component.json
Component Package The format must be in JSON format and must be valid.
Format
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.
Example
{
"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"]
}
component.js
Component Methods, Data and Events Collection of data, methods, and events in components.
Object
data
Custom data belongs here, this data is separated from component package settings, but you can call this data in forms (settings).
init
Event when uno is initializing component
ready
Event when component is dragged and dropped into blocks.
change
Event data observer, when data or settings are changed.
dragstart
Event when user start to dragging component.
dragmove
Event when user dragging component.
dragend
Event after component dropped, but it calls before ready.
Example
// 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.html
Component Template Markup Component markup specification.
<wrapper>
Wrapper Wrapper is non selectable element
Attributes
accept {String}
(required) Acceptable parent, separated by commas. Default isnull
tag {String}
(optional) Element tag. Default issection
Example
<wrapper class=“uk-row” tag=“section” accept=“section,container”>
...
</wrapper>
<element>
Element Element is a selectable element. Builder can select element and see the outline in the editor.
Attributes
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
Example
<wrapper class=“uk-row” tag=“section” accept=“section,container”>
<wrapper class=“uk-width-1-1”>
<element accept-child=“true”></element>
</wrapper>
</wrapper>
<content>
Content Content is an editable element with basic editor (Bold, Italic, Link). Builder can edit this element via double click.
Attributes
tag {String}
(optional) Element tag, you may change this tospan
to create an inline-block editor. Default isdiv
Example
<editor tag="span">Your content here</editor>
<column>
Column Column is an dropable and selectable element.
Attributes
grid {String}
(optional) Column grid, how many grid your column is.
Example
<element class="grid">
<column grid="3">..</column>
<column grid="7">..</column>
</element>