- `type`**[String][1]?** Component type, eg. `text`, `image`, `video`, etc.
- `tagName`**[String][1]?** HTML tag of the component, eg. `span`. Default: `div`
- `attributes`**[Object][2]?** Key-value object of the component's attributes, eg. `{ title: 'Hello' }` Default: `{}`
- `name`**[String][1]?** Name of the component. Will be used, for example, in Layers and badges
- `removable`**[Boolean][3]?** When `true` the component is removable from the canvas, default: `true`
- `draggable`**([Boolean][3] | [String][1] | [Function][4])?** Indicates if it's possible to drag the component inside others.
You can also specify a query string to indentify elements,
eg. `'.some-class[title=Hello], [data-gjs-type=column]'` means you can drag the component only inside elements
containing `some-class` class and `Hello` title, and `column` components. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drag is possible. Default: `true`
- `droppable`**([Boolean][3] | [String][1] | [Function][4])?** Indicates if it's possible to drop other components inside. You can use
a query string as with `draggable`. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drop is possible. Default: `true`
- `badgable`**[Boolean][3]?** Set to false if you don't want to see the badge (with the name) over the component. Default: `true`
- `stylable`**([Boolean][3] | [Array][5]<[String][1]>)?** True if it's possible to style the component.
You can also indicate an array of CSS properties which is possible to style, eg. `['color', 'width']`, all other properties
will be hidden from the style manager. Default: `true`
- `stylable-require`**[Array][5]<[String][1]>?** Indicate an array of style properties to show up which has been marked as `toRequire`. Default: `[]`
- `unstylable`**[Array][5]<[String][1]>?** Indicate an array of style properties which should be hidden from the style manager. Default: `[]`
- `highlightable`**[Boolean][3]?** It can be highlighted with 'dotted' borders if true. Default: `true`
- `copyable`**[Boolean][3]?** True if it's possible to clone the component. Default: `true`
- `resizable`**[Boolean][3]?** Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer][6]. Default: `false`
- `editable`**[Boolean][3]?** Allow to edit the content of the component (used on Text components). Default: `false`
- `layerable`**[Boolean][3]?** Set to `false` if you need to hide the component inside Layers. Default: `true`
- `selectable`**[Boolean][3]?** Allow component to be selected when clicked. Default: `true`
- `hoverable`**[Boolean][3]?** Shows a highlight outline when hovering on the element if `true`. Default: `true`
- `void`**[Boolean][3]?** This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
- `styles`**[String][1]?** Component related styles, eg. `.my-component-class { color: red }`
- `content`**[String][1]?** Content of the component (not escaped) which will be appended before children rendering. Default: `''`
- `icon`**[String][1]?** Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '<iclass="fa fa-square-o"></i>'. Default: `''`
- `script`**([String][1] | [Function][4])?** Component's javascript. More about it [here][7]. Default: `''`
- `script-export`**([String][1] | [Function][4])?** You can specify javascript available only in export functions (eg. when you get the HTML).
If this property is defined it will overwrite the `script` one (in export functions). Default: `''`
- `traits`**[Array][5]<([Object][2] | [String][1])>?** Component's traits. More about it [here][8]. Default: `['id', 'title']`
- `propagate`**[Array][5]<[String][1]>?** Indicates an array of properties which will be inhereted by all NEW appended children.
For example if you create a component likes this: `{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }`
and append some new component inside, the new added component will get the exact same properties indicated in the `propagate` array (and the `propagate` property itself). Default: `[]`
- `toolbar`**[Array][5]<[Object][2]>?** Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`).
- `components`**Collection<[Component][9]>?** Children components. Default: `null`
* `type`**[String][1]?** Component type, eg. `text`, `image`, `video`, etc.
* `tagName`**[String][1]?** HTML tag of the component, eg. `span`. Default: `div`
* `attributes`**[Object][2]?** Key-value object of the component's attributes, eg. `{ title: 'Hello' }` Default: `{}`
* `name`**[String][1]?** Name of the component. Will be used, for example, in Layers and badges
* `removable`**[Boolean][3]?** When `true` the component is removable from the canvas, default: `true`
* `draggable`**([Boolean][3] | [String][1] | [Function][4])?** Indicates if it's possible to drag the component inside others.
You can also specify a query string to indentify elements,
eg. `'.some-class[title=Hello], [data-gjs-type=column]'` means you can drag the component only inside elements
containing `some-class` class and `Hello` title, and `column` components. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drag is possible. Default: `true`
* `droppable`**([Boolean][3] | [String][1] | [Function][4])?** Indicates if it's possible to drop other components inside. You can use
a query string as with `draggable`. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drop is possible. Default: `true`
* `badgable`**[Boolean][3]?** Set to false if you don't want to see the badge (with the name) over the component. Default: `true`
* `stylable`**([Boolean][3] | [Array][5]<[String][1]>)?** True if it's possible to style the component.
You can also indicate an array of CSS properties which is possible to style, eg. `['color', 'width']`, all other properties
will be hidden from the style manager. Default: `true`
* `stylable-require`**[Array][5]<[String][1]>?** Indicate an array of style properties to show up which has been marked as `toRequire`. Default: `[]`
* `unstylable`**[Array][5]<[String][1]>?** Indicate an array of style properties which should be hidden from the style manager. Default: `[]`
* `highlightable`**[Boolean][3]?** It can be highlighted with 'dotted' borders if true. Default: `true`
* `copyable`**[Boolean][3]?** True if it's possible to clone the component. Default: `true`
* `resizable`**[Boolean][3]?** Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer][6]. Default: `false`
* `editable`**[Boolean][3]?** Allow to edit the content of the component (used on Text components). Default: `false`
* `layerable`**[Boolean][3]?** Set to `false` if you need to hide the component inside Layers. Default: `true`
* `selectable`**[Boolean][3]?** Allow component to be selected when clicked. Default: `true`
* `hoverable`**[Boolean][3]?** Shows a highlight outline when hovering on the element if `true`. Default: `true`
* `locked`**[Boolean][3]?** Disable the selection of the component and its children in the canvas. Default: `false`
* `void`**[Boolean][3]?** This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
* `styles`**[String][1]?** Component related styles, eg. `.my-component-class { color: red }`
* `content`**[String][1]?** Content of the component (not escaped) which will be appended before children rendering. Default: `''`
* `icon`**[String][1]?** Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '<iclass="fa fa-square-o"></i>'. Default: `''`
* `script`**([String][1] | [Function][4])?** Component's javascript. More about it [here][7]. Default: `''`
* `script-export`**([String][1] | [Function][4])?** You can specify javascript available only in export functions (eg. when you get the HTML).
If this property is defined it will overwrite the `script` one (in export functions). Default: `''`
* `traits`**[Array][5]<([Object][2] | [String][1])>?** Component's traits. More about it [here][8]. Default: `['id', 'title']`
* `propagate`**[Array][5]<[String][1]>?** Indicates an array of properties which will be inhereted by all NEW appended children.
For example if you create a component likes this: `{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }`
and append some new component inside, the new added component will get the exact same properties indicated in the `propagate` array (and the `propagate` property itself). Default: `[]`
* `toolbar`**[Array][5]<[Object][2]>?** Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`).
* `components`**Collection<[Component][9]>?** Children components. Default: `null`
### init
@ -74,9 +75,9 @@ Hook method, called when the model has been updated (eg. updated some model's pr
#### Parameters
-`property`**[String][1]** Property name, if triggered after some property update
-`value`**any** Property value, if triggered after some property update
-`previous`**any** Property previous value, if triggered after some property update
* `property`**[String][1]** Property name, if triggered after some property update
* `value`**any** Property value, if triggered after some property update
* `previous`**any** Property previous value, if triggered after some property update
### removed
@ -88,28 +89,28 @@ Check component's type
#### Parameters
-`type`**[string][1]** Component type
* `type`**[string][1]** Component type
#### Examples
```javascript
component.is("image");
component.is('image')
// -> false
```
Returns **[Boolean][3]**
Returns **[Boolean][3]**
### props
Return all the propeties
Returns **[Object][2]**
Returns **[Object][2]**
### index
Get the index of the component in the parent collection.
Returns **[Number][10]**
Returns **[Number][10]**
### setDragMode
@ -118,9 +119,9 @@ To get more about this feature read: [https://github.com/artf/grapesjs/issues/19
- `opts.attributes`**([Object][2] | [Function][4])** You can pass an object of custom attributes to replace with the current ones or you can even pass a function to generate attributes dynamically. (optional, default `null`)
- `opts.withProps`**[Boolean][3]?** Include component properties as `data-gjs-*` attributes. This allows you to have re-importable HTML.
- `opts.altQuoteAttr`**[Boolean][3]?** In case the attribute value contains a `"` char, instead of escaping it (`attr="value ""`), the attribute will be quoted using single quotes (`attr='value "'`).
* `opts.tag` **[String][1]?** Custom tagName
* `opts.attributes` **([Object][2] | [Function][4])** You can pass an object of custom attributes to replace with the current ones or you can even pass a function to generate attributes dynamically. (optional, default `null`)
* `opts.withProps` **[Boolean][3]?** Include component properties as `data-gjs-*` attributes. This allows you to have re-importable HTML.
* `opts.altQuoteAttr` **[Boolean][3]?** In case the attribute value contains a `"` char, instead of escaping it (`attr="value ""`), the attribute will be quoted using single quotes (`attr='value "'`).
-`singleAtRule`**[Boolean][4]?** This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations
-`state`**[String][3]?** State of the rule, eg: `hover`, `focused`
-`important`**([Boolean][4] | [Array][1]<[String][3]>)?** If true, sets `!important` on all properties. You can also pass an array to specify properties on which use important
-`stylable`**[Boolean][4]?** Indicates if the rule is stylable from the editor[Device]: device.html[State]: state.html[Component]: component.html
* `selectors`**[Array][1]\<Selector>** Array of selectors
* `singleAtRule`**[Boolean][4]?** This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations
* `state`**[String][3]?** State of the rule, eg: `hover`, `focused`
* `important`**([Boolean][4] | [Array][1]<[String][3]>)?** If true, sets `!important` on all properties. You can also pass an array to specify properties on which use important
* `stylable`**[Boolean][4]?** Indicates if the rule is stylable from the editor[Device]: device.html[State]: state.html[Component]: component.html
### getAtRule
@ -23,18 +23,14 @@ Returns the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
Artur Arseniev
4 years ago