FrontElf

HTML-компоненти

Цей документ описує підключення компонентів, передачу параметрів, вивід контенту.

Підключення компонента:

Тег компонента є назвою html файлу компонента

src/html/components/Header/Header.html

<Header/>

Просте підключення (без передачі контента або параметрів):

<Header/>

Передавання пропсів (параметрів):

<Header title="Заголовок" isLogo="true"/>

Передавання контенту (будь що, текст, інші компоненти, html):

Переданий контент буде доступний в компоненті під тегом <Content/>

<Button type="link" isActive="true">Button</Button>

<Button type="link" isActive="true">
   <span>Button text</span>
   <i class="_icon-arrow-right"></i>
</Button>

<Header className="header">
   <NavMenu activeLink="1"/>
</Header>

Використання параметрів що передаються через пропси:

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

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

<header class="{{className}}">
   <Content/>
</header>