Pages
You can define one or more pages in the pages
key. Each page has a few high-level properties and a list of contentBlocks
.
High-level page properties:
{
contentBlocks: [], // list of blocks that define the content of the page
iconName: "list", // icon to be used when the page is displayed as tab (http://ionicframework.com/docs/ionicons/)
showAsTab: true, // when true the page will be included in the tabs, otherwise it will have a link in the side menu
title: "News" // title of the page, to be shown in the tabs bar or in the side menu
}
Content-blocks
Content blocks are the basic building blocks to create the content of a page. Each content block has this basic structure:
{
component: "" // string - component name
data: {} // component specific data
}
1. Albums
Albums can be used to display a list of albums. Each album will be displayed with a cover photo and a title. And each albums can contain one or more photos that the user can slide through. The first photo in the album will be used as the cover photo.
JSON structure:
{
component: "Albums",
data: {
items: [ // list of albums
{
name: "", // string - name of the album, it will be displayed on the cover photo
photos: [ // list of photos URLs - the first photo will be used as a cover photo for the album
"url 1",
"url 2",
...
]
}
]
}
}
2. Feed
Feed content block can be used to display a list of posts. There are different kind of posts:
{
component: "Feed",
data: {
items: [
{
type: "photo",
publishedAt: "2017-06-06T13:21:29+02:00",
data: {
message: "New snickers now available in store",
photoUrl: "https://PHOTO-URL",
url: "http://LINK-TO-WEBSITE"
}
},
{
type: "video",
data: {
url: "http://LINK-TO-VIDEO" // full URL to YouTube/Vimeo/Facebook video
}
},
{
type: "wordpress_post",
data: {
title: "New blog post",
excerpt: "short summary of the post",
url: "http://FULL-URL-TO-WORDPRESS-POST"
}
}
]
}
}
3. HtmlBlock
HtmlBlock can contain any valid html/Ionic tags. This is the lowest-level block, you can build anything you want using it.
{
component: "HtmlBlock",
data: {
componentTemplate: "<div>Hello, world!</div>"
}
}