Introduction
- Quickstart
- About
How-to
- Make your content editable
- Create a custom component
Usage
- General usage
- AngularJS 1
- Angular 2
- React
- Vue.js
- Bootstrap
- Data only
API
- Global methods
- Component HTML
- Component CSS
- Component JavaScript
- Component.Project
- Component.Event
- Component.Vue
- Component.axios
Examples
- Kitchen Sink
- Content Block
- Team Page
- Nonprofit
- Contact Form
- Carousel (Slideshow)
- Sidenav
Community
- Requests
- Contributing
Global methods
Component
is a global JavaScript object that provides access to all of the components on a page along with several useful utility functions. You can interact with it to read and write data, hook into component events, load and render components, and more.
To use the global Component
object in your own JavaScript, be sure that the Component IO <script>
tag is placed in your HTML before (above) your JavaScript so that the Component IO script executes first.
Component( key )
All components are built using the underlying API for vue.js. Calling Component('_key_')
, where _key_
is the key of the component, will give a handle to the Vue instance for that component.
For example, the component below renders the text Hello World!
|
In this case, Component('ranno')
gives access to the component. This type of access is the basis for interacting with components programmatically.
Component( key ).attr
A getter method that returns a value held by a component.
Usage:
Component('ranno').text// -> "Hello World!"
The properties available to get vary by component.
Component( key ).attr =
A setter method that sets a component property locally. Does not save the value for future page loads.
Usage:
Component('ranno').text = 'New text'// -> "New text"
The properties available to set vary by component.
Component.ready( function )
Executes a function once all components have been loaded.
Multiple functions can be registered with ready()
and they will all be executed when components are done loading. Any functions registered after components are ready will be executed immediately.
Usage with callback:
Component.ready(function () {console.log('Components are ready (callback)')Component('ranno').text = 'New text'})Usage with promise:
Component.ready().then(function () {console.log('Components are ready (promise)')Component('ranno').text = 'New text'})
Component.render( function, { options } )
Renders any <component>
tags that have not been rendered.
Usage with callback:
Component.render(function () {console.log('Components were rendered (callback)')})Usage with promise:
Component.render().then(function () {console.log('Components were rendered (promise)')})
The Component.render()
method runs automatically when the Component IO script loads. However, you may not have all components on the page at that time, so you can call Component.render()
at any time to render components that have been added since initial page load. There are a few scenarios where this may happen, and the behavior for each is shown below:
TL;DR If a component’s data has already been fetched, that data will be reused on subsequent renders without making additional API calls.
Scenario | Behavior |
---|---|
No unrendered components | Execute promise or callback, if any. |
New, unrendered components | Fetch data with single API call for all new components, then render unrendered components, then execute promise or callback, if any. |
Previously fetched (but now unrendered) components | Use the existing data from Component.Store to render unrendered components, then execute promise or callback, if any. |
Mixed components (some previously fetched, some new) | Fetch data with single API call for new components, then add data to Component.Store , then use Component.Store to render all unrendered components, then execute promise or callback, if any. |
- Options
Property | Type | Default | Description |
---|---|---|---|
dataComponent | boolean |
false |
If true, use <div data-component></div> pattern instead of <component></component> |
Options can be passed as the first parameter if no callback is needed, e.g.
Component.render({ dataComponent: true })
Component.buildImage( image, { options } )
Resizes and crops an image
based on options
inputs.
Usage:
<!-- Inside of Component IO editor HTML panel --><img :src="buildImage(image, options)" />// Inside of Component IO editor JavaScript panelComponent.buildImage(image, options)
Option | Type | Default | Description |
---|---|---|---|
w | Integer |
- | Width of the image in pixels |
h | Integer |
- | Height of the image in pixels |
c | String |
fit |
Cropping mode: scale , fit , mfit , fill , lfill , limit , pad , lpad , mpad , crop , or thumb . |
g | String |
center |
Cropping gravity: see link for options. |
Example:
Given an
image
field with an uploaded image:You can resize and crop the image:
<img :src="buildImage(image, { w: 400, h: 150, c: 'fill' })" />OR
var newImage = Component.buildImage(component.data.image, { w: 400, h: 150, c: 'fill' })If the image has a face, you can smart crop by using the
g: 'face'
option:<img :src="buildImage(image, { w: 150, h: 150, c: 'crop', g: 'face' })" />OR
var newImage = Component.buildImage(component.data.image, { w: 150, h: 150, c: 'crop', g: 'face' })
Component.loadScript( url, callback, { opts } )
Loads a script as denoted by url
and executes an optional callback
function once the script is loaded.
Usage:
Component.loadScript('https://www.google.com/recaptcha/api.js', function () {console.log('reCaptcha script has loaded.')})Options
Property | Type | Default | Description |
---|---|---|---|
id | string |
none | Sets the id attribute for the <script> tag. |
If a <script>
tag with the specified url
or id
already exists, a new tag will not be added, and the callback
function will be invoked immediately if present.
Component.loadStylesheet( url, callback, { opts } )
Loads a stylesheet as denoted by url
and then executes a callback
function once the script is loaded.
Usage:
Component.loadStylesheet('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css', function () {console.log('Bulma CSS has loaded.')})Options
Property | Type | Default | Description |
---|---|---|---|
id | string |
none | Sets the id attribute for the <script> tag. |
If a <link>
tag with the specified url
or id
already exists, a new tag will not be added, and the callback
function will be invoked immediately if present.