# Введиние

Логотип PipUI

**PipUI** является кроссбраузерным фреймворком веб-интерфейсов для их быстрой и адаптивной верстки. Распространяется свободно под лицензией [MIT](https://en.wikipedia.org/wiki/MIT_License). На сегодняшний день **PipUI** предлагает широкий набор компонентов: 1. Базовый набор 2. Стили отступов 3. Цветовые наборы 4. Стили Grid сетки 5. Панель навигации 6. Выпадающее меню 7. Постраничная навигация 8. Формы и компоненты форм 9. Кнопки 10. Полосы прогресса 11. Меню навигации 12. Модальные окна 13. Оповещения 14. Подтверждения действий 15. Вкладки 16. Хлебные крошки 17. Спойлеры 18. Таблицы 19. Панели ББ-кодов 20. ББ-коды 21. Валидаторы форм 22. Индексы полей ввода 23. Всплывающие подсказки 24. Подсвечивающиеся блоки 25. Всплывающие блоки 26. Слайдеры 27. Автозаполнения 28. Селекторы тегов 29. Блоки оповещений 30. Селекторы дат и времени 31. Якоря # Скачать [Скачать последнюю версию](https://github.com/pipui/pipui/releases/download/v1.6.0a/PipUI.v1.6.0.compressed.zip) [Скачать исходный код](https://github.com/pipui/pipui/archive/refs/tags/v1.6.0a.zip) Все релизы вы можете найти в нашем CDN [https://cdn.pipui.ru](https://cdn.pipui.ru/) # Начало работы Начиная с PipUI версии 2, фреймворк больше не использует зависимости от jQuery и jQuery Easing. В качестве иконок мы по прежнему используем [Font Awesome](https://fontawesome.com/v6/search), который является не обязательной библиотекой. Для использования фреймворка, его необходимо подключить в HTML код на странице между тегами \ {% code title="PipUI CDN" %} ```html ``` {% endcode %} # Базовый набор Набор скриптов и стилей отвечающих за работу основных функций фреймворка и его компонентов Одним из важнейших элементов в стилизации выступает класс `.container`, который служит контейнером для адаптивной верстки. Именно с него и стоит начинать свою верстку страницы. ## Брейкпоинты Точки изменения адаптивной верстки представлены ниже {% code title="Responsive breakpoints" lineNumbers="true" %} ```css @media (min-width: 320px) { ... } @media (min-width: 480px) { ... } @media (min-width: 768px) { ... } @media (min-width: 900px) { ... } @media (min-width: 1200px) { ... } @media (min-width: 1400px) { ... } ``` {% endcode %} ## Работа с текстом `.text-center` - Выравнивание текста по центру `.text-left` - Выравнивание текста по левому краю `.text-right` - Выравнивание текста по правому краю `.text-justify` - Выравнивание текста по обеим краям `.text-upper` - Переведет шрифт в верхний регистр `.text-lower` - Переведет шрифт в нижний регистр `.text-capitalize` - Переводит первую букву каждого слова в верхний регистр `.text-bold` - Жирное начертание шрифта `.text-italic` - Наклонный текст `.text-overflow` - Сокращенный текст. Текст будет сокращен до максимальной ширины блока, а вконце предложения будет добавлено троеточие. `.text-strike` - Зачёркнутый текст `.text-underline` - Подчеркнутый текст `.text-overline` - Линия над текстом {% embed url="" %} ## Управление свойством display Поддерживаемые стили display: `.d-none` `.d-block` `.d-inline` `.d-inline-block` `.d-grid` `.d-inline-grid` `.d-flex` `.d-inline-flex` ## Полоса прокрутки Управление полосой прокрутки с помощью заготовленных классов `.of-hidden` - перекрывающее содержимое будет скрыто без видимой полосы прокрутки `.of-visible` - всегда отображать полосу прокрутки и содержимое за пределами блока `.of-auto` - полоса прокрутки отображается по необходимости, если содержимое выходит за пределы блока `.of-auto` - полоса прокрутки отображается всегда Все заготовленные классы выше, можно использовать с префиксами .of-x- и .of-y- для полос прокрутки по осям X и Y соответственно, например .of-x-auto ## Курсоры PipUI дает возможность менять курсор элемента используя заготовленные классы. Ниже представлены примеры работы таких классов и их список `.cursor-none .cursor-auto .cursor-default .cursor-pointer .cursor-progress .cursor-help .cursor-move .cursor-text .cursor-cell .cursor-crosshair .cursor-alias .cursor-vertical-text .cursor-no-drop .cursor-copy .cursor-all-scroll .cursor-col-resize .cursor-row-resize .cursor-nesw-resize .cursor-nwse-resize .cursor-n-resize .cursor-e-resize .cursor-nw-resize .cursor-grab .cursor-grabbing .cursor-zoom-in .cursor-zoom-out` {% embed url="" %} Пример работы курсоров {% endembed %} ## Вертикальное выравнивание Вертикальное выравнивание позволяет изменить положение элементов по вертикали `.v-align-top` - выравнивает **inline** элемент в блоке по верхнему краю `.v-align-bottom` - выравнивает **inline** элемент в блоке по нижнему краю `.v-align-center` - выравнивает **inline** элемент в блоке по центру `.v-align-baseline` - выравнивает базовую линию текущего элемента по базовой линии родителя `.v-align-sub` - выравнивает **inline** элемент в блоке под нижней линией `.v-align-super` - выравнивает **inline** элемент в блоке над верхней линией `.v-align-text-bottom` - нижняя граница элемента выравнивается по самому нижнему краю текущей строки `.v-align-text-top` - верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки ## Прозрачность элементов В PipUI заготовлены классы и для прозрачности элементов от `.opacity-0` до `.opacity-10` с шагом 1. (В стилях это **0.1**, следовательно 10 - это 1 или же 100%) ## Позиционирование Позиционировать элементы можно используя классы: `.fixed` - фиксированное позиционирование, которое двигает элемент вместе с прокруткой страницы `.absolute` - абсолютное позиционирование выставляет элемент на странице не учитывая ее прокрутку `.relative` - относительное позиционирование. Блоки внутри данного, если им указано абсолютное позиционирование, будут выравниваться относительно его позиции `.static` - статичное позиционирование (по умолчанию) Управлять позицией относительно верхнего, правого, нижнего, левого краев можно задать, воспользовавшись классами от `.top-0` до `.top-64`, от `.right-0` до `.right-64`, от `.bottom-0` до `.bottom-64`, от `.left-0` до `.left-64` соответственно. Данные классы можно использовать с шагом в 4, например `.top-0` , `.top-4` , `.top-8` и т.д. Помимо этого, Вы можете контролировать и позиционные индексы, относительно оси Z от `.zid-0` до `.zid-10` # Отступы Если Вам необходимо добавить отступ к элементу, то в PipUI есть набор готовых стилей для данных операций ## Внутренние отступы (padding) Общие отступы (*padding*): От `.p-0` до `.p-100` с шагом 4 Отступы по верхнему и нижнему краям (*padding-top/padding-bottom*): От `.py-0` до `.py-100` с шагом 4 Отступы по левому и правому краям (*padding-left/padding-right*): От `.px-0` до `.px-100` с шагом 4 Отступы по левому и правому краям (*padding-left/padding-right*): От `.px-0` до `.px-100` с шагом 4 Отступы по левому краю (*padding-left*): От `.pl-0` до `.pl-100` с шагом 4 Отступы по правому краю (*padding-right*): От `.pr-0` до `.pr-100` с шагом 4 Отступы по верхнему краю (*padding-top*): От `.pt-0` до `.pt-100` с шагом 4 Отступы по нижнему краю (*padding-bottom*): От `.pb-0` до `.pb-100` с шагом 4 ## Внешние отступы (margin) Общие отступы (*margin*): От `.m-0` до `.m-100` с шагом 4 Отступы по верхнему и нижнему краям (*margin-top/margin-bottom*): От `.my-0` до `.my-100` с шагом 4 Отступы по левому и правому краям (*margin-left/margin-right*): От `.mx-0` до `.mx-100` с шагом 4 Отступы по левому и правому краям (*margin-left/margin-right*): От `.mx-0` до `.mx-100` с шагом 4 Отступы по левому краю (*margin-left*): От `.ml-0` до `.ml-100` с шагом 4 Отступы по правому краю (*margin-right*): От `.mr-0` до `.mr-100` с шагом 4 Отступы по верхнему краю (*margin-top*): От `.mt-0` до `.mt-100` с шагом 4 Отступы по нижнему краю (*margin-bottom*): От `.mb-0` до `.mb-100` с шагом 4 Автоматические отступы: `.mx-auto`, `.my-auto`, `.m-auto` # Палитра цветов PipUI дает возможность менять цвет текста и фона без необходимости изменять CSS стили. Для этого в нем заготовлены специальные классы, а палитра выбрана на основе Material UI от Google. Чтобы задать цвет фона элемента, используйте класс `.bg-{COLOR}-{INTENSITY}`, где *{COLOR}* - цвет, а *{INTENCITY}* - интенсивность от 50 до 900 с шагом 100 (после 100). Чтобы задать цвет текста, используйте класс `.text-{COLOR}-{INTENSITY}` {% hint style="info" %} Цвета тона 500 можно использовать без суффикса -500 {% endhint %} {% embed url="" %} Пример работы цветовых наборов {% endembed %} *Вы можете менять цвет текста и фона наведения, используя те же имена классов с суффиксом -h, в случае с префиксом -i, класс будет первостепенно иметь префикс -h, а уже затем -i, например* `.bg-blue-gray-h-i` # Grid сетка Данный компонент позволяет быстро произвести разметку блоков внутри контейнера. Для определения grid контейнера используется класс `.d-grid` или его алиас `.grid`. Количество колонок и рядов внутри grid контейнера варьируется от 1 до 12, которые используют классы от `.columns-1` до `.columns-12` (для колонок) и `.rows-1` до `.rows-12` (для рядов) соответственно. Позиции колонок внутри контейнера определяются классами с патерном `.column-{1-12}-{1-12}` при этом второй параметр может отсутствовать, если он равен первому. {% embed url="" %} Пример работы колонок в Grid сетке (с учетом responsive) {% endembed %} Отступы внутри grid сетки можно выставлять с помощью классов от `.gap-0` до `.gap-100` с шагом 4. Для отступов внутри сетки между рядами используйте классы от `.gap-row-0` до `.gap-row-100`, а для отступов между колонками от `.gap-column-0` до `.gap-column-100` так же с шагом 4. # Панель навигации ## Общая информация В качестве навигации по сайту, разработчики часто используют навигационную панель, которую, как правило, располагают в верхней части сайта. В фреймворке PipUI собран компонент для быстрого формирования такой панели ### Разметка ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} Цвет панели может быть изменен с помощью классов цвета фона из палитры (.bg-{COLOR}) Вы можете добавить клсаа `.container` к объекту `.navbar-container`, если хотите, чтобы контейнер был адаптивным. Для изменения тёмной палитры текста, можно добавить класс `.navbar-text-light` к блоку `.navbar` в этом случае все текстовые элементы будут светлыми. В панели навигации есть 3 секции: левая (`.nav-left`), правая(`.nav-right`)\ и центральная(`.nav-center`). Чтобы их добавить необходимо внутрь\ блока `.navbar-container` поместить необходимые секции. Именно в эти секции и следует помещать основной список меню. ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### Выпадающее меню Панель навигации поддерживает выпадающее меню, которое инициализируется автоматически, но при желании можно это сделать и вручную, согласно [документации](/components/dropdown#inicializaciya-vypadayushego-spiska). ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Javascript Панель навигации может работать через Javascript. В этом бывает необходимость, когда требуется управлять состоянием меню на адаптивной верстке (Открытие/закрытие меню) По умолчанию инициализация происходить автоматически при клике на меню, но это можно сделать и самостоятельн ### Инициализация Для инициализации меню вручную, необходимо создать экземпляр класса PipUI.Navbar. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object Первый параметр - объект или строка ссылающаяся на элемент. Второй параметр - объект опций ```html ``` ### Опции ``` // Выводить в консоль отладку debug: false // Функция обратного вызова по завершению отображения блока openCallback: undefined // Функция обратного вызова по завершению скрытия блока closeCallback: undefined ``` ### Методы ```javascript let navbar = new PipUI.Navbar('#navbar'); navbar.getID() // Вернет уникальный идентификатор панели navbar.setOptions(object) // Изменить опции панели navbar.getOptions() // Получить опции панели navbar.hide(callback) // Скрыть панель // Параметр callback является приоритетной функцией обратного // вызова при завершении скрытия, если она задана и через опции navbar.show(callback) // Показать блок // Параметр callback является приоритетной функцией обратного // вызова при завершении отображения, если она задана и через опции navbar.isOpen() // Текущее состояние панели ``` ### События

Триггер	Описание	Инициатор
show-navbar-pipui	Срабатывает при открытии меню на мобильных устройствах	.navbar
hide-navbar-pipui	Срабатывает при закрытии меню на мобильных устройствах	.navbar

# Выпадающее меню ## Общая информация Компонент выпадающего меню имеет многоуровневую систему вложенности, что позволяет определять множественные разделы и подразделы {% embed url="" %} Пример простейшего выпадающего меню {% endembed %} ```html ``` Выпадающее меню может быть многоуровневым. Для этого одному из элементов `.dropdown-item` необходимо добавить\ класс `.dropdown-submenu` и поместить внутрь него такой же код, как и в одноуровневом меню и заменить класс триггера `.dropdown-trigger` на `.dropdown-submenu-trigger` ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} Для управления положением выпадающего меню, вы можете использовать атрибуты\ `data-dropdown-direction-x` и `data-dropdown-direction-y` Атрибут `data-dropdown-direction-x` принимает значения **left** или **right** Атрибут `data-dropdown-direction-y` принимает значения **up** или **down** ## Javascript По умолчанию объекты не инициализированных выпадающих списков создаются автоматически и сохраняются компонентом **PipUI.Storage** Вы можете создавать и управлять объектами выпадающих списков с помощью Javascript. Для этого необходимо создать объект PipUI.Dropdown и передать в него параметры ```html

``` ### Инициализация выпадающего списка ```javascript let dropdown = new PipUI.Dropdown(); ``` Объект Dropdown может содержать в себе 3 аргумента 1. HTMLElement или строка элемента на странице 2. Объект набора опций 3. Механизм обработки элемента. true - для создания нового, false - для инициализации из существующего выпадающего списка ### Опции ``` // Выводить в консоль отладку debug: false // Опции шаблонов templates: { // Основной элемент выпадающего списка wrapper: '' // Элемент триггера, открывающего выпадающий список trigger: '' // Контейнер для списка list: '' Элемент списка item: '' } // Имя кнопки выпадающего списка name: '' // URL адрес кнопки url: '' // Массив со списком элементов list: [] // Направление в которое будет открываться список по оси X direction_x: 'right' // Направление в которое будет открываться список по оси Y direction_y: 'down' // По какому событию будет открываться список openEvent: 'click' // По какому событию будет открываться подменю submenuOpenEvent: 'hover' // Функция обратного вызова по завершению открытия showCallback: undefined // Функция обратного вызова по завершению скрытия hideCallback: undefined ``` ### Методы ```javascript let dropdown = new PipUI.Dropdown(); dropdown.getID() // Вернет уникальный идентификатор блока dropdown.setOptions(object) // Изменить опции блока. DOM не будет изменен // до вызова метода dropdown.update() dropdown.getOptions() // Получить опции блока dropdown.update() // Отрендерит список заново dropdown.isOpen() // Открыт ли список dropdown.hide(callback) // Скрыть список // Параметр callback является приоритетной функцией обратного // вызова при завершении скрытия, если она задана и через опции dropdown.show(callback) // Отобразить список // Параметр callback является приоритетной функцией обратного // вызова при завершении отображения, если она задана и через опции ``` ### События | Триггер | Описание | Инициатор | | ------------------- | ------------------------------- | --------- | | show-dropdown-pipui | Срабатывает при открытии списка | .dropdown | | hide-dropdown-pipui | Срабатывает при закрытии списка | .dropdown | # Постраничная навигация ## Общая информация Блок постраничной навигации состоит из панели пронумерованных страниц. Для работы стилей постраничной навигации, контейнеру списка необходимо\ задать класс `.pagination` а всем его элементам, класс `.pagination-page` ```html

``` {% embed url="" %} Пример работы кода выше {% endembed %} Класс `.disabled` элемента списка служит для отключения переключателя. ## Javascript Блок постраничной навигации можно создать при помощи Javascript. В этом случае у вас откроется больше возможность без перезагрузки страницы. Для этого вам необходимо создать экземпляр класса `PipUI.Pagination` и передать в него необходимые параметры. Данный класс имеет в себе два параметра 1. HTMLElement - элемент или строковая ссылка на элемент 2. Object - объект с набором опций ### Пример ```html

``` ### Опции Второй параметр объекта PipUI.Pagination поддерживает следующие параметры ``` // Выводить в консоль отладку debug: false // Шаблон адреса URL страницы. На место {NUM} будет подставлен номер страницы url: '/page-{NUM}' // Что должно произойти после нажатия на селектор // Поддерживаемые значения: // redirect - произойдет переход на страницу, указанную в ссылке селектора // location - URL страницы изменится, но перехода не произойдет // none - отсутствие действия // Во всех случаях визуальная составляющая будет обновлена method: 'redirect' // Тип метода генерации шаблона постраничной навигации. // Поддерживаемые значения по умолчанию от 1 до 4 // Вы можете передать свое значение, но перед этим необходимо создать свой метод, добавив его через опцию types type: 1 // Кол-во записей records: 0 // Текущий номер страницы current: 1 // Максимальное кол-во элементо вна страницу max: 10 // Функция обратного вызова, которая будет выполнена при изменении страницы changePageCallback: undefined // Функция обратного вызова, которая будет выполнена при рендере updateCallback: undefined // Типы методов генерации шаблона постраничной навигации types: {...} ``` ### Методы ```javascript let pagination = new PipUI.Pagination('#pagination'); pagination.getID() // Вернет уникальный идентификатор pagination.setOptions(object) // Изменить опции. DOM не будет изменен // до вызова метода pagination.update() pagination.getOptions() // Получить опции pagination.update() // Отрендерить содержимое заново pagination.getPages() // Вернуть общее кол-во страниц pagination.getPrev() // Вернуть номер предыдущей страницы pagination.getNext() // Вернуть номер следующей страницы pagination.setPage(int) // Установить новую страницы. Содержимое будет обновлено pagination.getType() // Получить объект типа метода генерации ``` ### Новые типы генерации Для создания или изменения текущего типа генерации, необходимо передать в опции параметр types со своими значениями. {% hint style="info" %} Объект должен содержать в себе метод render, который принимает параметр\ self - реферальная переменная от текущего экземпляра класса (this). Данный метод должен возвращать новый список страниц в виде строки HTML {% endhint %} #### Пример нового типа ``` let pagination = new PipUI.Pagination('#pagination', { records: 100, types: { 5: { render: function(self){ return '

'; } } } }); ``` ### События | Триггер | Описание | Инициатор | | ----------------------- | ---------------------------------- | ----------- | | change-pagination-pipui | Срабатывает при изменении страницы | .pagination | | update-pagination-pipui | Срабатывает при обновлении списка | .pagination | | | | | # Формы Формы и компоненты форм Формы в наше время являются неотъемлемой частью сайта, где есть какие-либо поля ввода. PipUI имеет в себе компонент быстрой стилизации всех существующих элементов форм и даже больше. Для начала работы подготовленных стилей, необходимо добавить компоненту формы класс `.input` {% embed url="" %} Простой пример формы {% endembed %} ## Input ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Select ```html ``` ### Multiple Класс `.input` поддерживает и мультиселекторы ```html ``` {% embed url="" %} Пример работы селекторов {% endembed %} ## Textarea ```html ``` ### Javascript Помимо стандартного поле ввода со стилями, textarea может быть инициализована с помощью Javascript, что даст дополнительные возможности управления данной формой. Например, количество введенных строк, их копирование и др. Для инициализации достаточно использовать следующий скрипт ```html ``` ## File По умолчанию селектор выбора файлов имеет стили заданные браузером и которые не поддаются на данный момент кастомизации, но это можно исправить, если поместить такой селектор в контейнер `label.input-file` и кастомизировать его, а сам селектор просто скрыть, что мы и сделали. ```html Выберите файл ``` ## Checkbox На данный момент флажки и переключатели плохо поддаются изменениям стандартных стилей браузеров, но мы так же нашли из этого выход. ```html Check it! ``` ## Radio ```html ``` ## Switch По умолчанию в браузерах нет данных переключателей, но как и в случае с селекторами файлов, мы сделали это возможным. Для этого необходимо поместить checkbox с классом `.input` в контейнер `label.input-switch` ```html ``` ## Input Block Блоки помогают использовать дополнительные возможности внутри общего контейнера. В качестве контейнера необходимо создать блок с классом `.input-block` и поместить в него форму ввода. ```html

``` ### Label Ярлыки позволяют добавить зависимое описание, при клике на которое, у формы появляется фокусировка. ```html

``` ### Helper Вспомогательные блоки служат в качестве дополнительной информации, которая появляется при наведении на контейнер. Данный блок можно использовать вместе с [ярлыками](#label). ```html

Block Helper Here

``` ## Prepend / Append Иногда бывают ситуации, когда необходимо вывести дополнительный контент до или после поля ввода или селектора. Для этих случаев есть дополнительный контейнер\ `.input-append-prepend`, который так же совместим с `.input-block`. Блок `.prepend` выводит дополнительный контент перед полем ввода или селектором, а блок `.append`, соответственно, после. Оба блока являются не обязательными в контейнере и могут использоваться как отдельно, так и вместе. ```html

My Label

Hello

Скрытая информация, появляющаяся при наведении

``` # Кнопки PipUI имеет в своем наборе компонентов множество вариаций кнопок, совместно с другими компонентами. Для их стилизации необходимо добавить элементу класс `.btn` ```html ``` {% embed url="" %} Примеры кнопок в разных состояниях {% endembed %} Кнопки можно комбинировать и с другими компонентами, например с [цветовыми наборами](/components/palette), [отступами](/components/margin) и др. {% embed url="" %} Пример кастомизации кнопок {% endembed %} # Полосы прогресса ## Общая информация Использование полос прогресса связано с определением статуса загрузки/нагрузки чего-либо. PipUI дает возможность без особых усилий добавить такие полосы в свое приложение. {% code title="Пример прогресс бара" lineNumbers="true" %} ```html

35%

Label text

``` {% endcode %} {% embed url="" %} Пример работы кода выше {% endembed %} {% hint style="warning" %} Атрибут `data-progress-type` является обязательным, т.к. для каждого типа прогресса своя стратегия обработки стилей и скриптов. {% endhint %} На данный момент поддерживаются 2 типа полос прогресса: **linear** и **radial** Т.к. radial тип работает совершенно иначе, нежели linear. Его инициализация требуется через canvas и javascript. ```html

Text

Label

``` ## Javascript Управление полосой прогресса можно производить через Javascript, обращаясь к экземпляру класса PipUI.Progress ```html

``` Класс PipUI.Progress поддерживает 3 параметра 1. HTMLElement или строковая ссылка на элемент 2. Объект опций 3. Стратегия создания (true/false) В примере выше мы передали 3й параметр, который означает, что прогресс бар будет создан из опций, которые мы должны указать во втором параметре. ### Опции

// Выводить в консоль отладку
debug: false

// Текст прогресс бара
text: ''

// Дополнительный текст для прогресс бара
label: ''

// Размер прогресс бара в процентах
progress: 0

// Тип прогресс бара
type: 'linear'

// Объект настроек стилей
styles: {
    width: '100%'
    height: '28px'
    padding: 4
    barColor: '#fff'
    progressColor: '#212121'
}

// Объект настроек шаблона
templates: {
    text: '<div class="progress-text"></div>'
    label: '<div class="progress-label"></div>'
}

// Объект типов
types: {...}

### Методы ``` let progress = new PipUI.Progress('#progress'); progress.getID() // Вернет уникальный идентификатор progress.setOptions(object) // Изменить опции. DOM не будет изменен // до вызова метода progress.update() progress.getOptions() // Получить опции progress.setProgress(float) // Изменить размер прогресс бара в процентах. DOM будет обновлен progress.setText(string) // Изменить текст прогресс бара. DOM будет обновлен progress.setLabel(string) // Изменить дополнительный текст. DOM будет обновлен progress.update() // Обновить DOM ``` ### События

Триггер	Описание	Инициатор
change-progress-pipui	Срабатывает при изменении размера полосы прогресс бара	.progress
change-text-progress-pipui	Срабатывает при изменении текста внутри прогресс бара	.progress
change-label-progress-pipui	Срабатывает при изменении дополнительного текста прогресс бара	.progress
update-progress-pipui	Срабатывает при полном обновлении прогресс бара	.progress

### Типы прогресс баров Для изменения типов прогресс баров, необходимо передать в объект types опций свои параметры. {% hint style="warning" %} Важно чтобы тип имел в себе 3 обязательных ключа: **template, create, progress** 1. template - HTML строка шаблона для .progress-bar 2. create - функция создания прогресс бара 3. progress - изменение размера прогресс бара {% endhint %} # Меню навигации ## Общая информация Меню навигации позволяет быстро переходить по разделам и категориям. ### Простое меню ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### Многоуровневое меню Меню навигации поддерживает многоуровневое меню. ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### Меню под спойлером Вы так же можете использовать данное меню вместе со [спойлерами](/components/collapse). ```html ``` ### Иконки Если есть необходимость добавить иконки, Вы можете добавить блок `.link-icon` внутрь блока `.nav-menu-link` с вашей иконкой или текстом # Модальные окна ## Общая информация Когда необходимо вывести дополнительный контент, а создавать для этого отдельную страницу нет необходимости, то на помощь нам придут модальные окна. ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} Модальные окна работают через Javascript и объект PipUI.Modal При использовании открытия модального окна через атрибуты, экземпляр класса PipUI.Modal создается автоматически, как показано в примере выше и хранится в PipUI.Storage ## Javascript Инициализация и управление может быть произведено напрямую через Javascript. Для того, чтобы инициализировать модальное окно, требуется создать экземпляр класс PipUI.Modal и передать в него необходимые параметры. Класс PipUI.Modal принимает 3 параметра 1. HTMLElement или строковая ссылка на элемент 2. Объект опций 3. Стратегия создания (true/false) ```html

``` Если вы сформирует HTML код модального окна самостоятельно и зададите только первый параметр, то все параметры будут извлечены из HTML кода автоматически. ### Опции ``` // Выводить в консоль отладку debug: false // Заголовок модального окна. Можно использовать HTML header: '' // Тело модального окна. Можно использовать HTML body: '' // Нижняя часть модального окна. Можно использовать HTML footer: '' // Функция обратного вызова, срабатываемая при открытии модального окна showCallback: undefined // Функция обратного вызова, срабатываемая при закрытии модального окна hideCallback: undefined // Функция обратного вызова, срабатываемая при завершении открытия модального окна showedCallback: undefined // Функция обратного вызова, срабатываемая при завершении закрытия модального окна hidedCallback: undefined // Функция обратного вызова, срабатываемая при стратегии обновления updateCallback: undefined // Функция обратного вызова, срабатываемая при стратегии инициализации initCallback: undefined // Класс открытого модального окна targetActiveClass: 'modal-active' // Настройка шаблона модального окна при инициализации по стратегии создания templates: { // Основной код модального окна modal: '' // Код заголовка модального окна header: '' // Тело модального окна body: '' // Нижняя часть модального окна footer: '' // Код кнопки закрытия модального окна close: '' } ``` ### Методы ```javascript let modal = new PipUI.Modal('#mymodal'); modal.getID() // Вернет уникальный идентификатор модального окна. // Он так же хранится в блоке .modal modal.setOptions(object) // Изменить опции модального окна. DOM не будет изменен // до вызова метода modal.update() modal.getOptions() // Получить опции модального окна modal.update() // Отрендерит модальное окно заново из текущих опций modal.isOpen() // Открыто ли модальное окно modal.hide(callback) // Скрыть модальное окно // Параметр callback является приоритетной функцией обратного // вызова при начале скрытия, если она задана и через опции modal.show(callback) // Отобразить модальное окно // Параметр callback является приоритетной функцией обратного // вызова при начале отображения, если она задана и через опции ``` ### События | Триггер | Описание | Инициатор | | ------------------ | -------------------------------------------------- | --------- | | update-modal-pipui | Срабатывает при стратегии обновления | .modal | | init-modal-pipui | Срабатывает при стратегии инициализации | .modal | | show-modal-pipui | Срабатывает при начале открытия модального окна | .modal | | hide-modal-pipui | Срабатывает при начале закрытия модального окна | .modal | | showed-modal-pipui | Срабатывает при окончании открытия модального окна | .modal | | hided-modal-pipui | Срабатывает при окончании закрытия модального окна | .modal | # Оповещения ## Общая информация Компонент оповещений позволяет, при срабатывании определенных событий, донести до пользователя важную информацию. Данный компонент спроектирован исключительно для работы через Javascript, однако при большом желании, HTML код оповещения можно сформировать и вручную. ## Создание через атрибуты Для создания оповещения через атрибуты, необходимо добавить инициатору события вызова атрибут `data-alert`. Опции оповещения можно задать\ через атрибуты `data-alert-{NAME}`. ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### Поддерживаемые атрибуты

// Текст оповещения
data-alert-text

// Название оповещения
data-alert-title

// Местоположение появления оповещения
data-alert-placement

// Кол-во миллисекунд, через которое оповещение будет закрыто. По умолчанию 3000 (3 сек.)
data-alert-autoclose

// Будет ли отображен оверлей. Принимает значения true или false. По умолчанию false
data-alert-overlay

## Создание через Javascript Для создания оповещения через javascript, необходимо создать экземпляр класса PipUI.Alert и передать в него один параметр опций. Важнейшим свойством объекта опций является text и title, которые задают текст и название окна соответственно. При желании эти свойства могут быть опущены. ```javascript new PipUI.Alert({text: 'Hello world!', title: 'Welcome'}) ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### Опции ``` // Выводить в консоль отладку debug: false // Текст оповещения text: '' // Название оповещения title: '' // Местоположение появления оповещения placement: 'bottom-right' // Иконка оповещения icon: '' // Отображать ли оверлей. Если хоть у одного открытого окна задан данный параметр, // то оверлей будет отображаться до тех пор, пока такие оповещения открыты overlay: false // Автозакрытие оповещения. Если задано 0, то оповещение // не будет закрываться автоматически autoclose: 3000 // Отображать ли кнопку закрытия внутри оповещения closeButton: true // Можно закрыть при нажатии на само оповещение closeClick: false // Класс открытого оповещения openedClass: 'alert-active' // Функция обратного вызова при начале открытия оповещения openCallback: undefined // Функция обратного вызова при закрытияе открытия оповещения closeCallback: undefined // Функция обратного вызова при окончании открытия оповещения openedCallback: undefined // Функция обратного вызова при окончании закрытия оповещения closedCallback: undefined // Настройки шаблонов templates: { // Шаблон окна оповещения alert: '...' // Шаблон кнопки закрытия внутри оповещения close: '' } ``` ### Методы ```javascript let alert = new PipUI.Alert(); alert.getID() // Вернет уникальный идентификатор оповещения alert.setOptions(object) // Изменить опции оповещения. DOM не будет изменен // до вызова метода alert.update() alert.getOptions() // Получить опции оповещения alert.update() // Отрендерит окно заново alert.isOpen() // Открыто ли оповещение alert.close(callback) // Закрыть оповещение. Дальнейшая работа с ним будет невозможна // Параметр callback является приоритетной функцией обратного // вызова при начале закрытия, если она задана и через опции alert.open(callback) // Отобразить оповещение // Параметр callback является приоритетной функцией обратного // вызова при начале отображения, если она задана и через опции ``` ### События | Триггер | Описание | Инициатор | | ------------------ | ---------------------------------------------- | --------- | | open-alert-pipui | Срабатывает при начале открытия оповещения | .modal | | opened-alert-pipui | Срабатывает при завершении открытия оповещения | .modal | | close-alert-pipui | Срабатывает при начале закрытия оповещения | .modal | | closed-alert-pipui | Срабатывает при завершении закрытия оповещения | .modal | ## Дополнительная информация Положения появления оповещения задаются в формате **{VERTICAL}-{HORIZONTAL}** Поддерживаемые положения по вертикали: top, center, bottom Поддерживаемые положения по горизонтали: left, center, right # Подтверждения действий ## Общая информация Как известно, стандартные методы Javascript не позволяют кастомизировать метод confirm(), по этому мы решили добавить такую возможность в наш фреймворк. Данный компонент спроектирован исключительно для работы через Javascript, однако при большом желании, HTML код подтверждения можно сформировать и вручную. ## Создание через атрибуты Для создания подтверждения через атрибуты, необходимо добавить инициатору события вызова атрибут `data-confirm`. Опции подтверждения можно задать\ через атрибуты `data-confirm-{NAME}`. ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### Поддерживаемые атрибуты

// Текст подтверждения
data-confirm-text

// Название подтверждения
data-confirm-title

// Местоположение появления подтверждения
data-confirm-placement

// Кол-во миллисекунд, через которое оповещение будет закрыто. По умолчанию 0 (бесконечно)
data-confirm-autoclose

// Будет ли отображен оверлей. Принимает значения true или false. По умолчанию true
data-confirm-overlay

// Имя функции, вызываемой при подтверждении
data-confirm-confirm

// Имя функции, вызываемой при отмене. Данная функция не будет вызвана,
// если сработало автозакрытие.
data-confirm-cancel

// Имя кнопки подтверждения
data-confirm-confirm-btn

// Имя кнопки отмены
data-confirm-cancel-btn

## Создание через Javascript Для создания подтверждения через javascript, необходимо создать экземпляр класса PipUI.Confirm и передать в него один параметр опций. Важнейшим свойством объекта опций является text и title, которые задают текст и название окна соответственно. При желании эти свойства могут быть опущены. Для обработки события нажатия на одну из кнопок, можно использовать параметры объекта опций confirm и/или cancel, передав в них функции обратного вызова. ```javascript new PipUI.Confirm({text: 'Hello world!', title: 'Welcome', confirm: () => { console.log('Hello') }}) ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### Опции ``` // Выводить в консоль отладку debug: false // Текст подтверждения text: '' // Название подтверждения title: '' // Функция обратного вызова при нажатии на кнопку подтверждения confirm: undefined // Функция обратного вызова при нажатии на кнопку отмены. Не выполняется при // срабатываении автозакрытия cancel: undefined // Местоположение появления подтверждения placement: 'top-center' // Отображать ли оверлей. Если хоть у одного открытого окна задан данный параметр, // то оверлей будет отображаться до тех пор, пока такие подтверждения открыты overlay: true // Автозакрытие подтверждения. Если задано 0, то подтверждения // не будет закрываться автоматически. По умолчанию 0. autoclose: 0 // Класс открытого подтверждения openedClass: 'confirm-active' // Текст внутри кнопки подтверждения confirmBtn: '' // Текст внутри кнопки отмены cancelBtn: '' // Функция обратного вызова при начале открытия подтверждения openCallback: undefined // Функция обратного вызова при закрытияе открытия подтверждения closeCallback: undefined // Функция обратного вызова при окончании открытия подтверждения openedCallback: undefined // Функция обратного вызова при окончании закрытия подтверждения closedCallback: undefined // Настройки шаблонов templates: { // Шаблон окна подтверждения confirm: '...' } ``` ### Методы ```javascript let confirm = new PipUI.Confirm(); confirm.getID() // Вернет уникальный идентификатор подтверждения confirm.setOptions(object) // Изменить опции подтверждения. DOM не будет изменен // до вызова метода confirm.update() confirm.getOptions() // Получить опции подтверждения confirm.update() // Отрендерит окно заново confirm.isOpen() // Открыто ли подтверждение confirm.confirm() // Выполнить функцию подтверждения. // Аналог нажатия на кнопку подтвердить confirm.cancel() // Выполнить функцию отмены. // Аналог нажатия на кнопку отменить. confirm.close(callback) // Закрыть подтверждение. Дальнейшая работа с ним будет невозможна // Параметр callback является приоритетной функцией обратного // вызова при завершении закрытия, если она задана и через опции confirm.open(callback) // Отобразить подтверждение // Параметр callback является приоритетной функцией обратного // вызова при завершении отображения, если она задана и через опции ``` | Триггер | Описание | Инициатор | | --------------------- | ------------------------------------------------- | --------- | | open-confirm-pipui | Срабатывает при начале открытия подтверждения | .modal | | opened-confirm-pipui | Срабатывает при завершении открытия подтверждения | .modal | | close-confirm-pipui | Срабатывает при начале закрытия подтверждения | .modal | | closed-confirm-pipui | Срабатывает при завершении закрытия подтверждения | .modal | | confirm-confirm-pipui | Срабатывает при подтверждающем действии | .modal | | cancel-confirm-pipui | Срабатывает при отмене | .modal | ## Дополнительная информация Положения появления подтверждения задаются в формате **{VERTICAL}-{HORIZONTAL}** Поддерживаемые положения по вертикали: top, center, bottom Поддерживаемые положения по горизонтали: left, center, right # BB-коды В составе фреймворка PipUI есть компонент с заготовленными стилями для BB-кодов. Всё что необходимо сделать, это выставить необходимую разметку или классы Жирное начертание шрифта (теги `[b][/b]`) ```html Жирное начертание шрифта ``` Наклонный текст (теги `[i][/i]`) ```html Наклонный текст ``` Зачеркнутый текст (теги `[s][/s]`) ```html Зачеркнутый текст ``` Подчеркнутый текст (теги `[u][/u]`) ```html Подчеркнутый текст ``` Выравнивание по левому краю (теги `[left][/left]`) ```html

Выравнивание по левому краю

``` Выравнивание по правому краю (теги `[right][/right]`) ```html

Выравнивание по правому краю

``` Выравнивание по центру (теги `[center][/center]`) ```html

Выравнивание по центру

``` Горизонтальная линия (тег `[line]`) ```html

``` Скрытый текст (теги `[spoiler="Показать/Скрыть"][/spoiler]`) ```html

Показать/Скрыть

Скрытый текст!

``` Изображение (теги `[img]``url``[/img]`) ```html

``` Цитата (теги `[quote][/quote]`) ```html

PipUI - 01.01.2019

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, in.

``` Вставка кода (теги `[code][/code]`) ```html

Javascript

alert('PipUI');

``` Вставка **YouTube** проигрывателя (теги `[youtube][/youtube]`) ```html

``` # Всплывающие подсказки ## Общая информация Компонент всплывающих подсказок - это отличная альтернатива стандартным атрибутам title. Используйте атрибут `data-tooltip` вместо стандартного *title*, для работы всплывающих подсказок. Для направления отображаемой подсказки, используйте атрибут `data-tooltip-direction`.\ В качестве значения можно передать одно из доступных значений: up, down, left, right. Вы так же можете использовать альтернативный синтаксис объединив data-tooltip и\ data-tooltip-direction в один из следующих атрибутов: `data-tooltip-up`,\ `data-tooltip-down`, `data-tooltip-left`, `data-tooltip-right` соответственно. ```html По умолчанию | Слева | Сверху | Снизу | Справа | Справа ``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Javascript По умолчанию подсказки инстализируются автоматически при наведении на соответствующий объект. Но вы можете произвести это действие и вручную, создав экземпляр класса `PipUI.Tooltip`, который принимает 2 параметра: 1. Инициатор события (ссылка или объект) 2. Объект опций ### Инициализация подсказки ```html

Tooltip!

``` ### Опции ``` // Выводить в консоль отладку debug: false // Направление выводимой подсказки direction: 'up' // Содержимое подсказки. При инициализации через javascript можно использовать HTML content: '' // Шаблон подсказки template: '' // Класс, который присваивается подсказке при отображении и уберается при исчезании showedClass: 'tooltip-active' // Функция обратного вызова, которая срабатывает при появлении подсказки showCallback: undefined // Функция обратного вызова, которая срабатывает при исчезании подсказки hideCallback: undefined // Функция обратного вызова, которая срабатывает при обновлении подсказки updateCallback: undefined // Объект доступных направлений directions: {...} ``` ### Методы ```javascript let tooltip = new PipUI.Dropdown(); tooltip.getID() // Вернет уникальный идентификатор подсказки tooltip.setOptions(object) // Изменить опции подсказки. DOM не будет изменен // до вызова метода tooltip.update() tooltip.getOptions() // Получить опции подсказки tooltip.update() // Отрендерит подсказку заново. // По умолчанию производится при каждом появлении подсказки tooltip.isOpen() // Отображена ли в текущий момент подсказка tooltip.hide(callback) // Скрыть подсказку // Параметр callback является приоритетной функцией обратного // вызова при завершении скрытия, если она задана и через опции tooltip.show(callback) // Отобразить подсказку // Параметр callback является приоритетной функцией обратного // вызова при завершении отображения, если она задана и через опции ``` ### События | Триггер | Описание | Инициатор | | -------------------- | ------------------------------------------- | --------- | | update-tooltip-pipui | Срабатывает при обновлении тултипа | .tooltip | | show-tooltip-pipui | Срабатывает при начале появления тултипа | .tooltip | | hide-tooltip-pipui | Срабатывает при начале исчезания тултипа | .tooltip | | showed-tooltip-pipui | Срабатывает при окончании появления тултипа | .tooltip | | hided-tooltip-pipui | Срабатывает при окончании исчезания тултипа | .tooltip | # Вкладки ## Общая информация Компонент позволяют разделять контент на вкладки и переключаться по ним, как с помощью прямого обращения, так и через javascript. PipUI позволяет с легкостью реализовать данный подход, используя всего несколько строчек кода ```html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam aut consectetur dicta ea eligendi esse

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, voluptate?

``` {% embed url="" %} Пример работы кода выше {% endembed %} Элемент с классом `.tab-link` и атрибутом `data-tabs-id` яаляется триггером переключения вкладки через javascript. Чтобы javascript не обрабатывал такие вкладки, достаточно убрать атрибут `data-tabs-id`. ## Горизонтальные вкладки Совместно с классом `.tabs`, Вы можете использовать класс `.tabs-horizontal`, который сделает вкладки и их содержимое горизонтальными. ## Javascript Помимо HTML, Вы можете менять активность вкладок через javascript метод `PipUI.Tabs.active`, принимающий 1 входящий параметр **element**, который является элементом содержимого вкладки. Данный метод возвращает true или false в зависимости от того, была ли переключена вкладка или нет. ```javascript PipUI.Tabs.active(document.getElementById('example-tab-1')); // Или TabsComponent.active(document.getElementById('example-tab-1')); ``` {% hint style="info" %} Свойство PipUI.Tabs является ссылкой на объект TabsComponent {% endhint %} Кроме всего прочего, Вы можете манипулировать цветами панели вкладок и их содержимым, отступами и др., используя другие компоненты фреймворка. ```html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam aut consectetur dicta ea eligendi esse, magnam minima, odio perferendis quia saepe totam vitae. Eius facere magnam omnis provident vero.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, voluptate?

``` {% embed url="" %} Пример работы кода выше {% endembed %} ### Опции ```javascript PipUI.Tabs.debug = false; // Вывод дебага в консоль браузера ``` ### Методы ```javascript PipUI.Tabs.active(element); // Активировать вкладку // Параметр element является элементом вкладки ``` ### События | Триггер | Описание | Инициатор | | --------------- | -------------------------------- | --------- | | hide-tabs-pipui | Срабатывает при закрытии вкладки | .tab-id | | show-tabs-pipui | Срабатывает при открытии | .tab-id | # Хлебные крошки Когда необходимо выводить путь до страницы, Вы можете воспользоваться готовым компонентом фреймворка PipUI - хлебные крошки ```html

PipUI Документация Компоненты Хлебные крошки

``` {% embed url="" %} Пример работы кода выше {% endembed %} # Спойлеры ## Общая информация Вы можете скрывать содержимое с помощью спойлеров. ```html Показать/Скрыть

Hidden text

Показать/Скрыть

Hidden text

``` {% embed url="" %} Пример работы кода выше {% endembed %} Для определения триггера, необходимо добавить атрибут `data-collapse` и передать в него ссылку на элемент, который необходимо открыть или закрыть. По умолчанию элементы являются неактивными и закрытыми, чтобы это изменить, добавьте триггеру и блоку класс `.collapse-active`. ## Аккордеон Для создания зависимых спойлеров, разметка отличается и является более сложной, чем обычные спойлеры. ```html

Accordeon #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.

Accordeon #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.

Accordeon #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.

``` {% embed url="" %} Пример работы кода выше {% endembed %} Для триггеров аккордеона, необходимо задать атрибут `data-accordion` и передать в него ссылку на элемент. ## Javascript Вы можете управлять спойлерами и аккордеонами через javascript. По умолчанию инициализация элементов производится автоматически при клике на триггер, а экземпляры классов хранятся компонентом PipUI.Storage (collapse), но их можно инициализировать и вручную с помощью класса PipUI.Collapse. ### Инициализация Для инициализации меню вручную, необходимо создать экземпляр класса PipUI.Collapse. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object. ```html Показать/Скрыть

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

``` {% embed url="" %} Пример работы кода выше {% endembed %} Первый параметр - объект или строка ссылающаяся на элемент. Второй параметр - объект опций. ### Опции ``` // Выводить в консоль отладку debug: false, // Массив триггеров triggers: [], // Настройки анимаций animation: { // Анимация появляения show: { // Тип анимации type: 'slideDown' // Скорость анимации в миллисекундах duration: 200 } // Анимация исчезания hide: { // Тип анимации type: 'slideUp' // Скорость анимации в миллисекундах duration: 200 } } // Спойлер является аккордеоном accordion: false, // Сделать видимым по умолчанию defaultVisible: false, // Класс открытого блока toggleTargetClass: 'collapse-active', // Класс активного триггера toggleTriggerClass: 'active', // Функция обратного вызова при начале появления showStartCallback: undefined, // Функция обратного вызова при начале исчезания hideStartCallback: undefined, // Функция обратного вызова при окончании появления showEndCallback: undefined, // Функция обратного вызова при окончании исчезания hideEndCallback: undefined ``` ### Методы ```javascript let collapse = new PipUI.Collapse('#collapse'); collapse.getID() // Вернет уникальный идентификатор спойлера collapse.setOptions(object) // Изменить опции спойлера collapse.getOptions() // Получить опции спойлера collapse.toggle(callback) // Скрыть или отобразить содержимое спойлера // Параметр callback является приоритетной функцией обратного // вызова при завершении скрытия, если она задана и через опции collapse.hide(callback) // Скрыть содержимое спойлера // Параметр callback является приоритетной функцией обратного // вызова при завершении скрытия, если она задана и через опции collapse.show(callback) // Показать содержимое спойлера // Параметр callback является приоритетной функцией обратного // вызова при завершении отображения, если она задана и через опции collapse.update() // Обновить содержимое collapse.isOpen() // Текущее состояние спойлера ``` # Галерея ## Общая информация Компонент галереи помогает улучшить работу с большим количеством изображений без сплошного вывода в список. Для работы достаточно создать контейнер и подключить его в экземпляре класса `PipUI.Gallery` , как это показано ниже ```html

``` Экземпляр класса PipUI.Gallery принимает 2 аргумента 1. Элемент контейнера, где будет образована галерея 2. Объект опций {% hint style="info" %} Чтобы загрузить список изображений, необходимо во втором параметре передать массив **images**. {% endhint %} Все элементы массива должны быть переданы в виде объектов. Каждый такой объект может содержать в себе следующие ключи 1. title - Название изображения 2. text - Описание 3. thumb - Превью, выводимое в списке изображений 4. large - Основное изображение, выводимое в контейнере 5. original - Оригинал изображения, который открывается при нажатии на основное изображение {% embed url="" %} Пример работы галереи {% endembed %} ## Javascript Так как компонент галереи может работать исключительно через Javascript, то все настройки, за исключением стилей, можно произвести только через него. ### Опции ```javascript // Выводить в консоль отладку debug: false // Массив изображений images: [] // Разрешить двигать меню превью scroll: true // Функция обратного вызова при запуске изменения изображения changeCallback: undefined // Функция обратного вызова при завершении изменения изображения changedCallback: undefined // Функция обратного вызова при обновлении updateCallback: undefined // Функция обратного вызова при добавлении изображения в конец pushCallback: undefined // Функция обратного вызова при добавлении изображения в начало unshiftCallback: undefined // Использовать компонент изображений useImage: false // Выбранное по умолчанию изображение active: 0 // Шаблоны верстки templates: { // Враппер галереи wrapper: '...', // Элемент изображения image: '' } ``` ### Методы ```javascript let gallery = new PipUI.Gallery('#gallery'); gallery.getID() // Вернет уникальный идентификатор галереи gallery.setOptions(object) // Изменить опции галереи gallery.getOptions() // Получить опции галереи gallery.updateImages() // Обновить изображения gallery.push(object) // Добавить изображение в конец gallery.unshift(object) // Добавить изображение в начало gallery.updateScroll() // Обновить позицию списка превью gallery.active(index) // Сделать выбранное изображение активным gallery.update() // Обновить содержимое ``` ### События | Триггер | Описание | Инициатор | | --------------------------- | ----------------------------------------------- | --------- | | change-gallery-pipui | Срабатывает при начале изменения изображения | .gallery | | changed-gallery-pipui | Срабатывает по окончанию изменения изображения | .gallery | | update-gallery-pipui | Срабатывает при обновлении содержимого | .gallery | | update-images-gallery-pipui | Срабатывает при обновлении списка изображений | .gallery | | push-gallery-pipui | Срабатывает при добавлении изображения в конец | .gallery | | unshift-gallery-pipui | Срабатывает при добавлении изображения в начало | .gallery | | update-scroll-gallery-pipui | Срабатывает при обновлении позиции скрола | .gallery | # Изображения ## Общая информация Компонент позволяет открывать изображения поверх всех элементов страницы на весь экран в отдельном модальном окне. Каждое изображение можно добавить в общую группу, в которой будет доступен для переключения только определенный набор изображений. Для работы компонента достаточно задать атрибут `data-image` и указать в нем путь до открываемого изображения. ```html

``` {% embed url="" %} Пример работы кода выше {% endembed %} Чтобы разделить изображения на группы, необходимо определить атрибут\ `data-image-group` а в качестве значения указать имя общей группы. {% hint style="info" %} Имя группы может быть любым для каждой из групп, но мы рекомендуем использовать осмысленные имена. {% endhint %} ```html

``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Javascript Вы можете управлять изображениями с помощью класса PipUI.Image. Методы и свойства данного класса являются статическими. ### Свойства ``` // Выводить в консоль отладку debug: false, // Функция обратного вызова, срабатываемая при открытии модального окна openCallback: undefined // Функция обратного вызова, срабатываемая при закрытии модального окна closeCallback: undefined // Функция обратного вызова, срабатываемая при открытии следующего изображения nextCallback: undefined // Функция обратного вызова, срабатываемая при открытии предыдущего изображения prevCallback: undefined // Шаблоны templates: { // Шаблон модального окна modal: '' } ``` ### Методы ```javascript PipUI.Image.getID() // Вернет уникальный идентификатор PipUI.Image.setOptions(object) // Изменить опции PipUI.Image.getOptions() // Получить опции PipUI.Image.open(url, options) // Открыть изображение с указанными опциями PipUI.Image.close() // Закрыть открытое изображение PipUI.Image.prev() // Переключить на предыдущее изображение PipUI.Image.next() // Переключить на следующее изображение ``` # Таблицы В PipUI есть готовые стили для таблиц, а так же их адаптивная версия под разные разрешения экранов. ```html

PipUI Alpha

1.0.0

PipUI Beta

1.0.0RC-2

``` {% embed url="" %} Пример работы кода выше {% endembed %} Для адаптивной таблицы, потребуется дополнительно указать класс `.table-responsive` к классу `.table` и продублировать элементы названий шапки с классом `.table-cell-resp` ```html

Наименование

Версия

Наименование

PipUI Alpha

Версия

1.0.0

Наименование

PipUI Beta

Версия

1.0.0RC-2

``` Если Вам необходимо зафиксировать ширину каждого столбца, используйте класс `.table-fixed` или если потребуется сделать каждый ряд подсвечиваемым при наведении, добавьте класс `.table-hover` к классу `.table` ```

Наименование

Версия

PipUI Alpha

1.0.0

PipUI Beta

1.0.0RC-2

PipUI

1.0.0

PipUI

2.0.0

``` # Панель BB-кодов ## Общая информация Панель управления BB-кодов помогает производить быструю подстановку кодов в форму ввода. Инсталлизировать её можно с помощью добавления класса `.bbpanel` к `textarea` или напрямую через Javascript. {% hint style="warning" %} После инсталлизации textarea будет помещена в контейнер с классом `.bbpanel`, а у формы этот класс будет заменен на `.bbpanel-form` {% endhint %} ### Разметка ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Javascript Данная панель полностью зависит от Javascript, по этому без его поддержки она работать не будет. По умолчанию инсталлизация происходит благодаря триггеру .bbpanel в форме, но вы можете произвести инсталлизацию и вручную с помощью создания экземпляра\ класса `PipUI.BBPanel(...)` ### Инициализация ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object Первый параметр - объект или строка ссылающаяся на элемент. Второй параметр - объект опций ### Опции ``` // Выводить в консоль отладку debug: false // Класс, добавляемый форме ввода при выводе панели focusClass: 'focus' // Класс, заменяемый класс .bbpanel в форме formClass: 'bbpanel-form' // Настройки появляющейся панели при выделении текста popup: { // Включено или выключено enable: true // Теги, выводимые в данной панели format: 'b,i,u,s,|,left,center,right,|,urlAlt' // Шаблон данной панели template: '' // Класс, добавляемый данной панели при выводе её на экран activeClass: 'popup-active' } // Отображать стилизованные подсказки при наведении на BB-коды в панели tooltip: true // Функция обратного вызова срабатываемая при отображении панели showCallback: undefined, // Функция обратного вызова срабатываемая при скрытии панели hideCallback: undefined // Функция обратного вызова срабатываемая при вызове обращения к коду callcodeCallback: undefined // Функция обратного вызова срабатываемая при работе функции UNDO undoCallback: undefined // Функция обратного вызова срабатываемая при работе функции REDO redoCallback: undefined // Функция обратного вызова срабатываемая при изменении панели changeCallback: undefined // Теги выводимые в панели BB-кодов format: 'undo,|,redo,|,b,i,u,s,|,left,center,right,|,size,color,|,spoiler,quote,code,|,img,youtube,|,urlAlt,line,|,hide' // Максимальный размер истории запоминаемый при использовании Undo/Redo maxHistory: 64 // Настройки кодов панели. Вы можете добавлять собственные коды или изменять существующие // Каждый элемент должен быть стилизован на подобии остальных. codes: {...} // Настройки шаблонов панели templates: {} ``` ### Методы ```javascript let bbpanel = new PipUI.BBPanel('#myform'); bbpanel.getID() // Вернет уникальный идентификатор панели bbpanel.setOptions(object) // Изменить опции панели bbpanel.getOptions() // Получить опции панели bbpanel.hide(callback) // Скрыть панель // Параметр callback является приоритетной функцией обратного // вызова при завершении скрытия, если она задана и через опции bbpanel.show(callback) // Показать блок // Параметр callback является приоритетной функцией обратного // вызова при завершении отображения, если она задана и через опции bbpanel.callCode(key, callback) // Вызвать указанный код // Параметр callback является приоритетной функцией обратного // вызова при вызове кода, если она задана и через опции bbpanel.change(callback) // Обновить содержимое панели // Параметр callback является приоритетной функцией обратного // вызова при обновлении панели, если она задана и через опции bbpanel.undo(callback) // Вызвать функцию undo // Параметр callback является приоритетной функцией обратного // вызова при шаге назад, если она задана и через опции bbpanel.redo(callback) // Вызвать функцию redo // Параметр callback является приоритетной функцией обратного // вызова при шаге вперёд, если она задана и через опции bbpanel.isOpen() // Текущее состояние панели ``` ### События | Триггер | Описание | Инициатор | | ---------------------- | ------------------------------------------------- | ------------- | | hide-bbpanel-pipui | Срабатывает при скрытии панели BB-кодов | .bbpanel-form | | show-bbpanel-pipui | Срабатывает при отображении панели BB-кодов | .bbpanel-form | | change-bbpanel-pipui | Срабатывает при изменении панели | .bbpanel-form | | callcode-bbpanel-pipui | Срабатывает при вызове какого-либо кода из панели | .bbpanel-form | | undo-bbpanel-pipui | Срабатывает при вызове функции шага назад | .bbpanel-form | | redo-bbpanel-pipui | Срабатывает при вызове функции шага вперёд | .bbpanel-form | # Валидаторы форм ## Общая информация Очень часто перед отправкой формы, требуется произвести ее проверку. Фреймворк PipUI даёт такую возможность. Для работы компонента, необходимо задать элементам формы атрибут `data-validator`. Все эти элементы должна находится внутри контейнера `.input-block`, которые в свою очередь должны быть внутри `form`. ### Разметка ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} Вы можете управлять стилем появляющейся подсказки с помощью атрибута\ `[data-validator-type]`, который может принимать любые значения.\ Атрибут `[data-validator-text]` принимает в качестве значения текст, который будет выводится в оповещении в случает некорректного заполнения поля. ## Javascript Вы можете произвести инстализацию вручную. Каждый элемент инстализируется отдельно. ### Инициализация Для этого вам необходимо создать экземпляр класса `PipUI.Validator` и передать в него селектор элемента формы. Второй параметр данного класса отвечает за объект опций. ```html ``` ### Опции ``` // Выводить в консоль отладку debug: false // Текст, выводимый валидатором в случае ошибки text: '' // Значение атрибута data-validator-type для стилизации type: 'default' // Функция обратного вызова, выполняемая при обнаружении ошибки валидации формы invalidCallback: undefined // Шаблоны валидатора templates: {...} ``` ### Методы ```javascript let validator = new PipUI.Validator('#myform'); validator.getID() // Вернет уникальный идентификатор панели validator.setOptions(object) // Изменить опции панели validator.getOptions() // Получить опции панели validator.isValid() // Проверить валидна ли форма // Произвести полную проверку валидности формы с учетом вывода сообщения // Параметр callback является приоритетной функцией, если аналогичная задана через // опцию invalidCallback validator.validate(callback) ``` ### События | Триггер | Описание | Инициатор | | ------------------------ | -------------------------------------- | ----------------- | | validate-validator-pipui | Срабатывает при полной валидации формы | \[data-validator] | # Всплывающие блоки ## Общая информация Если есть необходимость использовать HTML во всплывающих подсказках([tooltip](/components/tooltip)), то вам могут помочь всплывающие блоки. ### Разметка ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Поддерживаемые атрибуты Атрибут `data-popup` является инициатором события вызова всплывающего блока. Данный атрибут может принимать в качестве значения селектор на объект всплывающего блока. ### title & content Вы так же можете обойтись без дополнительного блока и указать название и описание через атрибуты `data-popup-title` и `data-popup-content`, однако в таком случае HTML поддерживаться не будет, но и потребность в указании атрибута data-popup отпадёт. ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} Значения атрибутов `data-popup-title` и `data-popup-content` не являются обязательными, так же как и их аналог через отдельную HTML разметку `.popup-title` и `.popup-content`. ### target С помощью атрибута `data-popup-target` можно указать селектор элемента к которому будет привязан всплывающий блок. ```html Target #1 ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### overlay Атрибут `data-popup-overlay="true"` включает затемнение фона при появлении всплывающего блока. По умолчанию данная функция отключена. ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### autoclose В качестве значение атрибута `data-popup-autoclose` принимается целое число - кол-во миллисекунд, по истечению которых всплывающий блок будет автоматически закрыт. По умолчанию автозакрытие имеет значение 0, что будет означать отсутствие автоматического закрытия. ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### overclose Атрибут `data-popup-overclose` включает или отключает закрытие всплывающего блока при нажатии на область, которая не является самим блоком. По умолчанию данный атрибут имеет значение true. ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ### direction По умолчанию направление вывода всплывающего блока установлено как вверх (up) и меняется в зависимости от доступности области, однако вы можете поменять значение по умолчанию на своё с помощью атрибута `data-popup-direction`, однако блок по прежнему будет проверять доступность выбранного направления или искать другое. На данный момент доступны следующие направления * **up** - вверх (по умолчанию) * **down** - вниз * **left** - влево * **right** - вправо ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Javascript Для работы с всплывающими блоками необходимо создать экземпляр класса PipUI.Popup.\ По умолчанию инициализация происходит автоматически при клике на элемент\ с атрибутом \[data-popup]. ### Инициализация Конструктор класса PipUI.Popup принимает 2 параметра: HTMLElement и Object Первый параметр - селектор объекта самого блока всплывающего окна. Может быть пустым. Второй параметр - объект опций ```javascript let popup = new PipUI.Popup('#popup-box'); ``` ### Опции

// Выводить в консоль отладку
debug: false

// Селектор или HTMLElement к которому будет привязан всплывающий блок
target: undefined

// Список триггеров, при нажатии на которые будет появляться/исчезать блок
triggers: []

// Название, выводимое в всплывающем блоке. Если не указано, то появится без названия.
title: ''

// Содержимое, выводимое в всплывающем блоке. Если не указано, то появится без содержимого.
content: ''

// Направление вывода. Поддерживаются: up, down, left, right
direction: 'up'

// Выводить ли оверлей
overlay: false

// Кол-во миллисекунд, через которое блок автоматически закроется
autoclose: 0

// Закрывать всплывающий блок при клике на область вне самого блока
overclose: true

// Класс присваиваемый всплывающему блоку при открытии
openedClass: 'popup-active'

// Класс присваиваемый оверлею при открытии
openedOverlayClass: 'overlay-active'

// Класс присваиваемый триггеру при открытии
openedTriggerClass: 'active'

// Класс элемента к которому привязан всплывающий блок
targetClass: 'popup-target'

// Класс, присваиваемый элементу к которому привязан всплывающий блок, при открытии
targetActiveClass: 'popup-target-active'

// Функция обратного вызова срабатываемая при появлении всплывающего блока
openCallback: undefined

// Функция обратного вызова срабатываемая при исчезании всплывающего блока
closeCallback: undefined

// Функция обратного вызова срабатываемая при обновлении всплывающего блока
updateCallback: undefined

// Функция обратного вызова срабатываемая при изменении позиции всплывающего блока
repositionCallback: undefined

// Шаблоны
templates: {
     // Разметка основного блока всплывающего окна
     box: '...'
     
     // Разметка блока оверлея
     overlay: '...'
}

### Методы ```javascript let popup = new PipUI.Navbar('#popup'); popup.getID() // Вернет уникальный идентификатор всплывающего блока popup.setOptions(object) // Изменить опции блока popup.getOptions() // Получить опции блока popup.getPosition(name) // Получить актуальную позицию блока(служит для обновления) // Параметр name является направлением позиции popup.updatePosition() // Обновить позицию всплывающего блока popup.update() // Обновить всплывающее окно popup.hide(callback) // Скрыть панель // Параметр callback является приоритетной функцией обратного // вызова при завершении скрытия, если она задана и через опции popup.show(callback) // Показать блок // Параметр callback является приоритетной функцией обратного // вызова при завершении отображения, если она задана и через опции popup.isOpen() // Текущее состояние блока (открыт или закрыт) popup.open(callback) // Отобразить блок // Параметр callback является приоритетной функцией обратного // вызова при завершении отображения, если она задана и через опции popup.close(callback) // Скрыть блок // Параметр callback является приоритетной функцией обратного // вызова при завершении скрытия, если она задана и через опции ``` ### События

Триггер	Описание	Инициатор
open-popup-pipui	Срабатывает при открытии всплывающего блока	.popup
close-popup-pipui	Срабатывает при закрытии всплывающего блока	.popup
update-popup-pipui	Срабатывает при обновлении содержимого всплывающего блока	.popup
update-position-popup-pipup	Срабатывает при обновлении позиции всплывающего блока	.popup

# Слайдер ## Общая информация Слайдер - отличное дополнение для вашего сайта, когда необходимо показать специальные акции или другое интересное содержимое, которое может быть не только изображением, но и любым HTML контентом. ### Разметка ```html

``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Javascript Данный компонент управляется исключительно с помощью Javascript, по этому какие-либо настройки через атрибуты произвести не удастся. ### Инициализация Для инициализации слайдера необходимо создать экземпляр класса PipUI.Slider. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object Первый параметр - селектор или объект контейнера слайдера. Второй параметр - объект опций ```html

``` Если произвести просто инициализацию, то слайдер будет пустым, по этому необходимо заполнить его опции, а именно параметр slides, который принимает массив слайдов. ### Опции ``` // Выводить в консоль отладку debug: false // Массив слайдов // Каждый элемент слайдов может представлять собой объект, состоящий из // параметра img или content, которые являются не обязательными. // img - ссылка на изображение // content - HTML содержимое slides: [] // Функция обратного вызова, срабатываемая при обновлении слайдера updateCallback: undefined // Функция обратного вызова, срабатываемая при изменении слайда changeCallback: undefined // Функция обратного вызова, срабатываемая при паузе pauseCallback: undefined // Функция обратного вызова, срабатываемая при возобновлении после паузе resumeCallback: undefined // Функция обратного вызова, срабатываемая при старте playCallback: undefined // Задержка при изменении слайда на следующей. // Если установить 0, то слайды не будут переключаться автоматически. duration: 3000 // Анимация переключения слайда animation: 'slide' // Отображать ли стрелочки переключения на предыдущий и следующий слайды arrows: true // Отображать ли элементы переключения по имеющимся слайдам labels: true // Можно ли использовать паузу при наведении pause: true // Шаблоны слайдера templates: { // Контейнер списка слайдов list: '...' // Блок слайда slide: '...' // Стрелка переключения на предыдущий слайд arrowLeft: '...' // Стрелка переключения на следующий слайд arrowRight: '...' // Элемент переключения по имеющимся слайдам label: '...' } ``` ### Методы ```javascript let slider = new PipUI.Slider('#slider'); slider.getID() // Вернет уникальный идентификатор слайдера slider.setOptions(object) // Изменить опции слайдера slider.getOptions() // Получить опции слайдера slider.update(callback) // Обновить слайдер // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной из объекта опций slider.setSlide(index, callback) // Изменить слайд на указанный // Параметр index - целое число, начиная от 0 // Параметр callback является приоритетной функцией обратного // вызова перед функцией changeCallback из объекта опций slider.next(callback) // Изменить слайд на следующий // Параметр callback является приоритетной функцией обратного // вызова перед функцией changeCallback из объекта опций slider.prev(callback) // Изменить слайд на предыдущий // Параметр callback является приоритетной функцией обратного // вызова перед функцией changeCallback из объекта опций slider.pause(callback) // Поставить слайдер на паузу // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной из объекта опций slider.resume(callback) // Запустить слайдер после паузы // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной из объекта опций slider.play(delay, clear, callback) // Запустить слайдер с доп. параметрами // Параметр delay указывает задержку переключения // Параметр clear очищает предыдущие параметры // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной из объекта опций ``` ### События

Триггер	Описание	Инициатор
update-slider-pipui	Срабатывает при обновлении слайдера	.slider
change-slider-pipui	Срабатывает при изменении слайда	.slider
pause-slider-pipui	Срабатывает при выставлении паузы	.slider
resume-slider-pipui	Срабатывает при запуске после паузы	.slider
play-slider-pipui	Срабатывает при запуске слайдера(обычно после паузы с определенной задержкой)	.slider

# Автозаполнение ## Общая информация Автозаполнение помогает при вводе части запроса выдавать подходящие под него результаты без необходимости вводить запрос целиком. ### Разметка ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Атрибуты Атрибут data-autocomplete является триггером для обработки компонента автозаполнения и срабатывает при получении фокуса на поле ввода. Помимо него, существуют и несколько других атрибута, которые можно использовать для более углубленной настройки. ### data-autocomplete-list Список всех доступных результатов запросов через символ "**;**". Поиск подходящих будет вычисляться с помощью javascript. ### data-autocomplete-url Задаёт URL адрес, откуда будут загружаться подходящие под запрос предложения. Данные от обработчика необходимо возвращать в виде **JSON** и передать в нем список значений в параметре **list**. #### Пример возвращаемых данных ```json { "list": ["value 1", "value 2", "value N"] } ``` ### data-autocomplete-method Метод отправки запроса на получение данных. По умолчанию используется GET запрос. ### data-autocomplete-key Имя ключа, отправляемого в запросе на сервер. По умолчанию "value". Например, если мы хотим отправить значение "myvalue" из поля ввода методом GET, то запрос будет таким `GET``['``value``'] = "``myvalue``"`. ### data-autocomplete-min Минимальное кол-во символов, вводимых в поле ввода, для получения результатов запроса. ### data-autocomplete-max-items Максимальное кол-во выводимых результатов ## Javascript Для прямой работы через javascript, необходимо создать экземпляр класса PipUI.Autocomplete. ### Инициализация Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object Первый параметр - объект или селектор формы ввода. Второй параметр - объект опций ```html ``` ### Опции ``` // Выводить в консоль отладку debug: false // Настройки источника списка. Если не указан URL, то данные будут браться из list source: { // URL адрес источника, к которому будет производиться запрос на получение списка url: '' // Метод отправки запроса method: 'GET' // Ключ отправляемого параметра значения key: 'value' // Дополнительные параметры, отправляемые с запросом extra: undefined } // Основной список значений list: [] // Минимальное кол-во введенных символов в форму, после которых будет обрабатываться список min: 2 // Максимальное кол-во выводимых результатов maxItems: 10 // Функция обратного вызова, срабатываемая при обновлении списка updateCallback: undefined // Функция обратного вызова, срабатываемая при переключении на следующий пункт списка nextCallback: undefined // Функция обратного вызова, срабатываемая при переключении на предыдущий пункт списка prevCallback: undefined // Функция обратного вызова, срабатываемая при обновлении позиции списка updatePosition: undefined // Функция обратного вызова, срабатываемая при запросе requestCallback: undefined // Функция обратного вызова, срабатываемая при выборе элемента списка choiseCallback: undefined // Шаблоны templates: { // Шаблон списка list: '...' // Элемент списка item: '...' // Основной контейнер списка container: '...' } ``` ### Методы ```javascript let autocomplete = new PipUI.Autocomplete('#autocomplete'); autocomplete.getID() // Вернет уникальный идентификатор автозаполнения autocomplete.setOptions(object) // Изменить опции автозаполнения autocomplete.getOptions() // Получить опции автозаполнения autocomplete.request(value, callback) // Произвести запрос для получения списка // Параметр value задает строку запроса // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции autocomplete.update(value, callback) // Обновление списка автозаполнения // Параметр value задает строку запроса // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции autocomplete.updatePosition(callback) // Обновить позицию списка // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции autocomplete.isOpenedContainer() // Текущее состояние списка autocomplete.choise(index, callback) // Выбрать элемент из списка // Параметр index является целым числом, начиная от 0 // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции ``` ### События

Триггер	Описание	Инициатор
update-autocomplete-pipui	Срабатывает при обновлении списка результатов	.autocomplete-input
next-autocomplete-pipui	Срабатывает при переключении на следующий пункт списка	.autocomplete-input
prev-autocomplete-pipui	Срабатывает при переключении на предыдущий пункт списка	.autocomplete-input
update-position-autocomplete-pipui	Срабатывает при обновлении позиции списка	.autocomplete-input
request-autocomplete-pipui	Срабатывает при получении ответа на запрос	.autocomplete-input
choise-autocomplete-pipui	Срабатывает при выборе пункта из списка	.autocomplete-input

# Селектор тегов ## Общая информация Селектор тегов помогает осуществить выборку ключевых слов или предложений. По умолчанию в качестве разделителей используются запятая или клавиша ENTER. Все полученные результаты помещаются в скрытое поле ввода (по умолчанию name="tags"). ### Разметка ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Атрибуты Атрибут `data-tagselector` является инициатором для обработки формы при получении фокуса, однако помимо атрибутов, вы можете инициализировать обработку через javascript. ### data-tagselector-keys Клавиши, по нажатию на которые тег будет добавляться в список. В качестве разделителя можно использовать символ "**+**". ### data-tagselector-unique Должны ли теги быть уникальными. По умолчанию **true**. ### data-tagselector-insert Куда будет вставлен тег. Принимаются значения **start**(вначале) и **end**(вконце).\ По умолчанию **start**. ### data-tagselector-min Минимальное кол-во символов, которое необходимо ввести для добавления тега. По умолчанию **1**. ### data-tagselector-max Максимальное кол-во символов, которое можно ввести для добавления тега.\ По умолчанию **32**. ### data-tagselector-max-tags Максимальное кол-во тегов, которое можно добавить. По умолчанию **0** (без лимита). ### data-tagselector-pattern Паттерн регулярного выражения, которому должен соответствовать тег. ## Javascript Больше возможностей для управления тегами можно достичь благодаря Javascript. ### Инициализация Для инициализации, необходимо создать экземпляр класса PipUI.Tagselector. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object Первый параметр - селектор или объект формы ввода Второй параметр - объект опций ```html ``` ### Опции ``` // Выводить в консоль отладку debug: false // Минимальное кол-во символов для добавления тега. min: 1 // Максимальное кол-во символов для добавления тегов. max: 32 // Максимальное кол-во тегов для добавления. maxTags: 0 // Паттерн регулярного выражения, которому должен соответствовать добавляемый тег. pattern: undefined // Куда будет вставлен тег вначале или вконце - start или end соответственно. insert: 'start' // Значения с которыми будет инициализирована форма values: [] // Клавиши, по нажатию на которые тег будет добавлен keys: [',', 'Enter'] // Должны ли теги быть уникальными unique: true // Имя скрытого поле в котором записаны все теги hidden: 'tags' // Функция обратного вызова, срабатываетая при добавлении тега вконец pushCallback: undefined // Функция обратного вызова, срабатываетая при добавлении тега вначало unshiftCallback: undefined // Функция обратного вызова, срабатываетая при очистке тегов clearCallback: undefined // Функция обратного вызова, срабатываетая при изменении тега setCallback: undefined // Функция обратного вызова, срабатываетая при удалении тега removeCallback: undefined // Функция обратного вызова, срабатываетая при обновлении списка тегов updateCallback: undefined // Функция обратного вызова, срабатываетая при получении ошибки errorCallback: undefined // Класс контейнера списка тегов tagselectorClass: 'tagselector' // Шаблоны селектора templates: { // Основной контейнер списка тегов container: '...', // Элемент тега tag: '...' } ``` ### Методы ```javascript let tagselector = new PipUI.Tagselector('#tagselector'); tagselector.getID() // Вернет уникальный идентификатор tagselector.setOptions(object) // Изменить опции tagselector.getOptions() // Получить опции tagselector.add(string, callback) // Добавить тег в список // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции tagselector.push(string, callback) // Добавить тег вконец списка // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции tagselector.unshift(string, callback) // Добавить тег вначало списка // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции tagselector.set(id, string, callback) // Изменить тег // Параметр id хранится в атрибуте data-tagselector-item-id каждого тега // Параметр string - строка, на которую будет заменено содержимое тега // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции tagselector.remove(id, callback) // Удалить тег // Параметр id хранится в атрибуте data-tagselector-item-id каждого тега // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции tagselector.clear(callback) // Удалить все теги // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции tagselector.search(string) // Поиск тега ``` ### События

Триггер	Описание	Инициатор
push-tagselector-pipui	Срабатывает при добавлении тега вконец	.tagselector-input
unshift-tagselector-pipui	Срабатывает при добавлении тега вначало	.tagselector-input
set-tagselector-pipui	Срабатывает при изменении тега	.tagselector-input
remove-tagselector-pipui	Срабатывает при удалении тега	.tagselector-input
clear-tagselector-pipui	Срабатывает при очистке	.tagselector-input

### Совместимость Вы так же можете использовать селектор тегов совместно с [автозаполнением](/components/autocomplete) ```html ``` # Селекторы даты и времени ## Общая информация До появления HTML 5 в разметке отсутствовали поля ввода с типами для выбора даты и времени. С появлением этой спецификации, положение немного улучшилось и таковые были добавлены, но не всеми браузерами, а их поддержка оставляла желать лучшего.\ И конечно добавленные браузерами типы полей input не позволяли производить стилизацию появляющихся селекторов. Мы решили добавить этот компонент, чтобы решить все эти проблемы ### Разметка ```html ``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Атрибуты При инициализации через атрибуты, триггером является атрибут data-datepicker. ### data-datepicker Без указания значения включает селектор даты и времени. Может принимать в качестве значений **date** и **time**, каждое из которых включает только соответствующий селектор. ### data-datepicker-format Формат входящей/исходящей даты. Формируется компонентом Date. ## Javascript Для прямой работы через javascript, необходимо создать экземпляр класса PipUI.Datepicker. ### Инициализация Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object Первый параметр - объект или селектор формы ввода. Второй параметр - объект опций ```html ``` ### Опции ``` // Выводить в консоль отладку debug: false // Класс, присваиваемый модальному окну при открытии showedClass: 'datepicker-active' // Разрешить выбор даты date: true // Разрешить выбор времени time: true // Разрешить выбор года year: true // Разрешить выбор месяца month: true // Разрешить выбор дня day: true // Разрешить выбор часа hours: true // Разрешить выбор минуты minutes: true // Разрешить выбор секунды seconds: true // Функция обратного вызова, срабатываемая при изменении даты changeCallback: undefined // Функция обратного вызова, срабатываемая при обновлении содержимого селектора updateCallback: undefined // Функция обратного вызова, срабатываемая при отображении селектора showCallback: undefined // Функция обратного вызова, срабатываемая при скрытии селектора hideCallback: undefined // Формат обрабатываемой даты и времени format: 'd.m.Y H:i:s' // Функция форматирования даты и времени formating: (date, self) => ..., // Функция парсинга даты и времени parse: (str, self) => ... // Настройки шаблонов templates: { // Основной контейнер модального окна селектора container: '...' // Враппер модального окна wrapper: '...' // Контейнер вкладок модального окна tabs: '...' // Вкладка селектора даты date: { // Враппер селектора даты wrapper: '...' // Селектор выбора года year: '...' // Селектор выбора месяца month: '...' // Селектор выбора недели week: '...' // Селектор выбора дня day: '...' } // Вкладка селектора времени time: { // Враппер селектора времени wrapper: '...' // Визуальные селекторы visual: { // Часы hours: '...' // Минуты minutes: '...' // Секунды seconds: '...' } // Формы ввода inputs: { // Часы hours: '...' // Минуты minutes: '...' // Секунды seconds: '...' } // Разделитель separator: '...' } // Подвал модального окна footer: { // Враппер подвала wrapper: '...' // Кнопка отмены cancel: '...' // Кнопка далее next: '...' // Кнопка предыдущего селектора prev: '...' // Кнопка завершения done: '...' } } ``` ### Методы ```javascript let datepicker = new PipUI.Datepicker('#datepicker'); datepicker.getID() // Вернет уникальный идентификатор селектора datepicker.setOptions(object) // Изменить опции селектора datepicker.getOptions() // Получить опции селектора datepicker.setActiveDate() // Изменить вкладку на селектор даты datepicker.setActiveTime() // Изменить вкладку на селектор времени datepicker.show(callback) // Открыть модальное окно селектора // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции datepicker.hide(callback) // Закрыть модальное окно селектора // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции datepicker.updateValue(callback) // Обновить значение в форме ввода // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции datepicker.setDay(day) // Установить день на указанный datepicker.setYear(year) // Установить год на указанный datepicker.setMonth(month) // Установить месяц на указанный datepicker.nextYear() // Переключить на следующий год datepicker.prevYear() // Переключить на предыдущий год datepicker.setHours(hours) // Установить час на указанный datepicker.setMinutes(minutes) // Установить минуту на указанную datepicker.setSeconds(seconds) // Установить секунду на указанную datepicker.getValue() // Получить текущее значение datepicker.update(callback) // Обновить селектор даты // Параметр callback является приоритетной функцией обратного // вызова перед аналогичной функцией указанной через опции ``` ### События | Триггер | Описание | Инициатор | | ----------------------- | ----------------------------------------------------- | ------------------ | | show-datepicker-pipui | Срабатывает при отображении модального окна селектора | \[data-datepicker] | | hide-datepicker-pipui | Срабатывает при скрытии модального окна селектора | \[data-datepicker] | | change-datepicker-pipui | Срабатывает при изменении даты или времени | \[data-datepicker] | | update-datepicker-pipui | Срабатывает при обновлении селектора | \[data-datepicker] | # Блоки оповещений ## Общая информация Блок оповещений - стилизованный блок для привлечения внимания пользователей. ```html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur dicta dignissimos doloremque, facere illo ipsa molestias provident quasi quis, quos rem. Ab, expedita hic magni quidem quisquam reprehenderit suscipit?

``` {% embed url="" %} Пример работы кода выше {% endembed %} Вы можете выставить дополнительный контент до и/или после основного текста, который будет гармонировать с основным блоком. Для этого добавьте внутрь `.alertblock` блоки `.before` и `.after` соответственно ```html

``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Javascript Управлять блоками можно с помощью Javascript. Для этого необходимо инициализировать соответствующий объект. ```javascript let alertblock = new PipUI.Alertblock('#alertblock') ``` Класс PipUI.Alertblock принимает 3 аргумента:\ 1\. Элемент (String|HTMLElement)\ 2\. Опции(Object)\ 3\. Метод инициализации(Boolean) - true для создания блока ### Создание блока Вы можете полностью создать блок со всем содержимым. Чтобы это сделать, передайте в 3 параметре значение true и задайте опции во 2 параметре. {% hint style="success" %} Пустой элемент из первого параметра должен существовать на странице {% endhint %} ```javascript let create = new PipUI.Alertblock('#alertblock', { message: 'Hello', canClose: true, before: '', after: '' }, true); ``` ### Инициализация блока Если вы уже создали блок, то вы можете его инициализировать и управлять им. Для этого просто создайте новый объект с первым параметром ```javascript let init = new PipUI.Alertblock('#alertblock'); ``` ### Опции Второй параметр объекта PipUI.Alertblock поддерживает следующие параметры ``` // Выводить в консоль отладку debug: false // Шаблон враппера wrapperTemplate: '

' // Шаблон кнопки закрытия closeTemplate: '×' // Содержимое выводимое до основного контента before: '' // Содержимое выводимое после основного контента after: '' // Набор классов через пробел, которые будут добавлены к блоку .alertblock class: '' // Функция обратного вызова при начале закрытия блока closeCallback: undefined // Функция обратного вызова при окончании закрытия блока closedCallback: undefined // Функция обратного вызова при начале появления блока showCallback: undefined // Функция обратного вызова при окончании появления блока showedCallback: undefined // Функция обратного вызова при начале исчезания блока hideCallback: undefined // Функция обратного вызова при окончании исчезания блока hidedCallback: undefined // Класс анимации скрытого блока hiddenClass: 'alertblock-hidden' // Класс анимации закрытого блока closedClass: 'alertblock-closed' // Класс полного скрытия блока (display: none) noneClass: 'alertblock-none' // Может ли блок быть закртываемым(будет отображаться кнопка закрытия) canClose: false // Основное сообщение, выводимое в блоке. Можно использовать HTML message: '' ``` ### Методы ```javascript let alertblock = new PipUI.Alertblock('#alertblock'); alertblock.getID() // Вернет уникальный идентификатор блока alertblock.setOptions(object) // Изменить опции блока. DOM не будет изменен // до вызова метода alertblock.update() alertblock.getOptions() // Получить опции блока alertblock.setMessage(string) // Изменить текст основного содержимого alertblock.hide(callback) // Скрыть блок. // Параметр callback является приоритетной функцией обратного // вызова при завершении скрытия, если она задана и через опции alertblock.show(callback) // Показать блок // Параметр callback является приоритетной функцией обратного // вызова при завершении отображения, если она задана и через опции alertblock.close(callback) // Закрыть блок. Он будет полностью удалён со страницы // Параметр callback является приоритетной функцией обратного // вызова при завершении закрытия, если она задана и через опции ``` ### События | Триггер | Описание | Инициатор | | ----------------------- | ------------------------------------------- | ----------- | | update-alertblock-pipui | Срабатывает при обновлении блока оповещения | .alertblock | | show-alertblock-pipui | Срабатывает при начале появления блока | .alertblock | | showed-alertblock-pipui | Срабатывает по окончанию появления блока | .alertblock | | hide-alertblock-pipui | Срабатывает при начале скрытия блока | .alertblock | | hided-alertblock-pipui | Срабатывает по окончанию скрытия блока | .alertblock | | close-alertblock-pipui | Срабатывает при начале закрытия блока | .alertblock | | closed-alertblock-pipui | Срабатывает по окончанию закрытия блока | .alertblock | # Якоря Якоря позволяют организовать переход к элементу с анимацией Вы можете управлять ими как через HTML, так и через Javascript ## Управление через атрибуты Для управления через HTML, необходимо добавить элементу атрибут `data-anchor` и передать в него ссылку на элемент к которому необходимо прокрутить страницу. Атрибут `data-anchor-duration` отвечает за скорость прокрутки в миллисекундах. Атрибут `data-anchor-hash` используется для изменения ссылки при прокрутке страницы ```html

Element1

Element2

Element3

Element4

Element5

``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Управление через Javascript Чтобы управлять прокруткой через Javascript, необходимо обратиться к статическому методу `PipUI.Anchor.scroll()` , который принимает параметры HTMLElement и options. ```javascript PipUI.Anchor.scroll('#anchor1'); ``` ### Опции ``` // Выводить в консоль отладку debug: false // Скорость прокрутки по умолчанию defaultDuration: 400 // Функция обратного вызова по умолчанию defaultCallback: undefined ``` ### Методы ```javascript PipUI.Anchor.setOptions(object) // Изменить опции блока. DOM не будет изменен PipUI.Anchor.getOptions() // Получить опции блока PipUI.Anchor.scroll(string|object, object) //Прокрутить страницу до элемента ``` # Контакты На данной страницы вы найдёте актуальную информацию о средствах связи с нами #### Предложения и сотрудничество E-Mail: #### Социальные сети VK: Telegram: