Common Components in templates

This article is a translation of article in russian.

This article describe Components which are always available in any template.

Properties marked as red are required properties.

<Asset/>

Link a predefined library to result page.

Properties:

• name (string): name of predefined library:
  • animate-css : animate.css v3
  • bootstrap4 : Bootstrap v4
  • font-awesome4 : Font Awesome 4.7
  • jquery : jQuery v3
  • popper : popper.js v1

<Asset name="bootstrap4"/>

Notice about possible dependencied between libraries. Linking Bootstrap v4 in the example above will link jQuery and popper.js too.

<CSS/>

Link theme CSS file.

Properties:

• href (string): either filename under css/ folder, or external URL beginning with https:// or // ;
• bundle (string): optional group name to use in dependencies;
• depends (string): name of another groups which this group depends of. Names separated by comma and/or space.

<CSS href="style.css" depends="fonts"/>
<CSS href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" bundle="fonts"/>

Theme file style.css in the example above depends of group fonts, which was declared with external CSS file. In the result page an external CSS file will be linked first and theme file style.css after it.

<JS/>

Link a JS file.

Properties:

• href (string): either file name under js/ folder, or external URL beginning with https:// or // ;
• bundle (string): optional group name to use in dependencies;
• depends (строка): name of another groups which this group depends of. Names separated by comma and/or space.

<JS href="script.js"/>

Dependency declaration for JS files are the same as for CSS files.

<If>...</If>

Conditional block rendering.

Properties:

• true (boolean): block content will be rendered if value of the property casts to true ;
• false (boolean): block content will be rendered if value of the property casts to false .

<If true={show_image}>
    <img src={image_url} alt={image_alt}/>
</If>

<If false={show_image || show_text}>
    {# демо баннер по умолчанию #}
</If>

Both properties true and false can be used together. In this case conditions are joining with AND logic.

<IfLanguage>...</IfLanguage>

Conditional block rendering depending of current language. (see also <I18N/> below)

Properties:

• is (string): languages codes separated with comma and/or spaces. Code can be either 2 letters (for example: ru, en, etc.), or 5 characters (for example: ru-RU, en-US, etc.). Block content will be rendered if current langauge matches to any of specified;
• not (boolean): inverts the condition. Block content will be rendered if current langauge DOES NOT match to any of specified.

<IfLanguage is="ru, ua">
    <p>Здравствуйте</p>
</IfLanguage>
<IfLanguage not is="ru, ua">
    <p>Hello</p>
</IfLanguage>

<IfModule>...</IfModule>

Conditional block rendering depending of enabled module.

Properties:

• module (string): module name to check. Block content will be rendered if the module with such name is enabled. Value is a module name:
  • chat;
  • forum;
  • wiki.
• disabled (boolean): inverts condition: Block content will be rendered if the module is disabled.

<IfModule module="forum" disabled>
    <p>Forum is disabled.</p>
</IfModule>

<I18N/>

Select a text by current language.

Properties:

• language-code (string): text to render if current language code matches with the one specified as the ptoperty name;
• default (string): text to render if current language did not match with noone of specified.

Language code in properties names can be either 2 letters (for example: ru, en, etc.), or 5 characters (for example: ru-RU, en-US, etc.). Longer code has priority over shorter code.

<I18N
    ru-RU="Здравствуйте"
    en-US="Hello"
    en="Good morning"
    default="..."
/>

For language ru-RU the result is "Здравствуйте". For language en-US the result is "Hello". For other english languages (en) the result is "Good morning". For all other languages the result is "...".

<UH-AdminLink/>

Link to Control Panel in case of enought privileges. A wrapper element can be rendered if necesary. Nothign will be rendered if there is not privileges.

Properties:

• linkClass (string): value of attribute class="" for generated link <a>;
• wrapTag (string): wrap link into element with such name;
• wrapClass (string): value of attribute class="" for wrapper element in wrapTag.

<UH-AdminLink
    wrapTag="div"
    wrapClass="sblock"
    linkClass="blue-button"
/>

<UH-Banner/>

Render a banner configured in Control Panel. Nothing will be rendered (including wrapper element) when corresponding banner did not set.

Properties:

• place (string): banner position name:
  • top: top of side column.
  • bottom: bottom of side column.
• wrapTag (string): wrap a link into element with specified name. A div element is used by default. A false expression can be passed to disable a wrapper (see example);
• wrapClass (string): value of attribute class="" for wrapper element in wrapTag.

{# top banner will be wrapped in <div class="poster-back">...</div> #}
<UH-Banner place="top" wrapClass="poster-back"/>

{# bottom banner will not be wrapped to anything #}
<UH-Banner place="bottom" wrapTag={false}/>

<UH-CopyrightText/>

A copyright text for userhorn.com platform. The text must be rendered on all pages. It is recommended to render the text in the page footer.

In case of absense (or another kind of hidding) the result text, which should be rendered by the component, we reserve a right to take an actions (for example: to limit some functionality, render a text in any another place or other actions).

<UH-CopyrightText/>

<UH-Languages-Dropdown/>

Button with dropdown menu to switch language variant.

Properties:

• showIfUseless (boolean): render in case of the only variant (t.i. the is no choice in fact). Default is false;
• wrapTag (string): wrap everithing into element with such name;
• wrapClass (string): value of attribute class="" for wrapper element in wrapTag;
• dropdownTogglerId (string): value of attribute id="" for the button, toggling dropdown menu. Default is languages-dropdown-button;
• togglerButtonType (string): extra class names for attribute class="" of the button, toggling dropdown menu. Default is btn-secondary;
• dropdownClass (string): extra class names for attribute class="" of dropdown menu.

<UH-Languages-Dropdown
    wrapTag="div"
    wrapClass="header-sub-item language-menu"
    togglerButtonType="btn--header-transparent"
    dropdownClass="dropdown-menu-right"
/>

<UH-Languages-Menu>...</UH-Languages-Menu>

Custom menu to select a language variant.

Properties:

• wrapTag (string): wrap the list into element with such name;
• wrapClass (string): value of attribute class="" for wrapper element in wrapTag;
• glue (string): text to render between list items.

Component's body will be rendered for each list item (t.i. for each language variant). There are following extra parameters available in components body, filled from a language variant:

• active (boolean): wether this langauge variant is the current one;
• code (string): code name for URL, given at time of creation;
• label (string): a title of language variant;
• language (string): language code: 5 characters (for example: ru-RU, en-US, etc.);
• url (string): URL;
• uuid (string): unique identifier of language variant.

<UH-Languages-Menu
    wrapTag="nav"
    wrapClass="subprojects-menu"
    glue=" "
>
    <a
        href={url}
        class={ "nav-link ${ active && "active" }" }
        data-uuid={uuid}
    >
        <code>{code}</code> {label} (<code>{language}</code>)
    </a>
</UH-Languages-Menu>

<UH-Logo/>

Logo configured in Appearance settings in Control Panel.

<UH-Logo/>

<UH-PoweredBy/>

Small banner "Powered by userhorn.com" with link to userhorn.com.

Properties:

• imageClass (string): value of attribute class="" for an image;
• linkClass (string): value of attribute class="" for a link.

<UH-PoweredBy imageClass="img-fluid" linkClass="d-block"/>

<UH-SearchBar/>

Search bar block.

<UH-SearchBar/>