component​

Used for rendering specified components and supports the following two types:

• Global components: stored in the component directory and can be called across modules.
• Private components: stored in the sections or blocks directory and are restricted to use within the current module only.

If you need to use variables outside of the scope, you must pass them in using the hash parameter. There is no need to pass hash for the Sline global object.

{{#component file_path [hash...] /}}

Required Params​

• file_path string: The file path for the component. Global components: Use an absolute path, which is the filename located under the components/ directory. Private components: Use a relative path, starting with ./.

Optional Params​

• hash... any: Dynamic hash parameters, a collection of key-value pairs (formatted as key=value) that can be passed in without limitation on their number. These parameters are used to provide the necessary variable information to a component. Inside the component, these parameters can be accessed and utilized via the props object.

Examples​

Using a global component​

Call the global component components/title.html:

{{#component "title" /}}

Using a private component​

Call title.html within the same directory from sections/header/header.html:

{{#component "./title" /}}

Passing parameters to a component​

Pass the variable title from sections/header/header.html to sections/header/title.html within the same directory:

<!--! sections/header/header.html -->
{{#component "./title" title=section.settings.title show=true /}}
<!--! sections/header/title.html -->
{{#if show}}
    {{ title }}
{{/if}}