Appearance
Template components
We have over 30 template components today and this can be used for you to make your headless page more interactive. When a user adds components to starpage, category or a page you can translate them in to your design as you like.
The easiest way for you to know all of the components is to add all components to a single page and start translate them to your design and logic. The component property is the identifier of the component
A template component comes with comes with config and content property
Config
The config object has different propertis of settings the user can interact with in nyehandel.
Content
The content object contains all the content that the user adds
Slideshow
This is an example of how a template component could look like
{
"children": [
// Template components mostly used by columns component
],
"component": "slideshow",
"config": [
{
"id": "fullwidth",
"title": "Fullbredd",
"value": true,
"type": "boolean"
},
{
"id": "slideshow-height",
"title": "Bildhöjd",
"value": "slideshow-medium",
"type": "options",
"alternatives": [
{
"title": "Liten",
"value": "slideshow-small"
},
{
"title": "Medium",
"value": "slideshow-medium"
},
{
"title": "Stor",
"value": "slideshow-large"
}
]
},
{
"id": "background-position",
"title": "Bildplacering",
"value": "center center",
"type": "options",
"alternatives": [
{
"title": "Överst till vänster",
"value": "top left"
},
{
"title": "Överst centrerat",
"value": "top center"
},
{
"title": "Överst till höger",
"value": "top right"
},
{
"title": "Mitten centrerat",
"value": "center center"
},
{
"title": "Nere till vänster",
"value": "bottom left"
},
{
"title": "Nere centrerat",
"value": "bottom center"
},
{
"title": "Nere till höger",
"value": "bottom right"
}
]
},
{
"id": "text_size",
"title": "Textstorlek",
"value": "slideshow-text-size-medium",
"type": "options",
"alternatives": [
{
"title": "Liten",
"value": "slideshow-text-size-small"
},
{
"title": "Medium",
"value": "slideshow-text-size-medium"
},
{
"title": "Stor",
"value": "slideshow-text-size-large"
}
]
},
{
"id": "text_align",
"title": "Textplacering",
"value": "slideshow-text-align-center-center",
"type": "options",
"alternatives": [
{
"title": "Överst till vänster",
"value": "slideshow-text-align-top-left"
},
{
"title": "Överst centrerat",
"value": "slideshow-text-align-top-center"
},
{
"title": "Överst till höger",
"value": "slideshow-text-align-top-right"
},
{
"title": "Mitten centrerat",
"value": "slideshow-text-align-center-center"
},
{
"title": "Nere till vänster",
"value": "slideshow-text-align-bottom-left"
},
{
"title": "Nere centrerat",
"value": "slideshow-text-align-bottom-center"
},
{
"title": "Nere till höger",
"value": "slideshow-text-align-bottom-right"
}
]
},
{
"id": "auto_rotate",
"title": "Auto-rotera bilder",
"value": false,
"type": "boolean"
},
{
"id": "auto_rotate_timer",
"title": "Autorotera varje (sekunder)",
"value": 5,
"type": "number"
},
{
"id": "show_controls",
"title": "Visa kontroller (nästa/föregående)",
"value": true,
"type": "boolean"
},
{
"id": "top_bottom_margin",
"title": "Över/under marginal",
"value": 0,
"type": "number"
},
{
"id": "style-properties",
"title": "CSS",
"type": "css_properties",
"properties": [
{
"id": "class",
"title": "Element Class",
"value": "",
"type": "string"
},
{
"id": "id",
"title": "Element ID",
"value": "",
"type": "string"
},
{
"id": "style",
"title": "Css style",
"value": "",
"type": "code-editor"
}
]
}
],
"content": {
"slides": [
{
"image_url": "/placeholders/1200x775.png",
"image_title": "Bild slide",
"image_subtitle": "Komplettera din bild med en underrubrik",
"action_text": "Visa",
"action_url": "#",
"text_color": "#000000"
},
{
"image_url": "/placeholders/1200x775.png",
"image_title": "Bild slide",
"image_subtitle": "Komplettera din slide med text",
"action_text": "Visa",
"action_url": "#",
"text_color": "#000000"
}
]
},
"sort_order": 0
},