UI фреймворк

Репозиторій

Мініфреймворк UI створено для зручної, адаптивної верстки вебінтерфейсів. Ця сторінка містить опис, документацію, приклади застосування компонентів та CSS-класів UI.

Залежності

Font Awesome Free

Залежності імпортовано в файл UI.css.

Початок роботи з UI

Для підключення NPM (recommended):

Bash: npm install github:kroloburet/UI

Для підключення CDN (minified):

UI.min.css cdn: https://cdn.jsdelivr.net/gh/kroloburet/UI/UI.min.css
UI.min.js cdn: https://cdn.jsdelivr.net/gh/kroloburet/UI/UI.min.js

Для завантаження з GitHub:

zip:
git clone: https://github.com/kroloburet/UI.git

Підключіть файл UI.css та UI.js до сторінки.

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, World!</title>

    <!--- From NPM Modules (recommended) --->
    <link href="node_modules/kroloburet_ui/UI.css" rel="stylesheet">
    <script src="node_modules/kroloburet_ui/UI.js" defer></script>

    <!--- OR From CDN (minified) --->
    <link href="https://cdn.jsdelivr.net/gh/kroloburet/UI/UI.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/kroloburet/UI/UI.min.js" defer></script>

    <!--- Your Scripts --->
    <link href="/style/main.css" rel="stylesheet">
    <script src="/scripts/main.js" defer></script>
</head>
<body>
    Hello, World!
</body>
</html>

UI.css містить CSS-класи з префіксом UI_ для стилістичного оформлення та спрощення адаптивної верстки інтерфейсів та сторінок (відкрийте цю сторінку в мобільному/планшеті чи змініть ширину вікна браузера, щоб побачити як UI адаптує контент). Зверніть увагу, що на початку файлу стилів UI завдані змінні з префіксом --UI_, котрі задають в дизайні кольори, шрифт та інші властивості. Ви можете перевизначити їхнє значення у своєму файлі стилів, щоб, наприклад, легко змінити тему сторінки. Отже, перевизначайте та користуйтеся у своїх файлах цими змінними, щоб керувати виглядом UI.

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

Типографіка

Базовий шрифт документа, оформлення заголовків, параграфів, списків, посилань та інших елементів верстки контенту. Для всього цього в UI не передбачено особливих CSS-класів. Правила просто застосовуються до тегів в файлі UI.css за допомогою змінних.

Вигляд

Заголовок h1 в 2 рядки
другий рядок

Параграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!

Параграф 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!

Заголовок h2 в 2 рядки
другий рядок

Параграф 1 перед переліком: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, pariatur.
Lorem ipsum dolor sit amet.

Параграф 2 після переліком: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!

Заголовок h3 в 2 рядки
другий рядок

Параграф 1 до розподільчої лінії: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!

Параграф 2 після розподільчої лінії: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!

Заголовок h4 в 2 рядки
другий рядок

Заголовок h5 в 2 рядки
другий рядок

Параграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident laudantium libero reiciendis!

em example, i example, ~~s example~~, ~~del example~~ , abbr example, code example, kbd example, samp example, mark example , _sub example, ^sup example, b example, strong example, small example,

pre example

Блок цитата: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aperiam facere neque, sequi voluptatum. Ad autem, culpa cum explicabo, itaque laudantium nesciunt nulla, perferendis quaerat.

Код

<!--- h1 with p --->
<h1>Заголовок h1 в 2 рядки<br>другий рядок</h1>
<p>Параграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat
laboriosam <a>laudantium libero</a> magnam omnis pariatur tempora veritatis voluptas? Cumque
distinctio earum obcaecati provident reiciendis!</p>
<p>Параграф 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat
laboriosam laudantium libero magnam omnis pariatur <a>tempora</a> veritatis voluptas? Cumque
distinctio earum obcaecati provident reiciendis!</p>

<!--- h2 with p & ul --->
<h2>Заголовок h2 в 2 рядки<br>другий рядок</h2>
<p>Параграф 1 перед переліком: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores
laboriosam <a>laudantium libero</a> magnam omnis pariatur tempora veritatis voluptas? Cumque
distinctio earum obcaecati provident reiciendis!</p>
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, pariatur.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>
<p>Параграф 2 після переліку: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores
laboriosam laudantium libero magnam omnis pariatur <a>tempora</a> veritatis voluptas? Cumque
distinctio earum obcaecati provident reiciendis!</p>

<!--- h3 with p & hr --->
<h3>Заголовок h3 в 2 рядки<br>другий рядок</h3>
<p>Параграф 1 до розподільчої лінії: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque,
dolore laboriosam <a>laudantium libero</a> magnam omnis pariatur tempora veritatis voluptas?
Cumque distinctio earum obcaecati provident reiciendis!</p>
<hr>
<p>Параграф 2 після розподільчої лінії: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque,
laboriosam laudantium libero magnam omnis pariatur <a>tempora</a> veritatis voluptas? Cumque
distinctio earum obcaecati provident reiciendis!</p>

<!--- h4 with p --->
<h4>Заголовок h4 в 2 рядки<br>другий рядок</h4>
<p>Параграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat
laboriosam <a>laudantium libero</a> magnam omnis pariatur tempora veritatis voluptas? Cumque
distinctio earum obcaecati provident reiciendis!</p>

<!--- h5 with p --->
<h5>Заголовок h5 в 2 рядки<br>другий рядок</h5>
<p>Параграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat
laboriosam magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident
<a>laudantium libero</a> reiciendis!</p>

<!--- text format example --->
<p><em>em example</em>, <i>i example</i>, <s>s example</s>, <del>del example</del>,
<abbr title="abbr">abbr example</abbr>, <code>code example</code>, <kbd>kbd example</kbd>,
<samp>samp example</samp>, <mark>mark example</mark>, <sub>sub</sub> example, <sup>sup</sup> example,
<b>b example</b>, <strong>strong example</strong>, <small>small example</small>, <pre>pre example</pre></p>

<!--- blockquote examole --->
<blockquote>
Блок цитата: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aperiam facere neque,
sequi voluptatum. Ad autem, culpa cum explicabo, itaque laudantium nesciunt nulla, perferendis quaerat.
</blockquote>

Сітка

Сітка UI розрахована на 12 стовпців. Елемент з класом UI_grid матиме display: grid, тож може містити як один, так і декілька рядків зі стовпцями з класом UI_col. На малих пристроях усі стовпці трансформуються в рядки.

Вигляд

Код

<!--- grid example --->
<div class="UI_grid">
    <div class="UI_col-1">1</div>
    <div class="UI_col-11">11</div>
    <div class="UI_col-2">2</div>
    <div class="UI_col-10">10</div>
    <div class="UI_col-3">3</div>
    <div class="UI_col-9">9</div>
    <div class="UI_col-4">4</div>
    <div class="UI_col-8">8</div>
    <div class="UI_col-5">5</div>
    <div class="UI_col-7">7</div>
    <div class="UI_col-6">6</div>
    <div class="UI_col-6">6</div>
    <div class="UI_col-12">12</div>
</div>

Допоміжні CSS-класи

UI_noprint — Якщо не хочете, щоб елемент був надрукований.

UI_external та UI_blank — Щоб користувач бачив, що посилання веде на сторонній ресурс або буде відкрите в новому вікні чи вкладці. Приклад:
class="UI_external", class="UI_blank" або target="_blank"

UI_nowrap — Щоб текст всередині елемента не переносився на новий рядок. Але не забувайте, на малих пристроях це може спричинити поперечний скролл.

UI_arrow-left, UI_arrow-right, UI_angle-left, UI_angle-right, UI_angle-down, UI_angle-up — Псевдоелементом (::after або ::before) в елементах з цим класом буде стрілка або куточок з відповідним напрямом. Приклад:

UI_arrow-left, UI_arrow-right, UI_angle-left, UI_angle-right, UI_angle-down, UI_angle-up

UI_size-xl, UI_size-l, UI_size-s та UI_size-xs — Використовуйте для того, щоб змінювати розміри будь-яких елементів з їхнім вмістом. Приклад:

UI_primary, UI_accent та UI_contour — Декілька стилів, що можна застосувати до: кнопок, табів, таблиць, компонентів форми, меню. Деякі компоненти та елементи UI, наприклад елементи форми, по замовчуванню мають стиль primary. Приклад:

UI_disabled — Заблокує елемент та його нащадків. Приклад:

Цей блок заблоковано. Користувач не може взаємодіяти з посиланнями, кнопками та будь-якими інтерактивними заблокованими елементами. Але може, наприклад, виділити та скопіювати текст.
Заблоковане посилання

UI_process — Заблокує елемент та додасть ::after псевдоелемент зі спінером. Це знадобиться, наприклад, на кнопках відправлення форми, щоб заблокувати елемент та водночас показати користувачу, що треба зачекати. Приклад:

чи ☕ По каві

UI_ok — Додасть ::after псевдоелемент з іконкою успіху. Це знадобиться, наприклад, в динамічних сценаріях після очікування, сповістити про успіх в кнопці чи посиланні.

Так. ☕ По каві

UI_err — Додасть ::after псевдоелемент з іконкою невдачі. Це знадобиться, наприклад, в динамічних сценаріях після очікування, сповістити про невдачу в кнопці чи посиланні.

Ні. ☕ Не сьогодні

UI_full-width — Розтягне елемент на всю ширину батьківського елемента. Приклад:

UI_align-l — Вирівняти текст та елементи по лівій стороні. Приклад:

Lorem ipsum dolor sit amet.

UI_align-r — Вирівняти текст та елементи по правій стороні. Приклад:

Lorem ipsum dolor sit amet.

UI_align-c — Вирівняти текст та елементи по центру. Приклад:

Lorem ipsum dolor sit amet.

UI_scrollbar — Стилізує scrollbar. Приклад:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid hic inventore laboriosam laudantium maxime odit pariatur, porro praesentium reiciendis rem sequi sit, temporibus ut veritatis vero voluptatibus voluptatum. Atque ipsum possimus similique sint voluptatem. Accusantium animi beatae delectus excepturi harum hic laborum, magni maxime minima odio officia officiis omnis pariatur, praesentium qui rerum tempore, vitae voluptatem. Ab accusamus adipisci amet aut consectetur ducimus fugit id impedit in nisi, nulla quae rem repellat repudiandae sunt ullam ut, veritatis, voluptatum? Animi aspernatur id velit? Architecto, assumenda aut culpa delectus doloremque doloribus ducimus eligendi exercitationem explicabo fugit id illum ipsam laborum libero maiores, nostrum odio officia provident quae quas quibusdam quidem quo repellendus sit tempore tenetur unde, voluptas voluptatem voluptatibus voluptatum! A, consequatur eius enim, eos est, illum in incidunt ipsa labore laboriosam modi natus odio quos reprehenderit velit! Eligendi natus neque odit vero vitae! Ea fugit illo, necessitatibus obcaecati quis repellat.

UI_no-scrollbar — Ховає scrollbar. Приклад:

Повідомлення

Наразі в UI є 5 типів повідомлень. За замовчуванням повідомлення інлайнові, з шириною, що визначається шириною контенту всередині. Використовуйте клас UI_full-width, щоб розтягнути повідомлення на всю ширину батьківського елемента. Розмір повідомлення можна визначати класами UI_size-xl, UI_size-l, UI_size-s та UI_size-xs.

Вигляд

Header

class="UI_notice-error"

Test link

Header

class="UI_notice-warning"

Test link

Header

class="UI_notice-success"

Test link

Header

class="UI_notice-info"

Test link

Header

class="UI_notice-process"

Test link

Код

<div class="UI_notice-error">
    <h5>Header</h5>
    <p>class="UI_notice-error"</p>
    <hr>
    <a>Test link</a>
</div>

<div class="UI_notice-warning">
    <h5>Header</h5>
    <p>class="UI_notice-warning"</p>
    <hr>
    <a>Test link</a>
</div>

<div class="UI_notice-success">
    <h5>Header</h5>
    <p>class="UI_notice-success"</p>
    <hr>
    <a>Test link</a>
</div>

<div class="UI_notice-info">
    <h5>Header</h5>
    <p>class="UI_notice-info"</p>
    <hr>
    <a>Test link</a>
</div>

<div class="UI_notice-process">
    <h5>Header</h5>
    <p>class="UI_notice-process"</p>
    <hr>
    <a>Test link</a>
</div>

Таблиці

Таблиці можуть бути великими та складними, а дані в них досить об'ємними. Користуйтеся class="UI_table" для таблиць, щоб на малих екранах пристроїв структура таблиць залишалась цілісною, а продивлюватись їх можна було завдяки горизонтальній прокрутці. Зараз це найбільш вдале рішення для таблиць.

Вигляд

Планета	Діаметр	Наклон вісі	Супутники
Висновок: Ми — космічний пил..)
Меркурій	4879,4	~0,01	0
Венера	12104	177,36	2
Земля	12742	23,439281	1

Код

<table class="UI_table">
    <thead>
    <tr>
        <th>Планета</th>
        <th>Діаметр</th>
        <th>Наклон вісі</th>
        <th>Супутники</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="4">Висновок: Ми &mdash; космічний пил..)</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Меркурій</td>
        <td>4879,4</td>
        <td>~0,01</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Венера</td>
        <td>12104</td>
        <td>177,36</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Земля</td>
        <td>12742</td>
        <td>23,439281</td>
        <td>1</td>
    </tr>
    </tbody>
</table>

Форми

В UI передбачено стилізацію елементів форми. Дотримуйтесь простих правил розмітки форм UI. Для елементів форми в UI передбачені CSS-класи (див. вкладку Код). Наприклад, щоб стилізувати input type="date", просто застосуйте до нього клас UI_input. Для елементів форм, які важко стилізуються і не дуже зручні для використання, UI обгортає в компоненти форми описані в методах UI. Елементи форми в UI можуть бути звичайними (блоковими за замовчуванням) та інлайновими.

Допоміжні класи елементів форми

UI_focus-form, UI_invalid-form, UI_readonly-form та UI_disabled-form стилізують елемент форми відповідно до статусу. Можна застосувати один з цих класів до елемента форми, щоб стилізувати тільки його, або до групи елементів чи компоненту, щоб стилізувати всі вкладені елементи. Поля та елементи форми :focus, :invalid, :read-only та :disabled будуть стилізовані за відповідними правилами цих класів.

UI_primary, UI_accent та UI_contour cтилізують елемент форми відповідно до теми. Елементи форми по замовчуванню мають тему primary. Ці класи також можна застосовувати окремо до елементу, групи або компоненту.

UI_size-xl, UI_size-l, UI_size-s та UI_size-xs змінюють розмір елемента форми, всі елементи групи або компоненту.

UI_required-form застосовуйте до <label>Напис до поля</label>, а UI додасть зірочку до напису. Якщо застосувати цей клас до полів форми, ці поля будуть стилізовані як :required. І навпаки, поля :required будуть стилізовані правилами цього класу.

Звичайні елементи форми

За замовчуванням елементи поводяться як блокові (display: block) та займають всю доступну ширину.

Вигляд

Input type="text" Input type="text" readonly Input type="text" disabled Input type="text" required Input type="text" invalid Textarea Simple select Select with class "UI_Select" Simple multiple select Select multiple with class "UI_Select" Simple input type="number" Input type="number" with class "UI_InputNumber" Simple input type="datetime-local" Simple input type="file" multiple Input type="file" multiple with class "UI_InputFile" Simple input type="range" Input type="range" with class "UI_InputRange"

Checkbox Disabled checked Option one Option two

Radio Disabled checked Option one Option two

Код

<!--- input type="text" --->
Input type="text"
<input type="text" class="UI_input" placeholder="Placeholder">

<!--- input type="text" readonly --->
Input type="text" readonly
<input type="text" class="UI_input" placeholder="Placeholder" readonly>

<!--- input type="text" disabled --->
Input type="text" disabled
<input type="text" class="UI_input" placeholder="Placeholder" disabled>

<!--- input type="text" required --->
<label class="UI_required-form">Input type="text" required</label>
<input type="text" class="UI_input" placeholder="Required field" value="Required value" required>

<!--- input type="text" invalid --->
Input type="text" invalid
<input type="text" class="UI_input UI_invalid-form" placeholder="Placeholder">

<!--- textarea --->
Textarea
<textarea class="UI_textarea" placeholder="Placeholder"></textarea>

<!--- simple select --->
Simple select
<select class="UI_select">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

<!--- select with class "UI_Select" --->
Select with class "UI_Select"
<select class="UI_Select">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

<!--- simple multiple select --->
Simple multiple select
<select class="UI_select" multiple>
    <option>Option 1</option>
    <option selected>Option 2</option>
    <option>Option 3</option>
    <option selected>Option 4</option>
    <option>Option 5</option>
</select>

<!--- select multiple with class "UI_Select" --->
Select multiple with class "UI_Select"
<select class="UI_Select" multiple>
    <option>Option 1</option>
    <option selected>Option 2</option>
    <option>Option 3</option>
    <option selected>Option 4</option>
    <option>Option 5</option>
</select>

<!--- simple input type="number" --->
Simple input type="number"
<input type="number" class="UI_input" min="0" max="6">

<!--- input type="number" with class "UI_InputNumber" --->
Input type="number" with class "UI_InputNumber"
<input type="number" class="UI_InputNumber" min="0" max="6">

<!--- simple input type="datetime-local" --->
Simple input type="datetime-local"
<input type="datetime-local" class="UI_input">

<!--- simple input type="file" multiple --->
Simple input type="file" multiple
<input type="file" class="UI_input" multiple>

<!--- input type="file" multiple with class "UI_InputFile" --->
Input type="file" multiple with class "UI_InputFile"
<input type="file" class="UI_InputFile" multiple>

<!--- simple input type="range" --->
Simple input type="range"
<input type="range" class="UI_range" min="0" max="100" step="1" value="0">

<!--- input type="range" with class "UI_InputRange" --->
Input type="range" with class "UI_InputRange"
<input type="range" class="UI_InputRange" min="0" max="100" step="1" value="0">

<!--- checkbox --->
Checkbox
<label class="UI_checkbox">
    <input type="checkbox" disabled checked>
    <span class="UI_checkmark"></span> Disabled checked
</label>
<label class="UI_checkbox">
    <input type="checkbox" checked>
    <span class="UI_checkmark"></span> Option one
</label>
<label class="UI_checkbox">
    <input type="checkbox">
    <span class="UI_checkmark"></span> Option two
</label>

<!--- radio --->
Radio
<label class="UI_radio">
    <input type="radio" disabled checked>
    <span class="UI_checkmark"></span> Disabled checked
</label>
<label class="UI_radio">
    <input type="radio" checked>
    <span class="UI_checkmark"></span> Option one
</label>
<label class="UI_radio">
    <input type="radio">
    <span class="UI_checkmark"></span> Option two
</label>

Інлайнові елементи форми

Кнопки — типові інлайнові елементи. Вони такі за замовчуванням. Інлайнові елементи форми мають ширину, що дорівнює максимальній ширині контенту, який вони містять. Вони поводять себе як рядкові (display: inline) та мають відступ з правої сторони. Будь-які звичайні (блокові) елементи форми можна перетворити в інлайновий, якщо застосувати клас UI_inline-form. Компоненти форми та групи елементів форми з цим класом також стануть інлайновими.

Вигляд

Option one Option two Option one Option two

Код

<!--- Simple input type="text" with class "UI_inline-form" --->
<input type="text" class="UI_input UI_inline-form" placeholder="input type=text">

<!--- Input type="number" with class "UI_inline-form UI_InputNumber" --->
<input type="number" class="UI_InputNumber UI_inline-form" min="0" max="6">

<!--- Input type="file" multiple with class "UI_inline-form UI_InputFile" --->
<input type="file" class="UI_InputFile UI_inline-form" multiple>

<!--- Select multiple with class "UI_inline-form UI_Select" --->
<select class="UI_Select UI_inline-form" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

<!--- Select with class "UI_inline-form UI_Select" --->
<select class="UI_Select UI_inline-form">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

<!--- Input type="range" with class "UI_inline-form UI_InputRange" --->
<input type="range" class="UI_InputRange UI_inline-form" min="0" max="100" step="1" value="0">

<!--- Simple input type="range" with class "UI_inline-form" --->
<input type="range" class="UI_range UI_inline-form" min="0" max="100" step="1" value="0">

<!--- checkbox with class "UI_inline-form" --->
<label class="UI_checkbox UI_inline-form">
    <input type="checkbox" checked>
    <span class="UI_checkmark"></span> Option one
</label>
<label class="UI_checkbox UI_inline-form">
    <input type="checkbox">
    <span class="UI_checkmark"></span> Option two
</label>

<!--- radio with class "UI_inline-form" --->
<label class="UI_radio UI_inline-form">
    <input type="radio" checked>
    <span class="UI_checkmark"></span> Option one
</label>
<label class="UI_radio UI_inline-form">
    <input type="radio">
    <span class="UI_checkmark"></span> Option two
</label>

Кнопки

Майже будь-який елемент можна зробити кнопкою. Просто додайте до елементу class="UI_button". За замовчуванням всі кнопки поводяться як інлайнові, але якщо додати class="UI_full-width", кнопка розтягнеться на всю ширину батьківського елементу.

Вигляд

a UI_button

div UI_button

b UI_button span UI_button with icon

Код

<!--- buttons --->
<input type="button" class="UI_button" value="input UI_button">
<button type="button" class="UI_button">button UI_button</button>
<a class="UI_button">a UI_button</a>
<div class="UI_button">div UI_button</div>
<b class="UI_button">b UI_button</b>
<span class="UI_button">span UI_button</span>
<span class="UI_button">with icon&nbsp;<i class="fa-solid fa-trash-alt"></i></span>

<!--- disabled button --->
<input type="submit" class="UI_button" value="disabled button" disabled>

<!--- button UI_full-width --->
<button type="button" class="UI_button UI_full-width">button UI_button UI_full-width</button>

Групування елементів форми

Для групування елементів форми в HTML існує тег fieldset, можете використовувати його. Але іноді треба розмістити декілька елементів в один рядок так, щоб вони ефективно використовували всю наявну ширину та були адаптивними. Просто візьміть для цього <div class="UI_fieldset"> та помістіть в нього все необхідне. Класами UI_align-l, UI_align-r та UI_align-c вирівнюйте елементи всередині групи. До речі, UI_fieldset зручно використовувати для мініформ, якщо застосувати цей клас до тегу form. Написи для групи слід розміщувати за її межами.

Вигляд

Fieldset group

Fieldset group with UI_readonly-form

Fieldset group with UI_disabled-form

Fieldset group with UI_contour

Fieldset group with UI_inline-form

Код

<!--- Fieldset group --->
Fieldset group
<div class="UI_fieldset">
    <select class="UI_Select">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
    <input type="text" class="UI_input" placeholder="Example text">
    <button type="button" class="UI_button">Add</button>
    <button type="button" class="UI_button">Delete</button>
</div>

<!--- Fieldset group with UI_readonly-form --->
Fieldset group with UI_readonly-form
<div class="UI_fieldset UI_readonly-form">
    <select class="UI_Select">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
    <input type="text" class="UI_input" placeholder="Example text">
    <button type="button" class="UI_button">Add</button>
    <button type="button" class="UI_button">Delete</button>
</div>

<!--- Fieldset group with UI_disabled-form --->
Fieldset group with UI_disabled-form
<div class="UI_fieldset UI_disabled-form">
    <select class="UI_Select">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
    <input type="text" class="UI_input" placeholder="Example text">
    <button type="button" class="UI_button">Add</button>
    <button type="button" class="UI_button">Delete</button>
</div>

<!--- Fieldset group with UI_contour --->
Fieldset group with UI_contour
<div class="UI_fieldset UI_contour">
    <select class="UI_Select">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
    <input type="text" class="UI_input" placeholder="Example text">
    <button type="button" class="UI_button">Add</button>
    <button type="button" class="UI_button">Delete</button>
</div>

<!--- Fieldset group with UI_inline-form --->
Fieldset group with UI_inline-form
<div class="UI_fieldset UI_inline-form">
    <select class="UI_Select">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
    <input type="text" class="UI_input" placeholder="Example text">
    <button type="button" class="UI_button">Add</button>
    <button type="button" class="UI_button">Delete</button>
</div>

Компонент форми

Буває, треба до поля прикріпити елементи керування, чи це має бути якась мініформа на кшталт пошуку. В обгортці з класом UI_form-component розмістіть поле/ля, кнопку/ки. Елементи з класом UI_form-component-control всередині компоненту будуть виглядати як елементи керування. Компонент форми може містити елементи форми та вкладені компоненти форми. До полей та кнопок в середині компонента можна не застосовувати класи елементів форми такі як UI_input, UI_button та інші. Компонент форми по замовчуванню display: flex або display: inline-flex якщо до нього застосовано клас UI_inline-form. Тож, всі елементи в компоненті форми розміщені в рядок та не переносяться. Це може спричиняти проблеми з адаптивністю якщо компонент зібраний із багатьох елементів. В такому випадку, ви можете застосувати до компонента клас UI_adaptive.

Вигляд

Submit form component Search form component Search form component with "UI_adaptive"

Search form component with "UI_disabled-form" Form component with "UI_contour UI_readonly-form"

Form component with "UI_contour UI_size-s UI_inline-form"

Код

<!--- Submit form component --->
Submit form component
<form class="UI_form-component">
    <select class="UI_Select"
            data-select-placeholder="Add categories" data-with-search="true" multiple>
        <option>Category 1</option>
        <option>Category 2</option>
        <option>Category 3</option>
        <option>Category 4</option>
        <option>Category 5</option>
        <option>Category 6</option>
        <option>Category 7</option>
        <option>Category 8</option>
        <option>Category 9</option>
        <option>Category 10</option>
    </select>
    <button type="button">Submit</button>
</form>

<!--- Search form component --->
Search form component
<form class="UI_form-component">
    <input type="search" placeholder="Example search">
    <button type="button">Search</button>
</form>

<!--- Search form component with "UI_disabled-form" --->
Search form component with "UI_disabled-form"
<form class="UI_form-component UI_disabled-form">
    <input type="search" placeholder="Example search">
    <button type="button">Search</button>
</form>

<!--- Search form component with "UI_adaptive" --->
Search form component with "UI_adaptive"
<div class="UI_form-component UI_adaptive">
    <select class="UI_Select" data-select-placeholder="Choose a type">
        <option>Doctor</option>
        <option>Patient</option>
        <option>Visitor</option>
    </select>
    <input class="UI_InputNumber" type="number" placeholder="Your Number">
    <button type="button">Search</button>
</div>

<!--- Form component with "UI_contour UI_readonly-form" --->
Form component with "UI_contour UI_readonly-form"
<div class="UI_form-component UI_contour UI_readonly-form">
    <select class="UI_Select" data-open-icon="&duarr;">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
    <input type="text" data-lim="this, 50"
           placeholder="Example text">
    <button type="button">Add</button>
    <i class="fa-solid fa-trash-alt UI_form-component-control"></i>
</div>

<!--- Form component with "UI_contour UI_size-s UI_inline-form" --->
Form component with "UI_contour UI_size-s UI_inline-form"
<div class="UI_form-component UI_contour UI_size-s UI_inline-form">
    <select class="UI_Select" data-open-icon="⤵" data-close-icon="⤴">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
    <input type="text" data-lim="this, 50"
           placeholder="Example text">
    <button type="button">Add</button>
    <i class="fa-solid fa-trash-alt UI_form-component-control"></i>
</div>

Методи UI

Нижче перераховані методи суперкласу UI, що описаний та проініціалізований в файлі UI.js. Більшість методів UI призначені, щоб змінювати елементи на сторінці, будувати компоненти та керувати ними. Умовно методи можна поділити на хелпери та плагіни. Якщо перші викликаються переважно по якійсь події (натискання кнопки чи введення в полі), то другі викликаються одразу після завантаження сторінки, знаходять по селектору в конфігурації потрібні елементи та щось з ними роблять (активують).

Блокування вузлів та елементів

Після завантаження сторінки з підключеним UI.js відбувається активація деяких методів UI. Наприклад, всі списки <ul class="UI_Menu">...</ul> перетворяться в меню, а<dl class="UI_Tabs">...</dl> стануть табами. Доданий до елементу CSS-клас UI_disabled-node забороняє опрацьовувати методам UI цей елемент та всі його дочірні елементи. Якщо такі є, UI виведе повідомлення про них в консоль браузера. Якщо вам потрібно використовувати свій клас, що блокує методи UI або додати ще класи, знайдіть рядок #disabledNodes = [`.UI_disabled-node`]; в файлі UI.js та скорегуйте масив.

Блокування може стати у пригоді, коли на сторінці використовується WYSIWYG HTML-редактор, в якому потрібно зверстати, наприклад, вікно, що випливає (popup). Оскільки сучасні редактори вбудовують контент, зверстаний в них, у поточний документ, під'єднані до документу UI.css та UI.js також будуть працювати в вікні редактора. Річ в тому, що деякі методи UI змінюють зміст та навіть розташування в DOM елементів, які вини опрацьовують. В результаті існує ймовірність небажаних змін елементів перед їх збереженням. <div id="editor" class="UI_disabled-node"> заборонить UI опрацьовувати сам елемент редактору та всі його дочірні елементи.

Css селектори UI в сценаріях JS

Можливо вам знадобиться маніпулювати css селекторами UI у своїх сценаріях. Наприклад: динамічно помітити поле як не валідне, додавши до нього клас UI_invalid-form. Звичайно, ви можете це зробити якось так: field.classList.add('UI_invalid-form'). Щоб зменшити залежність від використання в сценаріях рядків селекторів, в UI.js передбачена публічна властивість UI.сss яка представляє об'єкт. Користуйтеся полями цього об'єкту та додавайте свої поля. Тож, приклад з додаванням класу краще записати так: field.classList.add(UI.css.invalidForm).

Таби

Інтерфейс перемикання між блоками контенту за допомогою вкладок (табів) — дуже корисний компонент UI. Якщо вкладок дуже багато, до потрібної можна скролити, — це вдале рішення для цього інтерфейсу на малих екранах. HTML-структура списку визначень dl бездоганно підходить для побудови цього компоненту.

Вигляд

Метод UI.Tabs() за замовчуванням побудує таби із <dl class="UI_Tabs">...</dl> та відкриє перші вкладки.

Код

<!--- UI.Tabs() --->
<dl class="UI_Tabs">
    <dt>Tab 1</dt>
    <dd>
        <h2>Content 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </dd>
    <dt>Tab 2</dt>
    <dd>
        <h2>Content 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </dd>
</dl>

API

Метод UI.Tabs([userConf]) перетворює список визначень dl в таби. За замовчуванням UI трансформує всі dl списки, в яких є class="UI_Tabs". Це вже спрацювало, бо в кінці файлу UI.js викликано UI.Tabs(). Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полів об'єкта конфігурації. Метод повертає екземпляр класу-будівельника.

Поля об'єкта конфігурації

Слід зазначити, що всі або окремі перераховані нижче поля, окрім selector, можна передати методу атрибутами data-. Це дозволить конфігурувати кожний окремий екземпляр. Передані таким чином поля конфігурації вказують методу застосовувати їх з найвищим пріоритетом. Назви полів слід вказувати з префіксом data- в стилі kebab-case. Приклад: {iconMail: `<i class="fa-solid fa-envelope"></i>`} -> data-icon-mail="<i class='fa-solid fa-envelope'></i>". Так, це спрацює..)

selector (рядок, опціонально, за замовчуванням ".UI_Tabs"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегом dl в колекцію. Саме ця колекція буде надалі опрацьована методом.
showTabIndex (ціле число, опціонально, за замовчуванням 0). Індекс вкладки, яку потрібно відкрити за замовчуванням. Зверніть увагу: індекси вкладок починаются з нуля.
smartShow (булево, опціонально, за замовчуванням "true"). Дозволено чи ні за замовчуванням відкривати вкладку, передану в рядку uri. Для цього в елемента dl має бути id, а після хешу рядка uri, відокремлені знаком =, передано цей id з індексом вкладки, що потрібно відкрити. Якщо таких табів багато, їх треба відокремлювати знаком &. В рядку не повинно бути пробілів. Приклад: example.com#tabs1=2&tabs2=0 — в табі з id="tabs1" буде відкрито третю вкладку, а з id="tabs2" першу.

клас-будівельник

UI.Tabs() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод show(tabIndex [,tabs]) відкриває вкладку. Повертає клас-будівельник.
1. Аргумент tabIndex (ціле число, обов'язковий). Індекс вкладки, яку потрібно відкрити. Зверніть увагу: індекси вкладок починаються з нуля.
2. Аргумент tabs (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, в якому треба відкрити вкладку. Якщо аргумент не передано, вкладка tabIndex буде відкрита у всіх елементах колекції.
Метод remove() деактивує всі активовані елементи колекції та повертає звичайний вигляд dl. Повертає клас-будівельник.
Властивість get повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.

Події

UI.Tabs() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елемент dl який активується.

UI.activated компонент активовано.
UI.unactivated компонент деактивовано.
UI.beforeRemove компонент буде видалено та деактивовано.
UI.removed компонент видалено та деактивовано.
UI.beforeShow вкладку буде відкрито.
1. event.detail.tabIndex (ціле число) індекс вкладки.
UI.showed вкладку відкрито.
1. event.detail.tabIndex (ціле число) індекс вкладки.

Поглиблений доступ

Як тільки компонент буде активовано на елементі, елемент отримає об'єкт UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, myDl.UI.component щоб отримати сам елемент компонента. myDl.UI.Builder повертає екземпляр класу-будівельника.

Перемикання відображення елемента

Метод UI.Toggle() показує/приховує елемент який йому передадуть в аргументі. Цей елемент може бути передано як HTMLElement або ідентифікатор цього елементу. Якщо елемент який викликає UI.Toggle() має клас UI_angle-down чи UI_angle-up та атрибут data-toggle, метод буде змінювати напрям куточка відповідно до стану показаного/прихованого елемента.

Вигляд

Код

<!--- UI.Toggle() --->
<button type="button" class="UI_button UI_angle-down" data-toggle="hidElem">Докладніше</button>

<!--- або "повісити" опрацьовувач на подію
<button type="button" class="UI_button" onclick="UI.Toggle('hidElem')">Докладніше</button>
--->

<!--- або "повісити" опрацьовувач на подію в сценарії
const myElem = document.getElementById(`hidElem`);
button.addEventListener(`click`, () => UI.Toggle(myElem));
--->

<div id="hidElem" hidden>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dignissimos doloremque ducimus et,
    fugiat in iure nemo odit quidem quo! Aliquid aspernatur assumenda consequuntur doloremque enim, fugiat
    in iure modi nihil quas quos, ratione recusandae reiciendis rem suscipit. Cum, laudantium?.<br>
    <a data-toggle="hidElem">Приховати</a>
</div>

API

Метод UI.Toggle(target[, display]) перемикає відображення елемента target. Щоб елемент був прихованим від самого початку, додайте йому атрибут hidden або display: none. Метод повертає елемент target. Якщо елемент не знайдено, буде видана помилка ReferenceError.

Порада

Метод можна повісити на елемент атрибутом data- та передати параметри через кому в його властивість. Приклад: data-toggle="elemId, block". Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.

Аргументи метода

target (рядок або HTMLElement, обов'язковий). Елемент або ідентифікатор елемента за яким треба його знайти. Цей елемент буде показано або приховано.
display (рядок, опціонально, за замовчуванням "block"). Значення CSS-властивості "display" для видимого елемента. Прихований елемент отримує display: none

Події

UI.Toggle() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елемент target.

UI.beforeShow елемент буде показано.
UI.showed елемент показано.
UI.beforeHide елемент буде приховано.
UI.hidden елемент приховано.

Перехід до елементу

В HTML вже давно реалізована така можливість за допомогою <a href="#element">...</a>. Але метод UI.GoTo() більш гнучкий у використанні ніж посилання, та вміє ще дещо.

Вигляд

Перейти до: Посилання на перший h2 в документі

Код

<!--- UI.GoTo() --->
<h2 id="MyHeader">Заголовок</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, consectetur,
labore voluptates natus commodi nemo asperiores cumque magnam iste unde quaerat officia
praesentium aspernatur qui laborum in accusantium quae facilis illo eos animi minus est
sequi totam optio enim quos nihil corporis numquam rem quod neque error tempore.
Aspernatur, facere, nihil, inventore repudiandae eum recusandae accusamus soluta nemo est
libero expedita perferendis incidunt possimus ut esse cumque consequatur aliquid similique
totam praesentium impedit fuga deserunt dolorum numquam rerum omnis dolore quibusdam
assumenda quas qui hic fugiat labore repellendus quos voluptatibus autem dolorem...</p>

І ще багато всякого...

<button type="button" class="UI_button" data-go-to="#MyHeader">Перейти до заголовку</button>

<!--- Можна "повісити" опрацьовувач на подію
<button type="button" class="UI_button" onclick="UI.GoTo('#h2Header')">Перейти до заголовку</button>
--->

<!--- Можна передати елемент
const element = document.querySelector(`h2`);
UI.GoTo(element);
--->

API

Використовуйте метод UI.GoTo([target]), щоб прокрутити сторінку до елементу. Аргументом target методу можна передати сам елемент чи селектор елемента. Якщо викликати цей метод без аргумента, він буде намагатись отримати хеш-рядок з uri та прокрутити сторінку до елементу, який має id, ідентичний рядку в хеш. Це вже працює, бо UI.GoTo() викликано в кінці файлуUI.js. Метод повертає елемент або undefined, якщо елемент не знайдено.

Порада

Метод можна повісити на елемент атрибутом data- та передати параметер в його властивість. Приклад: data-go-to="#elemId". Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.

Аргументи метода

target (рядок чи HTMLElement, опціонально, за замовчуванням null). Селектор елемента чи елемент до якого буде прокручено сторінку. Зверніть увагу, якщо передано селектор, метод буде намагатися знайти перший елемент в документі за цим селектором. Якщо аргумент не передано, метод намагатиметься отримати в поточному uri хеш (рядок після # включно) та шукатиме на сторінці елемент з таким id, щоб прокрутити сторінку до нього.

Події

UI.GoTo() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елемент document.

UI.beforeGoTo сторінку буде прокручено до елементу.
UI.afterGoTo сторінка прокручена до елементу.

Підказка, що випливає

При наведені на елемент з навішеним методом UI.Hint() з'явиться підказка. Підказка може містити буд-який контент. Немає жодних обмежень що до тегу підказки — обгортки контенту. Однак, підказка повинна мати клас UI_Hint та бути розташована одразу за елементом на який навішений метод UI.Hint(). Тож, ви можете верстати, не порушуючи правила валідації. Контент підказки буде доступний пошуковим ботам.

Вигляд

Підказка Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, aliquid consequuntur harum, quia voluptatem. за замовчуванням.
Щоб сховати, цю підказку Клацни в будь-якому місці. Це стане в пригоді, наприклад, коли в підказці буде посилання або інший елемент взаємодії. треба клікнути

Підказка

                        Нумо! Ти знаєш, що робити. Клацай двічі..)

в цьому прикладі підказка ховається, якщо клацнути двічі.

Трохи HTML в цій підказці

Випадкове зображення
Якщо щось потрібно пояснити Та що тут вже пояснювати..) Все стане ясно, якщо подивитись код на вкладці поруч.

Код

<!--- UI.Hint() --->
<ol>
    <li>
        <mark data-hint="this">Підказка</mark>
        <span class="UI_Hint">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Dolores, aliquid consequuntur harum, quia voluptatem.
        </span>
        за замовчуванням.
    </li>
    <li>
        Щоб сховати,
        <mark data-hint="this, click">цю підказку</mark>&nbsp;
        <i class="UI_Hint">
            Клацни в будь-якому місці. Це стане в пригоді, наприклад,
            коли в підказці буде <a>посилання</a> або
            інший елемент взаємодії.
        </i>
        треба клікнути
    </li>
    <li>
        <mark data-hint="this, dblclick">Підказка</mark>&nbsp;
        <pre class="UI_Hint">
            Нумо! Ти знаєш, що робити. Клацай двічі..)
        </pre>
        в цьому прикладі підказка ховається, якщо клацнути двічі.
    </li>
    <li>
        Трохи HTML в
        <mark data-hint="this">цій підказці</mark>&nbsp;
        <div class="UI_Hint">
            <h4>Випадкове зображення</h4>
            <img src="https://picsum.photos/250" alt="Random Image">
        </div>
    </li>
    <li>
        Якщо щось потрібно пояснити
        <i class="fa-solid fa-question-circle" data-hint="this"></i>
        <span class="UI_Hint">
            Та що тут вже пояснювати..)
            Все стане ясно, якщо подивитись код
            на вкладці поруч.
        </span>
    </li>
</ol>

<!--- або "повісити" опрацьовувач на подію
<i class="fa-solid fa-question-circle" onmouseover="UI.Hint(this)"></i>
<span class="UI_Hint">
    Але все ж таки, в верстці краще
    використовувати виклик через
    "data-" атрибут 😉
</span>
--->

API

Метод UI.Hint(el[, hideEvent]) показує та ховає підказку, що випливає. Аргумент el визначає елемент, біля якого буде показана підказка. Сам елемент підказки має знаходитись одразу за el та мати клас UI_Hint. Метод слід застосовувати як опрацьовувач події на елементі el. Метод повертає екземпляр класу-будівельника.

Порада

Метод можна повісити на елемент атрибутом data- та передати параметри через кому в його властивість. Приклад: data-hint="this, click". Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.

Аргументи метода

el (HTMLElement, обов'язковий). Елемент або посилання на нього.
hideEvent (рядок, опціонально, за замовчуванням "mouseout"). Подія, що сховає підказку. Цю подію слід передавати рядком без префіксу on. Приклад: UI.Hint(this, 'click'). В цьому випадку підказка зникне тільки після клацання по ній чи будь-де. За замовчуванням підказка зникає, коли з елементу el буде прибрано курсор.Список стандартних HTML подій

клас-будівельник

UI.Hint() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод setPosition([e]) визначає розташування підказки. Повертає клас-будівельник.
1. Аргумент e (Event, опціонально, за замовчуванням el). Об'єкт події на елементі el.
Метод show() показує підказку. Повертає клас-будівельник.
Метод hide() ховає підказку. Повертає клас-будівельник.
Властивість get повертає елемент el, який використовує UI.Hint(). Повинен бути викликаний останнім в ланцюгу викликів.

Події

UI.Hint() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елемент el.

UI.beforeShow підказку буде показано.
UI.showed підказку показано.
UI.beforeHide підказку буде приховано.
UI.hidden підказку приховано.

Поглиблений доступ

Як тільки компонент буде активовано на елементі, елемент отримає об'єкт UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, myTrigger.UI.hint щоб отримати елемент підказки. myTrigger.UI.Builder повертає екземпляр класу-будівельника.

Повідомлення

Метод UI.Notice() — гарна альтернатива стандартним, сумним alert(), prompt() та confirm(). Метод використовує класи повідомлень, але також може викристовувати ваші класи. А ще, в UI передбачено чергу для всіх викликів UI.Notice() в вашому сценарії.

Вигляд

Код

<!--- UI.Notice() --->
<button type="button" class="UI_button" id="goFeed">Погодувати Мурчика</button>

<script>
    let feedTheMurchik = () => {
        UI.Notice({
            message: `🐱 омномном...`,
            delay: 3000,
            callback: () => {
                UI.Notice({
                    message: `Мурчика погодовано 😺`,
                    delay: 2000,
                    className: `UI_notice-success`
                });
            }
        });
    }
    document.querySelector(`#goFeed`).addEventListener(`click`, feedTheMurchik);
</script>

API

Метод UI.Notice([userConf]) приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полів об'єкта конфігурації. Одразу після виклику метод активує (створює та показує) повідомлення. Якщо в сценарії декілька викликів метода, всі вони будуть додані в чергу. Метод повертає екземпляр класу-будівельника.

Поля конфігурації метода

message (рядок, опціонально, за замовчуванням "processing..."). Текст або HTML в повідомленні.
className (рядок, опціонально, за замовчуванням "UI_notice-process"). Один або декілька CSS-класів, які будуть застосовані до елемента підказки. Зручно використовувати один з класів повідомлень UI.
delay (ціле число або null, опціонально, за замовчуванням null). Тривалість в мілісекундах впродовж якого буде показане (активне) повідомлення перед тим, як автоматично отримає виклик remove(). Якщо передано 0 або null, повідомлення буде активне, поки екземпляр не отримає виклик remove() вручну.
callback (функція або null, опціонально, за замовчуванням null). Функція, яка буде викликана після того, як час delay сплине. Зверни увагу, якщо delay 0 або null, функція ніколи не буде викликана. callback може бути асинхронною функцією.

клас-будівельник

UI.Notice() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод insert(...nodes) вставляє елемент/елементи в повідомлення. Перед вставкою контент повідомлення буде видалений. Повертає клас-будівельник.
Метод remove() приховує повідомлення. Повертає клас-будівельник.
Властивість get повертає динамічно створений елемент повідомлення UI.Notice(). Повинен бути викликаний останнім в ланцюгу викликів.

Події

UI.Notice() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елемент повідомлення UI.Notice().get.addEventListener(...).

UI.created повідомлення створено.
UI.activated повідомлення активовано (показано).
UI.beforeInsert в повідомлення буде вставлено елемент.
UI.inserted в повідомлення вставлено елемент.
UI.beforeRemove повідомлення буде видалено.
UI.removed повідомлення видалено.

Поглиблений доступ

Як тільки компонент буде активовано, ви зможете мати доступ до об'єкта UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, UI.Notice({...}).get.UI.component щоб активувати компонент та одразу отримати елемент компонента. myNotice.UI.Builder повертає екземпляр класу-будівельника.

Будь-які елементи з CSS-класом UI_Popup та унікальним id UI перетворить на вікна, що випливають. Цей елемент може містити що завгодно. Зміст не буде приховано від пошукових ботів. За замовчуванням такі вікна приховані на сторінці, а щоб показати вікно, треба викликати метод з переданим id вікна.

Ви можете застосовувати класи popup-xs, popup-s, popup-m, popup-l, popup-xl, popup-full до елементу вікна, щоб впливати на його максимальну ширину. Якщо застосовувати popup-full разом з класом розміру вікна, наприклад popup-s, вікно буде повнорозмірним, але ширина контенту буде обмежена класом popup-s. Якщо не застосовувати жоден з класів розміру вікна, ширина вікна буде обмежена змінною --UI_Popup-max-width.

Ви можете додавати свої елементи керування у вікно. Просто розмістіть всередині UI_Popup елементи з UI_Popup-control-item. UI забере їх та розмістить біля кнопки приховування в панелі керування вікном. Якщо елементів керування багато, застосуйте до вікна клас popup-control-vertical, щоб розмістити панель вертикально праворуч змісту вікна.

Вигляд

Посилання

Привіт!

Вікно активоване посиланням. Це вигляд вікна за замовчуванням — елемент з класом UI_Popup.

Код

<!--- UI.Popup() --->
<button type="button" class="UI_button" data-popup="pop1">Кнопка</button>
<a data-popup="pop2">Посилання</a>

<!--- або "повісити" опрацьовувач на подію
<button type="button" class="UI_button" onclick="UI.Popup('pop1')">Кнопка</button>
<a onclick="UI.Popup('pop2')">Посилання</a>
--->

<div id="pop1" class="popup-control-vertical popup-full popup-m">
    <h3>Привіт!</h3>
    <p>
        Вікно активоване кнопкою.
        <a data-popup="pop2">Відкрити ще вікно</a>.
        <i class="fa-solid fa-heart UI_Popup-control-item"></i>
        <i class="fa-solid fa-share-nodes UI_Popup-control-item"></i>
    </p>
</div>
<div id="pop2" class="UI_Popup">
    Вікно активоване посиланням.
</div>

API

Метод UI.Popup([id]) приймає єдиний необов'язковий аргумент — id елемента, який треба показати як вікно, що випливає. Викликаний без аргументу метод знайде всі елементи з класом UI_Popup, опрацює їх та активує. Це вже зроблено, бо UI.Popup() викликано в кінці файлу UI.js. Вам залишилось лише передати id та показати вікно. Коли UI активує елемент з класом UI_Popup, він шукає всі вкладені елементи з класом UI_Popup-control-item та переміщає їх в панель керування вікном. Так ви можете легко контролювати вікно та його зміст з панелі керування. Кнопка приховування вікна буде додана завжди першою опціонально. Метод повертає екземпляр класу-будівельника.

Порада

Метод можна повісити на елемент атрибутом data- та передати параметр в його властивість. Приклад: data-popup="elemId". Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.

Аргументи метода

id (рядок, необов'зковий, за замовчуванням null). Елемент з цим id та класом UI_Popup буде показано як вікно, що випливає.

клас-будівельник

UI.Popup() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод show() показує вікно з id та класом UI_Popup. Повертає клас-будівельник.
Метод hide() ховає вікно з id та класом UI_Popup. Повертає клас-будівельник.
Метод insert(...nodes) вставляє елемент/елементи у вікно з id. Перед вставкою контент вікна буде видалений. Повертає клас-будівельник.
Метод insertControls(...nodes) вставляє елемент/елементи в верхню панель керування вікном з id. Спочатку буде очищено всю панель керування, потім послідовно будуть додані в неї з правого боку в лівий: кнопка приховування вікна, знайдені в вікні елементи з класом UI_Popup-control-item, елементи ...nodes передані цьому методу. Повертає клас-будівельник.
Властивість get повертає масив — колекцію елементів, які активував UI.Popup(). Повинен бути викликаним останнім в ланцюгу викликів.

Події

UI.Popup() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елемент вікна myPopup.addEventListener(...).

UI.activated вікно активовано.
UI.unactivated вікно деактивовано.
UI.beforeShow вікно буде показано.
UI.showed вікно показано.
UI.beforeHide вікно буде приховано.
UI.beforeInsert у вікно буде вставлено елемент/и.
UI.inserted у вікно вставлено елемент/и.
UI.beforeInsertControls у вікно буде вставлено елемент/и керування.
UI.insertedControls у вікно вставлено елемент/и керування.
UI.inserted у вікно вставлено елемент/и.
UI.hidden вікно приховано.

Поглиблений доступ

Як тільки компонент буде активовано, елемент вікна отримає об'єкт UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, myPopup.UI.closeButton щоб отримати елемент кнопки що ховає вікно. myTextarea.UI.Builder повертає екземпляр класу-будівельника.

Обмеження рядка вводу

Метод UI.Lim() показує, скільки символів залишилось ввести до обмеження. Коли обмеження буде досягнуто, метод не дасть можливість вводити більше.

Вигляд

Код

<!--- UI.Lim() input type="text" --->
<input type="text" class="UI_input" placeholder="Почни вводити текст" data-lim="this, 75">

<!--- UI.Lim() textarea --->
<textarea class="UI_textarea" placeholder="Почни вводити текст" data-lim="this, 75"></textarea>

<!--- або "повісити" опрацьовувач на подію
<input type="text" class="UI_input" placeholder="Почни вводити текст" oninput="UI.Lim(this, 75)">
<textarea class="UI_textarea" placeholder="Почни вводити текст" oninput="UI.Lim(this, 75)"></textarea>
--->

API

Метод UI.Lim(field [, limit]) обмежує ввод символів в поле field до limit та показує користувачу, скільки ще можна ввести. Слід зазначити, що метод опрацьовує тільки текстові поля <input type="text"> та <textarea>...</textarea>, зверстані за правилами UI, як зазначено в розділі Форми. Метод повертає екземпляр класу-будівельника.

Порада

Метод можна повісити на елемент атрибутом data- та передати параметри через кому в його властивість. Приклад: data-lim="this, 50". Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.

Аргументи метода

field (HTMLElement, обов'язковий). Елемент (поле) або посилання на нього.
limit (ціле число, опціонально, за замовчуванням 50). Скільки символів можна вводити.

клас-будівельник

UI.Lim() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод run() показує лічильник, опрацьовує рядок в полі field та обрізає до ліміту limit. Повертає клас-будівельник.
Метод show() показує лічильник та встановлює фокус в полі field. Повертає клас-будівельник.
Метод hide() ховає лічильник. Повертає клас-будівельник.
Метод cut() обрізає рядок в полі field до ліміту limit. Повертає клас-будівельник.
Метод remove() видаляє лічильник символів. Повертає клас-будівельник.
Властивість get повертає поле field, яке використовує UI.Lim(). Повинен бути викликаний останнім в ланцюгу викликів.

Події

UI.Lim() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елемент field.

UI.created лічильник створено.
UI.beforeShow лічильник буде показано.
UI.showed лічильник показано.
UI.beforeHide лічильник буде приховано.
UI.hidden лічильник приховано.
UI.beforeCut рядок в полі буде обрізано.
UI.cut рядок в полі обрізано.
UI.beforeRemove лічильник буде видалено.
UI.removed лічильник видалено.

Поглиблений доступ

Як тільки компонент буде активовано на елементі, елемент отримає об'єкт UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, myTextarea.UI.counter щоб отримати елемент лічильника. myTextarea.UI.Builder повертає екземпляр класу-будівельника.

Input type="file"

Метод UI.InputFile() будує компонент форми з зручним інтерфейсом навколо звичайного поля <input type="file"> та забезпечує управління полем через цей компонент.

Вигляд

Код

<!--- UI.InputFile() Input type="file" multiple --->
<input type="file" class="UI_InputFile" data-placeholder="Choose several files" multiple>

<!--- UI.InputFile() Inline input type="file" --->
<input type="file" class="UI_InputFile UI_inline-form">

API

Метод UI.InputFile([userConf]) за замовчуванням опрацює всі <input type="file"> з класом UI_InputFile. Це вже спрацювало, бо в кінці файлу UI.js викликано UI.InputFile(). Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляр класу-будівельника.

Поля об'єкту конфігурації

Слід зазначити, що всі або окремі перераховані нижче поля, окрім selector, можна передати методу атрибутами data-. Це дозволить конфігурувати кожен окремий екземпляр. Передані таким чином поля конфігурації вказують методу застосовувати їх з найвищим пріоритетом. Назви полів слід вказувати з префіксом data- в стилі kebab-case. Приклад: {iconMail: `<i class="fa-solid fa-envelope"></i>`} -> data-icon-mail="<i class='fa-solid fa-envelope'></i>". Так, це спрацює..)

selector (рядок, опціонально, за замовчуванням ".UI_InputFile"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегом input type="file" в колекцію. Саме ця колекція буде надалі опрацьована методом.
placeholder (рядок, опціонально, за замовчуванням "Choose a file"). Текст в полі компонента, якщо файл не обрано.
choiceIcon (рядок, опціонально, за замовчуванням "<i class='fa-solid fa-folder-open'></i>"). Текст або HTML-іконки обрання файла/лів.

клас-будівельник

UI.InputFile() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод render([input]) Метод отримує обрані в полі input файли та показує їх в компоненті. Повертає клас-будівельник.
1. Аргумент input (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
Метод remove() деактивує всі активовані елементи колекції та повертає звичайний вигляд <input type="file">. Повертає клас-будівельник.
Властивість get повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.

Події

UI.InputFile() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на <input type="file"> на якому активовано компонент.

UI.activated компонент активовано.
UI.unactivated компонент деактивовано.
UI.beforeRender обрані файли будуть показані у компоненті.
UI.rendered обрані файли показані у компоненті.
UI.beforeRemove компонент буде видалено та деактивовано.
UI.removed компонент видалено та деактивовано.

Поглиблений доступ

Як тільки компонент буде активовано на елементі, елемент отримає об'єкт UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, myInput.UI.component щоб отримати сам елемент компонента. myInput.UI.Builder повертає екземпляр класу-будівельника.

Input type="range"

Метод UI.InputRange() додасть до полів <input type="range"> з класом UI_InputRange інформаційний елемент.

Вигляд

Код

<!--- UI.InputRange() Input type="range" --->
<input type="range" class="UI_InputRange" min="0" max="10" step="1" value="0">

<!--- UI.InputRange() Inline input type="range" --->
<input type="range" class="UI_InputRange UI_inline-form" min="0" max="10" step="1" value="0">

API

Метод UI.InputRange([userConf]) за замовчуванням опрацює всі <input type="range"> з класом UI_InputRange. Це вже спрацювало, бо в кінці файлу UI.js викликано UI.InputRange(). Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляр класу-будівельника.

Поля об'єкту конфігурації

selector (рядок, опціонально, за замовчуванням ".UI_InputRange"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегом input type="range" в колекцію. Саме ця колекція буде надалі опрацьована методом.

клас-будівельник

UI.InputRange() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод remove() деактивує всі активовані елементи колекції та повертає звичайний вигляд <input type="range">. Повертає клас-будівельник.
Властивість get повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.

Події

UI.InputRange() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на <input type="range"> на якому активовано компонент.

UI.activated компонент активовано.
UI.unactivated компонент деактивовано.
UI.beforeRender обране значення буде показано у компоненті.
UI.rendered обране значення буде показано у компоненті.
UI.beforeRemove компонент буде видалено та деактивовано.
UI.removed компонент видалено та деактивовано.

Поглиблений доступ

Як тільки компонент буде активовано на елементі, елемент отримає об'єкт UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, myInput.UI.infobox щоб отримати інформаційний елемент компонента. myInput.UI.Builder повертає екземпляр класу-будівельника.

Input type="number"

Метод UI.InputNumber() будує компонент форми зі зручним інтерфейсом навколо звичайного поля <input type="number"> та забезпечує управління полем через цей компонент.

Вигляд

Код

<!--- UI.InputNumber() Input type="number" --->
<input type="number" class="UI_InputNumber" min="0" max="6">

<!--- UI.InputNumber() Inline input type="number" --->
<input type="number" class="UI_InputNumber UI_inline-form" min="-6" max="6" step="2">

API

Метод UI.InputNumber([userConf]) за замовчуванням опрацює всі <input type="number"> з класом UI_InputNumber. Це вже спрацювало, бо в кінці файлу UI.js викликано UI.InputNumber(). Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляр класу-будівельника.

Поля об'єкту конфігурації

selector (рядок, опціонально, за замовчуванням ".UI_InputNumber"). CSS-селектор або комбінація селекторів за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегом input type="number" в колекцію. Саме ця колекція буде надалі опрацьована методом.
incIcon (рядок, опціонально, за замовчуванням "<i class='fa-solid fa-plus'></i>"). Іконка на кнопці додавання. Може містити HTML.
decIcon (рядок, опціонально, за замовчуванням "<i class='fa-solid fa-minus'></i>"). Іконка на кнопці віднімання. Може містити HTML.
title (рядок, опціонально, за замовчуванням "Put the cursor in the field and scroll it ;)"). Текст атрибуту title компонента. Спеціальні символи слід екранувати.

клас-будівельник

UI.InputNumber() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод setVal(action [, input]) В залежності від аргументу action, метод додає чи віднімає значення поля input на крок, який визначено атрибутом step, чи одиницю. Повертає клас-будівельник.
1. Аргумент action (рядок, обов'язковий, "inc" або "dec"). Додати чи відняти на крок, визначиний в атрибуті step поля.
2. Аргумент input (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
Метод remove() деактивує всі активовані елементи колекції та повертає звичайний вигляд <input type="number">. Повертає клас-будівельник.
Властивість get повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.

Події

UI.InputNumber() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на <input type="number"> на якому активовано компонент.

UI.activated компонент активовано.
UI.unactivated компонент деактивовано.
UI.beforeSetVal значення буде встановлено.
UI.setVal значення встановлено.
UI.beforeInc значення на крок меньше буде встановлено.
UI.inc значення на крок меньше встановлено.
UI.beforeDec значення на крок більше буде встановлено.
UI.dec значення на крок більше встановлено.
UI.beforeRemove компонент буде видалено та деактивовано.
UI.removed компонент видалено та деактивовано.

Поглиблений доступ

Як тільки компонент буде активовано на елементі, елемент отримає об'єкт UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, myInput.UI.decButton щоб отримати елемент кнопки зменшення значення. myInput.UI.Builder повертає екземпляр класу-будівельника.

Список, що випадає

Метод UI.Select() будує компонент форми зі зручним інтерфейсом навколо звичайного поля <select>...</select> та забезпечує управління полем через цей компонент.

Вигляд

Код

<!--- UI.Select() Multiple select with search --->
<select class="UI_Select" id="mySelect"
        data-with-search="true"
        data-select-placeholder="Шукай та обирай своїх героїв..)"
        data-search-placeholder="Наприклад, за запитом &quot;magic&quot; знайдеться &quot;Doctor Strange&quot;" multiple>
    <option data-find-of="water swim" value="aquaman">Aquaman</option>
    <option data-find-of="gall" value="asterix">Asterix</option>
    <option data-find-of="fly" value="batman">Batman</option>
    <option data-find-of="jump" value="black panther">Black Panther</option>
    <option data-find-of="fly power" value="captain america">Captain America</option>
    <option data-find-of="fly power" value="captain marvel">Captain Marvel</option>
    <option data-find-of="magic" value="doctor strange">Doctor Strange</option>
    <option data-find-of="team" value="guardians of the galaxy">Guardians of the Galaxy</option>
    <option data-find-of="rage" value="hellboy">Hellboy</option>
    <option data-find-of="antihero" value="robin">Robin</option>
    <option data-find-of="fly power" value="superman">Superman</option>
    <option data-find-of="jump swim team" value="tmnt">Teenage Mutant Ninja Turtles</option>
    <option data-find-of="power" value="thor">Thor</option>
</select>

<!--- UI.Select() Simple inline select --->
<select class="UI_Select UI_inline-form">
    <option value="aquaman">Aquaman</option>
    <option value="asterix">Asterix</option>
    <option value="batman">Batman</option>
    <option value="black panther">Black Panther</option>
    <option value="captain america">Captain America</option>
    <option value="captain marvel">Captain Marvel</option>
    <option value="doctor strange">Doctor Strange</option>
    <option value="guardians of the galaxy">Guardians of the Galaxy</option>
    <option value="hellboy">Hellboy</option>
    <option value="robin">Robin</option>
    <option value="superman">Superman</option>
    <option value="tmnt">Teenage Mutant Ninja Turtles</option>
    <option value="thor">Thor</option>
</select>

<!--- UI.Select() with data-content attributes --->
<select class="UI_Select UI_inline-form" data-select-placeholder="">
    <option data-content="<i class='fa-brands fa-instagram'></i> Instagram" value="instagram"></option>
    <option data-content="<i class='fa-brands fa-facebook'></i> Facebook" value="facebook"></option>
    <option data-content="<i class='fa-brands fa-twitter'></i> Twitter" value="twitter"></option>
    <option data-content="<i class='fa-brands fa-youtube'></i> You Tube" value="youtube"></option>
    <option value="none">I don't have an account</option>
</select>

<script>
    // Динамічно отримувати значення multiple поля
    let select = document.querySelector('#mySelect');
    select.addEventListener('change', () => {
        console.log(select.UI.value); // Array [ "Aquaman", "Asterix" ]
    });
</script>

API

Метод UI.Select([userConf]) за замовчуванням опрацює всі <select>...</select> з класом UI_Select. Це вже спрацювало, бо в кінці файлу UI.js викликано UI.Select().Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляр класу-будівельника.

На жаль, браузери не підтримують HTML в option списків що випадають. Але оскільки UI.Select() будує компонент навколо звичайного select, ви можете передати атрибутом data-content навіть HTML. Приклад: <option data-content="<i class='fa-brands fa-facebook'></i>">Text</option>. При побудові компонента і формуванні елементів списку вміст цього атрибуту буде мати пріоритет над вмістом option. В цьому прикладі вміст Text буде проігноровано.

Поля об'єкту конфігурації

selector (рядок, опціонально, за замовчуванням ".UI_Select"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегом select в колекцію. Саме ця колекція буде надалі опрацьована методом.
withSearch (булево, опціонально, за замовчуванням true). Чи потрібен в компоненті пошук по опціях списку та значенням атрибутів data-find-of (дивись метод search()).
selectPlaceholder (рядок, опціонально, за замовчуванням "Make a choice"). Заповнювач порожнього поля. Якщо передано порожній рядок, заповнювач не буде додано.
searchPlaceholder (рядок, опціонально, за замовчуванням "Search on the list"). Заповнювач порожнього поля пошуку по опціях списку.
openIcon (рядок, опціонально, за замовчуванням "<i class='fa-solid fa-chevron-down'></i>"). Іконка кнопки, що показує dropdown компонента. Може містити HTML.
closeIcon (рядок, опціонально, за замовчуванням "<i class='fa-solid fa-chevron-up'></i>"). Іконка кнопки, що ховає dropdown компонента. Може містити HTML.
delItemIcon (рядок, опціонально, за замовчуванням "<i class='fa-solid fa-xmark'></i>"). Іконка кнопки видалення обраної опції в multiple компоненті. Може містити HTML.

клас-будівельник

UI.Select() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод showDropdown([select]) Показує dropdown компонента. Повертає клас-будівельник.
1. Аргумент select (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
Метод hideDropdown([select]) Ховає dropdown компонента. Повертає клас-будівельник.
1. Аргумент select (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
Метод search(query [, select]) Шукає по запиту серед опцій компонента та залишає в dropdown лише знайдені опції. Пошук не чутливий до регистру. Якщо опція не містить тексту чи опцію потрібно знайти за додатковим запитом, використовуйте атрибут опції data-find-of. Приклад: опція <option data-find-of="Ukraine UA" value="+380">🇺🇦</option> буде знайдена за запитом ukraine та ua. Метод повертає клас-будівельник.
1. Аргумент query (рядок, обов'язковий). Запит, за яким буде відбуватись пошук в рядках опцій dropdown компонента.
2. Аргумент select (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
Метод selected(val, indexes [, select]) Встановлює значення атрибуту selected для опцій поля select за індексами та оновлює компонент. Повертає клас-будівельник.
1. Аргумент val (булево, обов'язковий). true або false для значення атрибуту selected.
2. Аргумент indexes (масив, обов'язковий). Масив індексів опцій в полі select. Атрибутам selected цих опцій буде встановлене значення val. Зверніть увагу, disabled опції оброблені не будуть. Для списку з одинарним обиранням в indexes буде опрацьовано лише перше значення.
3. Аргумент select (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
Метод render([select]) Синхронізує компонент з полем select. Коли значення поля змінено, цей метод застосовує такі зміни в компоненті. Повертає клас-будівельник.
1. Аргумент select (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
Метод remove() деактивує всі активовані елементи колекції та повертає звичайний вигляд select. Повертає клас-будівельник.
Властивість get повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.

Події

UI.Select() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на <select> на якому активовано компонент.

UI.activated компонент активовано.
UI.unactivated компонент деактивовано.
UI.beforeDropdownShow dropdown буде показано.
UI.dropdownShowed dropdown показано.
UI.beforeDropdownHide dropdown буде приховано.
UI.dropdownHidden dropdown приховано.
UI.beforeSearch буде здійснено пошук.
UI.searched пошук здійснено.
UI.beforeSelected значення буде встановлено.
1. event.detail.indexes (масив) масив індексів опцій в полі.
2. event.detail.selected (булево) true або false для значення атрибуту selected.
UI.selected значення встановлено.
1. event.detail.indexes (масив) масив індексів опцій в полі.
2. event.detail.selected (булево) true або false для значення атрибуту selected.
UI.beforeRender компонент буде синхронізовано з полем.
UI.rendered компонент синхронізовано з полем.
UI.beforeRemove компонент буде видалено та деактивовано.
UI.removed компонент видалено та деактивовано.

Поглиблений доступ

Як тільки компонент буде активовано на елементі, елемент отримає об'єкт UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, mySelect.UI.dropdown щоб отримати елемент списку що випадає. А так mySelect.UI.value можна легко отримати значення multiple списку одразу в масиві, чи рядком, якщо список не multiple. mySelect.UI.Builder повертає екземпляр класу-будівельника.

Метод UI.Menu() будує компонент меню зі звичайного списку ul. Вкладеність меню буде такою ж, як і вкладеність списку. Будь-який тег li може містити тег a або span, який стане пунктом меню, а також ul, який визначить вкладеність цього пункту.

Вигляд

item1
item2
- sub item1
- sub item2
item3
- sub item1
- sub item2
  - sub item1
  - sub item2
- sub item3

Код

<!--- UI.Menu() --->
<ul class="UI_Menu">
    <li><a href="#">item1</a>
    </li>
    <li><span>item2</span>
        <ul>
            <li><a href="#">sub item1</a>
            </li>
            <li><a href="#">sub item2</a>
            </li>
        </ul>
    </li>
    <li><a href="#">item3</a>
        <ul>
            <li><span>sub item1</span>
            </li>
            <li><a href="#">sub item2</a>
                <ul>
                    <li><a href="#">sub item1</a>
                    </li>
                    <li><a href="#">sub item2</a>
                    </li>
                </ul>
            </li>
            <li><span>sub item3</span>
            </li>
        </ul>
    </li>
</ul>

API

Метод UI.Menu([userConf]) за замовчуванням опрацює всі ul з класом UI_Menu. Це вже спрацювало, бо в кінці файлу UI.js викликано UI.Menu(). Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляр класу-будівельника.

Поля об'єкту конфігурації

selector (рядок, опціонально, за замовчуванням ".UI_Menu"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегом ul в колекцію. Саме ця колекція буде надалі опрацьована методом.
toggleIcon (рядок, опціонально, за замовчуванням "<i class='fa-solid fa-bars'></i>"). Іконка кнопки, яка покаже/сховає все меню чи вкладені пункти на малих пристроях. Може містити HTML.
markLink (булево, опціонально, за замовчуванням false). Якщо uri поточної сторінки збігається зі значенням href посилання на будь-якому рівні вкладеності, метод знайде батьківський li самого верхнього рівня та виділить його серед інших.

клас-будівельник

UI.Menu() повертає екземпляр безіменного класу-будівельника для подальших ланцюгових викликів допоміжних публічних методів та властивостей.

Властивості та методи класу-будівельника

Метод markLink([ul]) виділить пункт самого верхнього рівня, якщо на нижчих рівнях знайде посилання на поточну сторінку (дивись поле конфігурації markLink). Повертає клас-будівельник.
1. Аргумент ul (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
Метод toggleShow([force, ul]) Перемикає видимість всього меню чи подменю на малих пристроях. Повертає клас-будівельник.
1. Аргумент force (булево, опціонально, за замовчуванням null). Значення true показує меню або подменю, значення false приховує меню або подменю.
2. Аргумент ul (HTMLElement, опціонально, за замовчуванням null). Елемент з колекції або ul подменю, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
Метод remove() деактивує всі активовані елементи колекції та повертає звичайний вигляд ul. Повертає клас-будівельник.
Властивість get повертає масив активованих елементів колекції. Повинна бути викликана останнім в ланцюгу викликів.

Події

UI.Menu() генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на <ul> на якому активовано компонент.

UI.activated компонент активовано.
UI.unactivated компонент деактивовано.
UI.beforeShow все меню чи подменю буде показано.
UI.showed все меню чи подменю показано.
UI.beforeHide все меню чи подменю буде приховано.
UI.hidden все меню чи подменю приховано.
UI.beforeRemove компонент буде видалено та деактивовано.
UI.removed компонент видалено та деактивовано.

Поглиблений доступ

Як тільки компонент буде активовано на елементі, елемент отримає об'єкт UI. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад, myUl.UI.toggleButton щоб отримати елемент кнопки що розвертає/звертає меню. myUl.UI.Builder повертає екземпляр класу-будівельника.

UI фреймворк

Залежності

Початок роботи з UI

Типографіка

Заголовок h1 в 2 рядкидругий рядок

Заголовок h2 в 2 рядкидругий рядок

Заголовок h3 в 2 рядкидругий рядок

Заголовок h4 в 2 рядкидругий рядок

Заголовок h5 в 2 рядкидругий рядок

Сітка

Допоміжні CSS-класи

Повідомлення

Header

Header

Header

Header

Header

Таблиці

Форми

Допоміжні класи елементів форми

Звичайні елементи форми

Інлайнові елементи форми

Кнопки

Групування елементів форми

Компонент форми

Методи UI

Блокування вузлів та елементів

Css селектори UI в сценаріях JS

Таби

Поля об'єкта конфігурації

клас-будівельник

Властивості та методи класу-будівельника

Події

Поглиблений доступ

Перемикання відображення елемента

Порада

Аргументи метода

Події

Перехід до елементу

Порада

Аргументи метода

Події

Підказка, що випливає

Випадкове зображення

Порада

Аргументи метода

клас-будівельник

Властивості та методи класу-будівельника

Події

Поглиблений доступ

Повідомлення

Поля конфігурації метода

клас-будівельник

Властивості та методи класу-будівельника

Події

Поглиблений доступ

Вікно, що випливає

Привіт!

Привіт!

Порада

Аргументи метода

клас-будівельник

Властивості та методи класу-будівельника

Події

Поглиблений доступ

Обмеження рядка вводу

Порада

Аргументи метода

клас-будівельник

Властивості та методи класу-будівельника

Події

Поглиблений доступ

Input type="file"

Поля об'єкту конфігурації

клас-будівельник

Властивості та методи класу-будівельника

Події

Поглиблений доступ

Input type="range"

Поля об'єкту конфігурації

Заголовок h1 в 2 рядки
другий рядок

Заголовок h2 в 2 рядки
другий рядок

Заголовок h3 в 2 рядки
другий рядок

Заголовок h4 в 2 рядки
другий рядок

Заголовок h5 в 2 рядки
другий рядок