Html components are building block for pages. Each component can have one or more files located in one folder.

For example component navbar in theme blog

Localization

Translation strings in diferent languages are saved in component property files with file name pattern:

{component name}-{laguage code}.json

For example transation strings for French language should be saved in file navbar-fr.json.
If file not exists in component folder default file mavbar.json are loaded.

Usage

If above component navbar is located in blog theme we can use it from any other template code with function:

{{ component('blog:navbar') }}

Loading component from javascript code

arikaim.page.loadContent({
    id: 'element_id',
    component: 'blog:navbar',
    params: {}
});

UI library arikaim-ui is required.

Component selector

For components located in extension use:

{extension name}::{path}

Template location

{theme name}:{path}

Global componnents location

{global components package name}~{path}

Primary (current) template

current>{path}

Example

{{ component('blog>navbar') }}

Component with path navbar in current primary theme will be loaded. If not exists in primary theme component from extension blog are used.

Component options

Json file component.json

{
    "include": {
        "js": [
            { Component(s) name }
        ]
    },
    "access": {
        "auth": "{ Authentication name }",
        "permission": "{ Permission name }"
    }
}