**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** использует несколько внешних библиотек, которые поддерживают его работу и дополняют функционалом. Среди них: [JQuery](https://jquery.com/), [JQuery Easing](https://github.com/gdsmith/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="" %}
Пример работы с текстом
{% endembed %}
## Управление свойством 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 %}
## Вертикальное выравнивание
Вертикальное выравнивание позволяет изменить положение элементов по вертикали
`.align-items-start` - выравнивает элементы в **Grid** блоке по верхнему краю
`.align-items-end` - выравнивает элементы в **Grid** блоке по нижнему краю
`.align-items-center` - выравнивает элементы в **Grid** блоке по центру
`.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}`
*Цвета тона 500 можно использовать без суффикса -500*
{% 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 собран компонент для быстрого формирования такой панели
{% embed url="" %}
Пример работы панели навигации
{% endembed %}
Цвет панели может быть изменен с помощью классов цвета фона из палитры
Вы можете использовать `.container` внутри блока `.navbar`, если планируется растягивать navbar под ширину адаптивного контейнера
Для изменения тёмной палитры текста, можно добавить класс `.navbar-text-ligth` к блоку `.navbar`
# Выпадающее меню
Компонент выпадающего меню имеет многоуровневую систему вложенности, что позволяет определять множественные разделы и подразделы
{% embed url="" %}
Пример простейшего выпадающего меню
{% endembed %}
```html
```
# Постраничная навигация
Блок постраничной навигации состоит из панели пронумерованных страниц
Для работы стилей постраничной навигации, контейнеру списка необходимо
задать класс `.pagination`
{% embed url="" %}
Простейший пример работы постраничной навигации
{% endembed %}
```html
```
Вы так же можете использовать собственный стиль вывода
{% embed url="" %}
Дополнительный пример работы постраничной навигации
{% endembed %}
```html
```
Помимо прямого вывода блока постраничной навигации, его можно генерировать с помощью атрибутов через JavaScript
`[data-pagination-pages="`*`"]` - общее кол-во страниц*\
*`[data-pagination-current="`*`"]` - Текущая страница\ `[data-pagination-url="`*`"]` - URL на который произойдет переход. В качестве номера страницы, можно использовать тег {NUM}*\
*`[data-pagination="`*`"]` - Тип генератора постраничной навигации (от 0 дл 3)
{% embed url="" %}
Пример работы постраничной навигации через атрибуты
{% endembed %}
# Формы
Формы и компоненты форм
Формы в наше время являются неотъемлемой частью сайта, где есть какие-либо поля ввода. PipUI имеет в себе компонент быстрой стилизации всех существующих элементов форм и даже больше.
{% embed url="" %}
Пример формы авторизации
{% endembed %}
Для работы простейших полей ввода не потребуется вводить дополнительные классы или иные атрибуты. Стилизация сработает автоматически по умолчанию для всех тегов input, textarea, select
{% embed url="" %}
Пример стилизации стандартных полей ввода
{% endembed %}
Вы так же можете использовать и стилизованные элементы checkbox и radio, как это представлено ниже
{% embed url="" %}
Пример стилизованных переключателей
{% endembed %}
Помимо форм, стилизованных по умолчанию, имеются и атрибуты для их стилизации. Для создания такого компонента, необходимо обернуть элемент формы в блок с классом `.input-block` и задать дополнительный набор элементов
Класс `.input-helper` внутри блока `.input-block` создает скрытый блок информации, который появляется при наведении на `.input-block`
{% embed url="" %}
Пример работы класса input-block
{% endembed %}
До и после формы ввода, можно добавить дополнительные компоненты, например, иконку или checkbox. Для этого необходимо обернуть поле ввода в класс `.input-append`, для добавления компонента после формы или `.input-prepend`, для добавления перед формой. Данные классы можно использовать как отдельно, так и вместе. Для определения самого блока компонента, используйте классы `.append` и `.prepend` соответствующе рядом с полем ввода
{% embed url="" %}
Пример работы append и prepend
{% endembed %}
Форма выбора файла так же может быть стилизована стандартными средствами CSS, посредством помещения самого поля выбора файла внутрь блока с классом `.input-block-file`. Всё остальное его содержимое будет отображаться как обычно
{% embed url="" %}
Пример стилизованной формы выбора файла
{% endembed %}
Помимо всего прочего, Вы можете обернуть форму типа textarea в класс `.textarea` для поддержки пронумерованной формы и некоторых особенностей
{% embed url="" %}
Пример пронумерованного поля ввода
{% endembed %}
# Кнопки
PipUI имеет в своем наборе компонентов множество вариаций кнопок, совместно с другими компонентами. Для их стилизации необходимо добавить элементу класс `.btn`
{% embed url="" %}
Примеры кнопок в разных состояниях
{% endembed %}
Кнопки можно комбинировать и с другими компонентами, например с цветовыми наборами, отступами и др.
{% embed url="" %}
Пример кастомизации кнопок
{% endembed %}
# Полосы прогресса
Использование полос прогресса связано с определением статуса загрузки/нагрузки чего-либо. PipUI дает возможность без особых усилий добавить такие полосы в свое приложение.
{% code title="Пример прогресс бара" lineNumbers="true" %}
```html
Some text
```
{% endcode %}
{% embed url="" %}
Примеры разных стилей прогресс бара
{% endembed %}
Помимо прогресс-бара в виде полос, вы можете вывести и радиальный вариант.
Не смотря на то, что в коде используется тег , он поддерживает тонкую кастомизацию благодаря атрибутам.
`data-border-size` - ширина линии\ `data-background-color` - цвет фона линии\ `data-border-color` - цвет внутреннего прогресс-бара\ `data-border-padding` - отступ по краям внутреннего прогресс-бара\ `data-radius` - размер прогресс-бара в процентах. Поддерживаются числа с плавающей точкой\ `data-timer` - интервал обновления блока в миллисекундах. По умолчанию без обновления
```html
25%
Progress
```
{% embed url="" %}
Примеры радиального прогресс бара
{% endembed %}
# Меню навигации
Многоуровневое меню навигации позволяет быстро переходить по разделам и категориям. Данное меню используется и в нашей документации(слева).
```html
```
Для добавления подуровней, необходимо добавить к триггеру `.nav-menu-link` класс `.nav-menu-toggle` и после этого элемента добавьте список меню, так же как и родительский, только вместо класса `.nav-menu` используйте класс `.nav-sub-menu` для всех последующих уровней. Пример можно посмотреть ниже
{% embed url="" %}
Пример меню навигации с выпадающим списком
{% endembed %}
```html
```
# Модальные окна
Когда необходимо вывести дополнительный контент, а создавать для этого отдельную страницу нет необходимости, то на помощь нам придут модальные окна.
```html
Название
Содержимое модального окна
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, at, aut blanditiis distinctio esse ipsam nisi odio odit pariatur quasi qui tempora, totam. Modi odio recusandae velit voluptate. Odit, quibusdam!
```
{% embed url="" %}
Пример работы модального окна
{% endembed %}
Вы можете регулировать размер модального окна, добавляя к блоку `.modal > .wrapper` классы размеров `.w-{NUM}-i`
Управлять появлением и исчезанием модальных окон можно с помощью JS
```javascript
pipui.modal.open('modal-id');
pipui.modal.close('modal-id');
pipui.modal.toggle('modal-id');
```
# Оповещения
Компонент оповещений позволяет, при срабатывании определенных событий, донести до пользователя важную информацию.
{% embed url="" %}
Пример обращения к оповещениям через JS
{% endembed %}
В примере выше, показан способ взаимодействия с оповещениями через Javascript. Если есть необходимость создавать их без использования Javascript, то можно использовать код ниже
```html
You have a new messages!
```
Внутри контейнера `.alert` может содержаться множество оповещений и нет необходимости создавать новый, однако если его положение (placement) отличается от существующих, то стоит добавить новый.
Метод `pipui.alert.open` создает новое оповещение и содержит в себе 4 параметра:\
**text** - Основной текст оповещения. Данный текст выводится в блоке `.alert-content`;\
**title** - Название оповещения. Данный текст выводится в блоке `.alert-footer > .block-left`;\
**placement** - Местоположение оповещения на экране. Данный метод можно использовать добавив параметр `data-placement="{Y}-{X}"` к блоку с классом `.alert-id`;\
**autoclose** - Автозакрытие оповещения. В качестве значения можно передать число миллисекунд или undefined. По умолчанию или если указано undefined, значение выставляется исходя из значения `pipui.alert.openTimeout`;\
**complete** - Анонимная функция, которая выполнится по окончанию вывода оповещения
Свойство `pipui.alert.openTimeout` задает время по умолчанию, через которое оповещение исчезнет
Метод `pipui.alert.open(``text, title, placement, autoclose, complete``)` создает новое оповещение и выводит его
Метод `pipui.alert.close(``e, complete``)` закрывает оповещение с его последующим удалением
Метод `pipui.alert.hide(``e, complete``)` закрывает оповещение без его удаления
Метод `pipui.alert.show(``e, complete``)` открывает закрытое оповещение
# Подтверждения действий
Как известно, стандартные методы Javascript не позволяют кастомизировать метод confirm(), по этому мы решили добавить такую возможность в наш фреймворк
```html
```
{% embed url="" %}
Пример кода выше
{% endembed %}
Метод confirm() может принимать 8 аргументов. Все эти аргументы можно передать через первый аргумент в виде JSON объекта
`params` - текст подтверждения или набор JSON параметров
`title` - имя окна подтверждения
`success` - функция, которая выполниться при нажатии на кнопку "ОК"
`fail` - функция, которая выполниться при нажатии на кнопку "Отмена"
`autoclose` - кол-во миллисекунд, через которое окно автоматически закроется
`complete` - функция, которая запуская по окончанию появления окна подтверждения
`yes` - имя кнопки "ОК"
`no` - имя кнопки "Отмена"
# Вкладки
Вкладки позволяют разделять контент на разделы и переключаться по ним, как с помощью прямого обращения, так и через javascript. PipUI позволяет с легкостью реализовать данный подход, используя всего несколько строчек кода
```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 %}
Контейнером для вкладок выступает блок `.tabs`, который в себе имеет 2 других контейнера `ul.tab-links` и `.tab-list` для вкладок и их содержимого соответственно.
Элемент с классом `.tab-link` внутри блока `ul.tab-links > li` выступает в качестве триггера, который должен иметь в себе отсылку к содержимому вкладки, через атрибут `data-id`
Совместно с классом `.tabs`, Вы можете использовать класс `.tabs-horizontal`, который сделает вкладки и их содержимое горизонтальными.
Помимо HTML, Вы можете менять активность вкладок через javascript метод `pipui.tabs.active`, принимающий 1 входящий параметр **id**, который является элементом содержимого вкладки. Данный метод возвращает true или false в зависимости от того, была ли переключена вкладка или нет.
```javascript
pipui.tabs.active('#example-tab-2')
```
Кроме всего прочего, Вы можете манипулировать цветами панели вкладок и их содержимым, их отступами и др., используя другие компоненты фреймворка.
```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 %}
# Хлебные крошки
Когда необходимо выводить путь до страницы, Вы можете воспользоваться готовым компонентом фреймворка PipUI - хлебные крошки
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
# Спойлеры
```html
Показать/Скрыть
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Вы можете управлять скрытием и открытием по отдельности
```html
ПоказатьСкрыть
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Помимо всего прочего, Вы можете управлять содержимым спойлера через javascript и таким образом кастомизировать спойлеры
В состав компонента входит "аккордеон", который работает аналогично спойлеру, только при открытии одного элемента, закрываются все другие
```html
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
# Таблицы
В PipUI есть готовые стили для таблиц, а так же их адаптивная версия под разные разрешения экранов.
```html
1
PipUI Alpha
1.0.0
2
PipUI Beta
1.0.0RC-2
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Для адаптивной таблицы, потребуется дополнительно указать класс `.table-responsive` к классу .table и продублировать элементы названий шапки с классом `.table-cell-resp`
Example responsive
```html
#
#
Наименование
Наименование
Версия
Версия
#
1
Наименование
PipUI Alpha
Версия
1.0.0
#
2
Наименование
PipUI Beta
Версия
1.0.0RC-2
```
Если Вам необходимо зафиксировать ширину каждого столбца, используйте класс `.table-fixed` или если потребуется сделать каждый ряд подсвечиваемым при наведении, добавьте класс `.table-hover` к классу .table
Example fixed & hover
```html
#
#
Наименование
Наименование
Версия
Версия
1
PipUI Alpha
1.0.0
2
PipUI Beta
1.0.0RC-2
3
PipUI
1.0.0
4
PipUI
2.0.0
```
# Панель BB-кодов
Вы можете интегрировать панель BB-кодов прямо в текстовое поле, добавив всего-лишь 1 класс `.bbpanel`
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Управлять доступными тегами можно используя javascript. Код ниже добавит тег \[url]\[/url] в панель
```javascript
pipui.bbpanel.codes.url = {'title': 'Гиперссылка', 'text': '', 'left': '[url]', 'right': '[/url]'};
```
# BB-коды
coВ составе фреймворка 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
```
# Валидаторы форм
Очень часто перед отправкой формы, требуется произвести ее проверку на корректность заполнения полей в ней и для этого в фреймворке PipUI есть соответствующий компонент.
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Вы можете управлять стилем появляющейся подсказки с помощью атрибута\ `[data-formvalidator-type]`, который может принимать значения: *warning*, *danger*, *info*, *success* Атрибут `[data-formvalidator-text]` принимает в качестве значения тект, который будет выводится в оповещении в случает некорректного заполнения поля.
# Индексы полей ввода
Иногда бывает так, что появляется необходимость управлять индексами полей ввода. Казалось бы, что для этого неплохо подойтет атрибут tabindex, однако помимо данного атрибута учитываются и другие встроенные компоненты, например ссылки или адресная строка.
Именно из-за таких ситуаций и был разработан данный компонент, который выступает ограничителем.
Атрибут `[data-tabindex]` служит для определения блока в котором работают атрибуты `[tabindex]`
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
# Всплывающие подсказки
Компонент всплывающих подсказок - это отличная альтернатива стандартным атрибутам title. Используйте атрибут `data-tooltip` вместо стандартного *title*, для работы всплывающих подсказок.
Для направления отображения используйте альтернативный синтаксис `data-tooltip-left`, `data-tooltip-right`, `data-tooltip-top`, `data-tooltip-bottom` (слева, справа, сверху, снизу соответственно).
```html
По умолчанию |
Слева |
Сверху |
Снизу |
Справа
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
# Подсвечивающиеся блоки
Иногда есть необходимость выделить конкретные участки сайта, для привлечения к ним пользовательского внимания.
Для этого нам на помощь придут подсвечивающиеся блоки. При активации такой подсветки, область вокруг блоков затемняется и становится недоступной до момента нажатия отмены, а пользователя переместит к выделенной области(скролл)
Для наглядности, мы добавили несколько блоков ниже. По нажатию на кнопки, они будут выделяться
{% embed url="" %}
Пример
{% endembed %}
Для подсвечивания нужного блока, добавьте ему триггер, например, атрибут `id` и выводимый в подсказке текст в атрибут `data-poplight-message`.
В качестве элемента, который будет вызывать подсветку, используйте атрибут\ `data-poplight`, где в качестве значения будет триггер(в примере ранее - это id).
*Если указать в атрибуте data-poplight-message другой элемент (id,класс,атрибут), то будет вызван другой блок, который вы можете добавить самостоятельно с классом*\ `.poplight-message`
Влиять на поведение подсветки можно и с помощью javascript. Для этого в компоненте подготовлен объект `pipui.poplight`
# Всплывающие блоки
Если есть необходимость использовать HTML во всплывающих подсказках([tooltip](/components/tooltip)), то вам могут помочь всплывающие блоки.
```html
Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, sit?
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Значение атрибута `data-popup` служит определяющим элементом, который вызовет блок `.popup`
Скрытие всплывающего блока можно контролировать, добавив атрибут\ `data-popup-closeover` к блоку с классом `.popup`.
Таким образом, при нажатии на область вне блока `.popup`, все остальные блоки `.popup` с атрибутом `data-popup-closeover` будут автоматически скрыты.
Положение всплывающего блока зависит от атрибута `data-popup-placement`, принимающего значения: **left**, **top**(по умолчанию), **right** и **bottom**.
Так или иначе, в случае недостатка места на экране для отображения в заданном направлении, компонент будет искать новое направление автоматически.
```html
Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
# Слайдер
Слайдер - отличное дополнение для вашего сайта, когда необходимо показать специальные акции или другое интересное содержимое, которое может быть не только изображением, но и любым другим контентом.
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Вы можете назначить объект .slider() переменной и управлять им через эту переменную, выставляя настройки во время выполнения скрипта.
# Автозаполнение
Автозаполнение помогает автоматический получать данные и выводить их в списке под полем ввода.
Некоторые из параметров, передаваемых обработчику, можно задать через атрибут\ `data-ac-*`. Так, например, `data-ac-url` - задает URL адрес обработчика,\ `data-ac-method` - метод передачи обработчику, `data-ac-type` - тип получаемых данных, `data-ac-data` - список элементов через запятую, `data-ac-min` - минимальное кол-во вводимых символов, по которым будет обрабатываются результат.
Остальные параметры можно передать через опции объекта `pipui.autocomplete`
```javascript
var ac = new pipui.autocomplete($('#example1'));
ac
.setData(tags) // Список элементов в виде строки/массива/объекта
.setType('json') // Как будут обрабатываться входящие данные
.setKey('title') // По какому параметру будет производится поиск
.setMin(5) // Минимальное кол-во символов для активации поиска
.setParams(formdata) // По умолчанию в запросе передается только параметр value, но вы можете добавить к нему дополнительные параметры через объект formData
.setURL('') // URL адрес, на который будет отправлен запрос
.setMethod('POST') // Метод передаваемых данных. По умолчанию используется GET
.setTimer(300) // Задержка при поиске результатов. По умолчанию 300
.setResults(10) // Максимальное кол-во выдаваемых результатов. По умолчанию 10
.setInput(element) // Объект поля ввода
.setTemplateSelector('
') // Изменение шаблона элемента по умолчанию. В качестве зарезервированных шаблонных ключей можно использовать: {KEY} - ключ элемента списка; {VALUE} - значение элемента списка; {ИМЯ_ПАРАМЕТРА} - любой ключ из объекта
.setTemplateBlock('...html...'); // Изменение шаблона блока списка по умолчанию. В качестве зарезервированных шаблонных ключей можно использовать {ID} - уникальный ID блока автозаполнения; {ITEMS} - список найденных элементов
```
# Селектор тегов
Селектор тегов помогает осуществить выборку ключевых слов или предложений.
В качестве разделителей используются запятая или клавиша ENTER.
Все полученные результаты помещаются в скрытое поле ввода. По умолчанию атрибут name данного поля имеет значение tags, которое можно поменять через атрибут data-ts в поле ввода.
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Некоторые из параметров, передаваемых обработчику, можно задать через атрибут\ `data-ts-*`. Так, например, `data-ts-separator` - задает разделить предустановленного значания value, `data-ts-min` - минимальную длину тега, `data-ts-max` - максимальную длину тега, `data-ts-name` - имя результирующего поля, `data-ts-position` - позиция куда будут добавляться теги (start - вначале, end - вконце), `data-ts-mintags` - минимальное кол-во тегов, `data-ts-maxtags` - максимальное кол-во тегов.
Остальные параметры можно передать через опции объекта `pipui.tagselector`
```javascript
var ts = new pipui.tagselector($('#example1'));
ts
.setMin(1) // Минимальное кол-во символов для добавления тега. По умолчанию 1
.setMax(32) // Максимальное кол-во символов для добавления тега. По умолчанию 32
.setKeys([',', 'Enter']) // Клавиши, по нажатию которых произойдет инициация добавления тега
.setPosition('end') // Как будут вставляться теги в списке - вначале или вконце(start или end соответственно). По умолчанию вконце - end
.setSeparator(',') // Разщделитель предустановленного значания value
.setMinTags(0) // Минимальное кол-во вставляемых тегов. По умолчанию 0 - без лимита
.setMaxTags(0) // Максимальное кол-во вставляемых тегов. По умолчанию 0 - без лимита
.setName('tags') // Имя результирующего поля
.append(value) // Добавить тег вконец списка
.prepend(value) // Добавить тег вначало списка
//.exists(key) // Проверяет наличие тега по ключу
.remove(key) // Удаляет тег по ключу
.clear() // Удаляет все теги из списка
//.length() // Возвращает кол-во тегов
.onclear(f()) // Действие, которое произойдет при удалении всех тегов(clear)
.onpush(f(value, name, position)) // Действие, которое произойдет при добавлении тега
.setTemplateSelector('...html...') // Изменение шаблона элемента по умолчанию. В качестве зарезервированных шаблонных ключей можно использовать: {KEY} - ключ элемента списка; {VALUE} - значение элемента списка; {NAME} - имя результирующего поля
.setTemplateBlock('...html...'); // Изменение шаблона блока списка по умолчанию. В качестве зарезервированных шаблонных ключей можно использовать {ID} - уникальный ID селектора
```
Вы так же можете использовать селектор тегов и [автозаполнение](/components/autocomplete)
```javascript
$(function(){
var ts = new p.tagselector($('.ts-1')).setDisableEvents(true);
var ac = new p.autocomplete($('.ac-1'));
ac.choice(function(data){ ts.append(data.value, data.key).getInput().val(''); });
});
```
# Блоки оповещений
Блок оповещений - стилизованный блок для привлечения внимания пользователей.
```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? Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Aliquid aperiam asperiores deleniti et fuga harum,
ipsam laboriosam laborum nam nemo nobis numquam ratione,
repellat repudiandae totam ullam ut velit vitae.
```
```html
Attention!
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? Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Aliquid aperiam asperiores deleniti et fuga harum, ipsam laboriosam
laborum nam nemo nobis numquam ratione, repellat repudiandae totam ullam ut velit vitae.
```
Вы можете использовать класс `.alertblock` совместно с классами `.alertblock-before` и `.alertblock-after` которые зададут необходимые отступы по краям для блоков `.before` и `.after`, куда вы сможете вставить небольшие элементы, типа иконок и/или кнопки закрытия.
```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? Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Aliquid aperiam asperiores deleniti et fuga
harum, ipsam laboriosam laborum nam nemo nobis numquam ratione,
repellat repudiandae totam ullam ut velit vitae.
```
Кнопка закрытия - элемент `.alertblock-close` служит для закрытия родительского блока `.alertblock`
Если вам требуется закрытие других элементов `.alertblock`, используйте javascript код, который представлен ниже
```javascript
pipui.alertblock.hide('#element'); // Скрыть элемент
pipui.alertblock.show('#element'); // Показать элемент
```
# Селекторы даты и времени
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Инициализация селекторов происходит в поле ввода одним из двух атрибутов:\ `data-datepicker` или `data-datetimepicker`
Атрибут `data-datepicker-autoclose="true"` используется для автоматического закрытия после выбора даты
# Якоря
Якоря позволяют организовать переход к элементу с анимацией
```html
```
{% embed url="" %}
Полный пример кода выше
{% endembed %}
# Контакты
На данной страницы вы найдёте актуальную информацию о средствах связи с нами
#### Предложения и сотрудничество
E-Mail:
#### Социальные сети
VK:
Telegram:
```
Цитата (теги `[quote][/quote]`)
```html