Будівельні блоки¶

Будівельні блоки, також відомі як фрагменти, - це те, як користувачі проектують і компонують сторінки. Це важливі XML-елементи вашого дизайну.

Будівельні блоки поділяються на чотири категорії:

Структурні блоки: для надання базової структури вебсайту
Блоки функцій: для опису особливостей продукту чи послуги
Блоки динамічного контенту: блоки, що анімовані або взаємодіють із серверною частиною
Блоки внутрішнього вмісту: блоки, що використовуються всередині інших будівельних блоків

В кінці цього розділу ви зможете створювати власні фрагменти та додавати їх до спеціальної категорії.

Структура файлу¶

Структура файлу макета наступна.

views
├── snippets
│   └── options.xml
│   └── s_snippet_name.xml

Структура файлів стилів наступна.

static
├── src
│   └── snippets
│       └── s_snippet_name
│           └── 000.js
│           └── 000.scss
│           └── 000.xml
│           └── options.js

Перегляньте також

XML-шаблони різних фрагментів.

Демо-сторінка

Для доступу до цієї сторінки необхідно встановити демо-дані:

https://your-database.com/website/demo/snippets

Макет¶

Фрагменти редагуються користувачем за допомогою Конструктора сайтів. Деякі класи Bootstrap є важливими, оскільки вони запускають деякі опції Конструктора веб-сайтів.

Wrapper¶

Стандартним основним контейнером будь-якого фрагмента є section. Будь-який елемент секції можна редагувати як блок контенту, який можна переміщувати або дублювати.

<section class="s_snippet_name" data-name="..." data-snippet="...">
    <!-- Content -->
</section>

Для внутрішніх фрагментів контенту можна використовувати будь-який інший тег HTML.

<div class="s_snippet_name" data-name="..." data-snippet="...">
    <!-- Content -->
</div>

Атрибут	Опис
class	Унікальна назва класу для цього фрагмента коду
data-name	Відображається на правій панелі як назва фрагмента. Якщо його не знайдено, буде використано значення Блок.
data-snippet	Використовується системою для ідентифікації фрагмента

Система автоматично додає атрибути data-name та data-snippet під час перетягування на основі назви шаблону.

Попередження

Ці атрибути слід додавати спеціально, коли фрагмент коду оголошується на сторінці теми.

Попередження

Уникайте додавання тегу section всередині іншого тегу section: це подвоїть використання опцій Конструктора веб-сайтів. Натомість можна використовувати внутрішні фрагменти контенту.

Порада

Щоб написати вміст статичної сторінки за допомогою стандартних фрагментів, існує два можливих підходи:

Попередньо створіть власні статичні сторінки за допомогою Конструктора веб-сайтів: Перетягніть фрагменти коду, а потім
скопіюйте/вставте код у свій файл та очистіть його.

АБО

Кодуйте все безпосередньо: Але будьте обережні з сумісністю з конструктором веб-сайтів. Він
вимагає певних класів, імен, ідентифікаторів, даних тощо для правильної роботи. Хорошою практикою є пошук коду фрагментів, створених у стандартному коді, у вихідних файлах Odoo. Зверніть увагу, що Конструктор сайтів іноді додає класи до фрагментів після того, як вони потрапляють на сторінку.

Елементи¶

Існує список «features», які ми можемо вмикати/вимикати за допомогою певних CSS-класів.

Розмір¶

Будь-які великі стовпці Bootstrap, що безпосередньо походять від елемента .row (з дотриманням структури Bootstrap), будуть ініційовані Конструктором веб-сайту, щоб зробити їх змінними.

.row > .col-lg-*

Додайте відступи для стовпців та <section>.

class="pt80 pb80"

Примітка

pb* і pt* - це класи Odoo, що використовуються для керування обробниками. Їхні значення збільшуються на кратні 8, до максимум 256 (0, 8, 16, 24, 32, 40, 48, …).

Увімкніть селектор стовпців.

<div class="container s_allow_columns">

Вимкніть опцію Сума стовпців.

<div class="row s_nb_column_fixed">

Вимкніть опцію розміру для всіх дочірніх стовпців.

<div class="row s_col_no_resize">

Вимкніть опцію розміру для одного конкретного стовпця.

<div class="col-lg-* s_col_no_resize">

Кольори¶

Додайте тло на основі палітри кольорів для стовпців і <section>.

class="o_cc o_cc*"

Вимкніть опцію кольору фону для всіх стовпців.

<div class="row s_col_no_bgcolor">

Вимкнути опцію кольору фону для одного конкретного стовпця.

<div class="col-lg-* s_col_no_bgcolor">

Додайте чорний кольоровий фільтр з непрозорістю 50%.

<section>
    <div class="o_we_bg_filter bg-black-50"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Додайте фільтр білого кольору з непрозорістю 85%.

<section>
    <div class="o_we_bg_filter bg-white-85"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Додайте власний колірний фільтр.

<section>
    <div class="o_we_bg_filter" style="background-color: rgba(39, 110, 114, 0.54) !important;"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Додайте власний градієнтний фільтр.

<section>
    <div class="o_we_bg_filter" style="background-image: linear-gradient(135deg, rgba(255, 204, 51, 0.5) 0%, rgba(226, 51, 255, 0.5) 100%) !important;"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Особливості¶

Зони, що не підлягають редагуванню¶

Зробіть елемент недоступним для редагування.

<div class="o_not_editable">

Зробіть елемент незнімним.

<div class="oe_unremovable">

Фони¶

Додайте фонове зображення і вирівняйте його по центру.

<div class="oe_img_bg o_bg_img_center" style="background-image: url('...')">

Додайте ефект паралаксу.

<section class="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" data-scroll-background-ratio="1">
    <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('...'); background-position: 50% 75%;"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Примітка

Для розділу можна встановити відео-фон. Зверніться до розділу «Медіа» цієї документації.

Підсвічування тексту¶

Підсвічування тексту - це SVG-файли, які можна накладати на певні слова або фрази, щоб підкреслити їх. Текстові виділення можна налаштовувати за кольором і товщиною.

<h2>
   Title with
   <span class="o_text_highlight o_text_highlight_fill" style="--text-highlight-width: 10px !important; --text-highlight-color: #FFFF00;">
      <span class="o_text_highlight_item">
         highlighted text
         <svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none">
            <!-- SVG path -->
         </svg>
      </span>
   </span>
</h2>

Користувацька властивість CSS	Опис
`--text-highlight-width`	Товщина меж SVG
`--text-highlight-color`	Колір SVG-об’єкта

Макет сітки¶

Макет сітки - це потужна і гнучка система верстки в CSS, яка дозволяє користувачам легко створювати складні макети будівельних блоків.

Використання¶

Увімкніть макет сітки, додавши клас CSS o_grid_mode на row. Кількість рядків у вашій сітці визначається атрибутом data-row-count. Сітка завжди містить 12 стовпців. Відстань між рядками та стовпчиками задається в атрибуті style, який визначає проміжки (або жолоби) між рядками та стовпчиками.

<div class="row o_grid_mode" data-row-count="13" style="gap: 20px 10px">
   <!-- Content -->
</div>

Елементи в сітці¶

Додайте елементи до сітки за допомогою класу o_grid_item. Якщо елемент сітки містить зображення, використовуйте клас o_grid_item_image.

<div class="row o_grid_mode" data-row-count="13">
   <div class="o_grid_item g-height-* g-col-lg-*" style="grid-area: 2 / 1 / 7 / 8; z-index: 3;">
      <!-- Content -->
   </div>
   <div class="o_grid_item o_grid_item_image g-height-* g-col-lg-*" style="grid-area: 1 / 6 / 9 / 13; z-index: 2;">
      <img src="..." alt="..." >
   </div>
</div>

Розміри та положення елемента сітки визначаються площею сітки, яку можна явно задати в атрибуті style разом із z-індексом.

Класи g-height-* і g-col-lg-* створюються Конструктором сайтів для редагування.

Відступи елементів сітки¶

<div class="row o_grid_mode" data-row-count="13" style="gap: 20px 10px;">
   <div class="o_grid_item g-height-* g-col-lg-*" style="--grid-item-padding-y: 20px; --grid-item-padding-x: 15px; grid-area: 2 / 1 / 7 / 8; z-index: 3;">
      <!-- Content -->
   </div>
</div>

Користувацька властивість CSS	Опис
`--grid-item-padding-y`	Вертикальні відступи (вісь Y)
`--grid-item-padding-x`	Горизонтальні відступи (вісь X)

Система сумісності¶

Коли фрагмент має атрибут data-vcss, data-vjs та/або data-vxml, це означає, що він є оновленим: версія, а не оригінальна.

<section class="s_snippet_name" data-vcss="001" data-vxml="001" data-js="001">
    <!-- Content -->
</section>

Ці атрибути даних вказують системі, яку версію файлу завантажити для цього фрагмента (наприклад, 001.js, 002.scss).

Спеціальний фрагмент¶

Щоб створити власний фрагмент, спочатку створіть шаблон фрагмента. Потім додайте його до списку і зробіть доступним за допомогою Конструктора сайтів.

Шаблон¶

Декларація

/website_airproof/views/snippets/s_airproof_snippet.xml¶

<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <template id="s_airproof_snippet" name="...">
        <section class="s_airproof_snippet">
            <!-- Content -->
        </section>
    </template>

</odoo>

Попередження

Атрибути data-name і data-snippet повинні бути вказані, коли фрагмент оголошується на сторінці теми. В іншому випадку фрагмент не буде розпізнаний Конструктором сайту, і можуть виникнути проблеми при оновленні бази даних. Крім того, пам’ятайте, що атрибут name відображається як ім’я вашого кастомного фрагмента в розділі Блоки на панелі параметрів.

Порада

Використовуйте нативні класи Bootstrap якомога більше.
Додайте префікс до всіх ваших кастомних класів.
Використовуйте малі літери для позначення класів, наприклад, .x_nav, .x_nav_item.
Уникайте використання атрибуту ID в межах вашого section, оскільки на сторінці може з’явитися кілька екземплярів фрагмента (атрибут ID має бути унікальним на сторінці).

Додайте свій кастомний фрагмент до списку стандартних фрагментів, щоб користувач міг перетягнути його на сторінку безпосередньо з панелі редагування.

/website_airproof/views/snippets/options.xml¶

<template id="snippets" inherit_id="website.snippets" name="Airproof - Custom Snippets">
    <xpath expr="//*[@id='default_snippets']" position="before">
        <t id="x_theme_snippets">
            <div id="x_theme_snippets_category" class="o_panel">
                <div class="o_panel_header">Theme</div>
                <div class="o_panel_body">
                    <t t-snippet="website_airproof.s_airproof_snippet" t-thumbnail="/website_airproof/static/src/img/wbuilder/s_airproof_snippet.svg">
                        <keywords>Snippet</keywords>
                    </t>
                </div>
            </div>
        </t>
    </xpath>
</template>

Атрибут	Опис
t-snippet	Шаблон для використання
t-thumbnail	Шлях до мініатюри фрагмента
<keywords>	Ключові слова, введені користувачем у поле пошуку на панелі Фрагменти

Параметри¶

Параметри дозволяють користувачам редагувати зовнішній вигляд/поведінку фрагмента за допомогою Конструктора веб-сайтів. Ви можете легко створювати параметри фрагментів і автоматично додавати їх до Конструктора веб-сайтів.

Перегляньте також

Стандартні параметри фрагмента.

Шаблон¶

Існує безліч команд для налаштування параметрів кастомного сніппету. Ці параметри можна створити у файлі /website_airproof/views/snippets/s_airproof_snippet.xml.

/website_airproof/views/snippets/s_airproof_snippet.xml¶

<template id="s_airproof_snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="." position="inside">
      <!-- Options -->
   </xpath>
</template>

Потім вставте різні доступні параметри:

/website_airproof/views/snippets/s_airproof_snippet.xml¶

<template id="s_airproof_snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="." position="inside">
      <div data-selector=".s_airproof_snippet">
         <we-select string="Layout">
            <we-button data-select-class="">Default</we-button>
            <we-button data-select-class="s_airproof_snippet_portrait">Portrait</we-button>
            <we-button data-select-class="s_airproof_snippet_square">Square</we-button>
            <we-button data-select-class="s_airproof_snippet_landscape">Landscape</we-button>
         </we-select>
         <we-title>Space</we-title>
         <we-button-group string="Before">
            <we-button data-select-class="mt-0">1</we-button>
            <we-button data-select-class="mt-3">2</we-button>
            <we-button data-select-class="mt-5">3</we-button>
         </we-button-group>
      </div>
   </xpath>
</template>

Внутрішній вміст

Створіть власний фрагмент «внутрішній контент» (який можна додати в інший блок), розширивши змінну so_content_addition_selector, яка містить усі CSS-селектори, що посилаються на наявні блоки внутрішнього контенту:

/website_airproof/views/snippets/options.xml¶

<template id="snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="//t[@t-set='so_content_addition_selector']" position="after">
      <t t-set="so_content_addition_selector"
         t-value="so_content_addition_selector + ', .s_airproof_snippet'" />
   </xpath>
</template>

Перегляньте також

Декларація стандартних фрагментів «внутрішній вміст» у репозиторії Odoo на GitHub.

Binding¶

Ці опції використовують селектори CSS (клас, XML-тег, id тощо).

data-selector¶

Опції об’єднуються у групи. Групи можуть мати властивості, які визначають, як включені до них опції взаємодіють з інтерфейсом користувача.

data-selector прив’язує всі опції, включені в групу, до певного елемента, що відповідає значенню селектора (клас CSS, ID і т.д.). Параметр з’явиться, коли буде вибрано відповідний селектор.

<div data-selector="section, h1, .custom_class, #custom_id">

Його можна використовувати в поєднанні з іншими атрибутами, такими як data-target, data-exclude або data-apply-to.

data-target¶

data-target="" дозволяє застосувати опцію до дочірнього елемента data-selector="".

<div
   data-selector=".s_airproof_snippet"
   data-target=".row">

data-exclude¶

data-exclude="" дозволяє виключити певні селектори з правила.

Опція з’являється, якщо вибрано тег <ul> (без класу .navbar-nav)¶

<div
   data-selector="ul"
   data-exclude=".navbar-nav">

data-drop-in¶

data-drop-in визначає список елементів, в які можна вставити фрагмент.

<div data-selector=".s_airproof_snippet" data-drop-in=".x_custom_location">

data-drop-near¶

data-drop-near визначає список елементів, біля яких можна розмістити фрагмент.

<div data-selector=".s_airproof_snippet_card" data-drop-near=".card">

data-js¶

data-js зв’язує кастомні методи JavaScript.

<div data-selector=".s_airproof_snippet" data-js="CustomMethodName">

Макет і поля¶

`<we-title>`¶

Додайте заголовки між параметрами, щоб класифікувати їх.

<we-title>Option subtitle 1</we-title>

Додавання субтитрів між користувацькими параметрами

`<we-row>`¶

Створіть рядок, в якому елементи відображатимуться поруч один з одним.

<we-row string="My option">
   <we-select>...</we-select>
   <we-button-group>...</we-button-group>
</we-row>

Ідеальним прикладом для цього випадку є рядок Анімація:

Згрупуйте різні поля опцій в один рядок.

`<we-button>`¶

Цей тег використовується всередині <we-select> та <we-button-group>.

<we-button-group string="Before">
   <we-button data-select-class="mt-0">1</we-button>
   <we-button data-select-class="mt-3">2</we-button>
   <we-button data-select-class="mt-5">3</we-button>
</we-button-group>

Додайте data-select-class="", щоб вказати, який клас буде додано до цільового елемента, коли вибрано цей варіант. Як і для будь-якого вузла XML, додавання інших атрибутів дозволяє покращити стиль та/або зручність для користувача.

<we-button
   class="fa fa-fw fa-angle-double-right"
   title="Move to last"
   data-position="last" />

`<we-select>`¶

Форматує парамтр у вигляді випадаючого списку. Додайте string="", щоб вказати назву поля.

<we-select string="Layout">...</we-select>

`<we-button-group>`¶

Форматує параметр у вигляді кнопок, розташованих одна біля одної.

<we-button-group string="Before">...</we-button-group>

`<we-checkbox>`¶

Форматує параметр як перемикач.

<we-checkbox
   string="Tooltip"
   data-select-class="s_airproof_snippet_tooltip" />

`<we-range>`¶

Форматує параметр як повзунок.

<we-range
   string="Images Spacing"
   data-select-class="o_spc-none|o_spc-small|o_spc-medium|o_spc-big" />

Кожен крок діапазону відокремлюється символом |. Тут кожна назва класу відповідає кроку.

`<we-input>`¶

Форматує параметр як текстове поле.

data-unit, data-save-unit та data-step є необов’язковими¶

<we-input
   string="Speed"
   data-unit="s"
   data-save-unit="ms"
   data-step="0.1" />

<we-input> має необов’язкові атрибути, особливо корисні у конкретному випадку:

Атрибут	Опис
`data-unit`	Показує очікувану одиницю виміру.
`data-save-unit`	Задати одиницю виміру, в яку буде конвертуватися і зберігатися значення, введене користувачем.
`data-step`	Задайте числове значення, на яке можна збільшити поле.

`<we-colorpicker>`¶

Форматує опцію як колір/градієнт на вибір.

<we-colorpicker
   string="Color filter"
   data-select-style="true"
   data-css-property="background-color"
   data-color-prefix="bg-"
   data-apply-to=".s_map_color_filter" />

Атрибут	Опис
`data-select-style`	Посилається на метод JavaScript `selectStyle`. Збігається зі значенням атрибута `style=""`, застосованого до об’єкта, щоб згустити правильний вибір параметра.
`data-css-property`	Визначте властивість CSS, на яку орієнтується палітра кольорів.
`data-color-prefix`	Визначте префікс, що застосовується до класу CSS, який повертається.
`data-apply-to`	Задайте елемент, до якого буде застосовано колір.

Методи¶

Окрім опцій прив’язки, що дозволяють вибрати, націлити або виключити елемент. Поля опцій мають кілька корисних атрибутів даних, що посилаються на стандартні методи JavaScript.

Наприклад, data-select-class посилається на метод JavaScript з назвою selectClass.

Вбудовані методи¶

Вибір¶

Існує декілька вбудованих методів. Їх можна викликати за допомогою відповідного атрибута даних безпосередньо в XML-шаблоні.

Атрибути даних	Опис
`data-select-class`	Дозволяє вибрати один і тільки один клас з набору класів опцій і встановити його на відповідному фрагменті.
`data-select-data-attribute` + `data-attribute-name`	Дозволяє вибрати значення і встановити його у відповідному фрагменті як атрибут. Назва атрибуту задається атрибутом `data-attribute-name`.
`data-select-property` + `data-property-name`	Дозволяє вибрати значення і встановити його у відповідному фрагменті як властивість. Назва атрибуту задається атрибутом `data-property-name`.
`data-select-style` + `data-css-property`	Дозволяє вибрати значення і встановити його у відповідному фрагменті як стиль CSS. Назва атрибуту задається атрибутом `data-css-property`.
`data-select-color-combination`	Увімкнути вибір палітри кольорів. Тільки для `<we-colorpicker>`.

Події¶

Існують також вбудовані методи, безпосередньо пов’язані з подіями, які прослуховує Конструктор веб-сайтів:

Назва	Опис
start	Виникає, коли видавець вибирає фрагмент уперше під час сеансу редагування або коли фрагмент перетягується на сторінку.
destroy	Відбувається після того, як видавець зберіг сторінку.
onFocus	Відбувається щоразу, коли фрагмент вибирається користувачем або коли фрагмент перетягується на сторінку.
onBlur	Відбувається, коли фрагмент втрачає фокус.
onClone	Відбувається одразу після дублювання фрагмента.
onRemove	Відбувається безпосередньо перед видаленням фрагмента.
onBuilt	Відбувається одразу після перетягування фрагмента на зону перетягування. Коли ця подія спрацьовує, вміст вже вставлено на сторінку.
cleanForSave	Відбувається до того, як видавець збереже сторінку.

Перегляньте також

Користувацькі методи¶

Щоб створити кастомні методи JavaScript, необхідно створити зв’язок між групою опцій і кастомними методами. Для цього необхідно створити клас JavaScript і викликати його в XML-шаблоні за допомогою data-js.

Додайте атрибут data-js до групи параметрів:

<template id="s_airproof_snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="." position="inside">
      <div data-selector=".s_airproof_snippet" data-js="airproofSnippet">
         // Options
      </div>
   </xpath>
</template>

Потім клас можна створити у файлі JavaScript:

/website_airproof/static/src/s_airproof_snippet/options.js¶

/** @odoo-module */

import options from 'web_editor.snippets.options';

const AirproofSnippet = options.Class.extend({
   // Built-in method example
   start: function() {
      //...
   }
   // Custom method example
   customMethodName: function() {
      //...
   }
});

options.registry.AirproofSnippet = AirproofSnippet;

export default AirproofSnippet;

Нарешті, користувацький метод може бути викликаний для вашого параметру за допомогою XML-шаблону:

<template id="s_airproof_snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="." position="inside">
      <div data-selector=".s_airproof_snippet" data-js="airproofSnippet">
         <we-checkbox data-custom-method-name="" />
      </div>
   </xpath>
</template>

Шаблони динамічного контенту¶

За замовчуванням блоки динамічного контенту мають набір шаблонів, доступних у Конструкторі веб-сайтів. Користувацькі шаблони також можна додавати до списку автоматично, використовуючи ту саму угоду про назви для атрибута ідентифікатора шаблону.

Виклик шаблону¶

Вибраний динамічний фрагмент замінить заповнювач <div class="dynamic_snippet_template"/> на потрібний шаблон на основі data-template-key і кастомного класу CSS:

<section
   data-snippet="s_blog_posts"
   data-name="Blog Posts"
   class="s_blog_post_airproof s_dynamic_snippet_blog_posts s_blog_posts_effect_marley s_dynamic pb32 o_cc o_cc2 o_dynamic_empty"
   data-template-key="website_airproof.dynamic_filter_template_blog_post_airproof"
   data-filter-by-blog-id="-1"
   data-number-of-records="3"
   data-number-of-elements="3"
>
   <div class="container o_not_editable">
      <div class="css_non_editable_mode_hidden">
            <div class="missing_option_warning alert alert-info rounded-0 fade show d-none d-print-none">
               Your Dynamic Snippet will be displayed here... This message is displayed because you did not provided both a filter and a template to use.<br/>
            </div>
      </div>
      <div class="dynamic_snippet_template"/>
   </div>
</section>

Приклади¶

/website_airproof/views/snippets/options.xml¶

<template id="dynamic_filter_template_blog_post_airproof" name="...">
   <div t-foreach="records" t-as="data" class="s_blog_posts_post">
      <t t-set="record" t-value="data['_record']"/>
      <!-- Content -->
   </div>
</template>

Атрибут	Опис
id	ID шаблону. Має починатися з `dynamic_filter_template_blog_post_`.
name	Читабельна назва шаблону

/website_airproof/views/snippets/options.xml¶

<template id="dynamic_filter_template_product_product_airproof" name="...">
   <t t-foreach="records" t-as="data" data-number-of-elements="4" data-number-of-elements-sm="1" data-number-of-elements-fetch="8">
      <t t-set="record" t-value="data['_record']"/>
      <!-- Content -->
   </t>
</template>

Атрибут	Опис
id	ID шаблону. Має починатися з `dynamic_filter_template_product_product_`.
name	Читабельна назва шаблону
data-number-of-elements	Кількість продуктів на слайді на робочому столі
data-number-of-elements-sm	Кількість продуктів на слайді на мобільному
data-number-of-elements-fetch	Загальна кількість отриманих товарів

/website_airproof/views/snippets/options.xml¶

<template id="dynamic_filter_template_event_event_airproof" name="...">
   <div t-foreach="records" t-as="data" class="s_events_event">
      <t t-set="record" t-value="data['_record']._set_tz_context()"/>
      <!-- Content -->
   </div>
</template>

Атрибут	Опис
id	ID шаблону. Має починатися з `dynamic_filter_template_event_event_`.
name	Читабельна назва шаблону

Edit on GitHub

Будівельні блоки¶

Структура файлу¶

Макет¶

Wrapper¶

Елементи¶

Розмір¶

Кольори¶

Особливості¶

Зони, що не підлягають редагуванню¶

Фони¶

Підсвічування тексту¶

Макет сітки¶

Використання¶

Елементи в сітці¶

Відступи елементів сітки¶

Система сумісності¶

Спеціальний фрагмент¶

Шаблон¶

Параметри¶

Шаблон¶

Binding¶

data-selector¶

data-target¶

data-exclude¶

data-drop-in¶

data-drop-near¶

data-js¶

Макет і поля¶

<we-title>¶

<we-row>¶

<we-button>¶

<we-select>¶

<we-button-group>¶

<we-checkbox>¶

<we-range>¶

<we-input>¶

<we-colorpicker>¶

Методи¶

Вбудовані методи¶

Вибір¶

Події¶

Користувацькі методи¶

Шаблони динамічного контенту¶

Виклик шаблону¶

Приклади¶

`<we-title>`¶

`<we-row>`¶

`<we-button>`¶

`<we-select>`¶

`<we-button-group>`¶

`<we-checkbox>`¶

`<we-range>`¶

`<we-input>`¶

`<we-colorpicker>`¶