Умови та умовні вирази в HTML-компонентах

Цей документ описує використання в компонентах умов та умовних виразів в залежності від переданих параметрів.

Використання умовного виразу:

<button type="button" {{isActive != "true" ? "disabled" : ''}}>

   <Content/>

</button>

<header class="{{isActive ? 'active-class' : ''}}">

   <Content/>

</header>

// src/html/components/Button/Button.html

<if condition="elementType == 'button'">

   <button type="button">

      <Content/>

   </button>

</if>

<elseif condition="elementType == 'link'">

   <a href="{{url}}" target="_blank">

      <Content/>

   </a>

</elseif>

<else condition="elementType == 'link'">

   Не обовязковий блок, але можна використовувати

</else>

// src/html/components/Hero/Hero.html

<section class="hero">

   <if condition="titleText">

      <{{tagName}} class="hero__title"{{titleText}}</{{tagName}}>

   </if>

   <Content/>

</section>