UIkit 3

Примеры создания сайтов с применением фреймворка UIKit 3

Русскоязычная документация по фреймворку UIkit 3. Уроки, примеры кода UIkit.
  1. Создавайте гибкие миниатюры для навигации с применением FlexBox.

    Как использовать компонент Thumbnav в UIkit 3

    Чтобы создать навигацию с миниатюрами, используйте классы, приведенные в таблице ниже. Этот компонент построен с применением Flexbox. Читать документацию по компоненту Flex.

    Класс Описание
    .uk-thumbnav Добавьте этот класс к элементу<ul> для активации компонента. Миниатюры вложите в элемент <a>.
    .uk-active Добавьте этот класс элементу списка для влючения активного состояния.
    <ul class="uk-thumbnav">
        <li class="uk-active"><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
    </ul>
    

    Внимание Для улучшения отображения добавьте класс атрибут uk-margin из компонента Margin.

    • <ul class="uk-thumbnav" uk-margin>
          <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="100" alt=""></a></li>
          <li><a href="#"><img src="images/dark.jpg" width="100" alt=""></a></li>
          <li><a href="#"><img src="images/light.jpg" width="100" alt=""></a></li>
      </ul>

    Вертикальное выравнивание списка

    Навигация может отображаться вертикально. Для этого добавьте модификатор .uk-thumbnav-vertical к элементу <ul>.

    <ul class="uk-thumbnav uk-thumbnav-vertical">...</ul>
    
    • <ul class="uk-thumbnav uk-thumbnav-vertical" uk-margin>
          <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="100" alt=""></a></li>
          <li><a href="#"><img src="images/dark.jpg" width="100" alt=""></a></li>
          <li><a href="#"><img src="images/light.jpg" width="100" alt=""></a></li>
      </ul>

    Использование навигации в качестве наложения

    Такая навигация может быть использована в сочетании с различными компонентами UIkit 3. В данном примере показан пример использования миниатюр в качестве панели навигации для компонента Slideshow. Добавьте класс семейства .uk-position-* из компонента Позиции к элементу div.
    Создайте контекст наложения, добавив класс .uk-position-relative. В результате получится такая разметка:

    <div class="uk-position-relative">
    
        <!-- Компонент, находящийся внутри обертки  -->
    
        <div class="uk-position-bottom-center uk-position-small">
            <ul class="uk-thumbnav">...</ul>
        </div>
    
    </div>
    
    • <div class="uk-position-relative" uk-slideshow="animation: fade">
      
          <ul class="uk-slideshow-items">
              <li>
                  <img src="images/photo.jpg" alt="" uk-cover>
              </li>
              <li>
                  <img src="images/dark.jpg" alt="" uk-cover>
              </li>
              <li>
                  <img src="images/light.jpg" alt="" uk-cover>
              </li>
          </ul>
      
          <div class="uk-position-bottom-center uk-position-small">
              <ul class="uk-thumbnav">
                  <li uk-slideshow-item="0"><a href="#"><img src="images/photo.jpg" width="100" alt=""></a></li>
                  <li uk-slideshow-item="1"><a href="#"><img src="images/dark.jpg" width="100" alt=""></a></li>
                  <li uk-slideshow-item="2"><a href="#"><img src="images/light.jpg" width="100" alt=""></a></li>
              </ul>
          </div>
      
      </div>
  2. Сообщайте пользователям о важных событиях и выделяйте части вашего контента с помощью лейблов.

    Как использовать компонент Label в UIkit

    Для активации стилей добавьте класс .uk-label к нужному элементу, например, <span>.

    <span class="uk-label"></span>
    
    • Default
    • <span class="uk-label">Default</span>

    Модификаторы

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

    Класс Описание
    .uk-label-success Выводит сообщение об успешном выполнении операции.
    .uk-label-warning Выводит сообщение с текстом предупреждения.
    .uk-label-danger Выводит сообщения об ошибке.
    <span class="uk-label uk-label-success"></span>
    
    • Default Success Warning Danger
    • <span class="uk-label">Default</span>
      
      <span class="uk-label uk-label-success">Success</span>
      
      <span class="uk-label uk-label-warning">Warning</span>
      
      <span class="uk-label uk-label-danger">Danger</span>
  3. Создавайте хлебные крошки, чтобы показывать пользователям их местоположение на веб-сайте.

    Как использовать хлебные крошки в UIkit 3

    Компонент Breadcrumb состоит из ссылок, которые располагаются горизонтально и разделены разделителем. Добавьте класс .uk-breadcrumb к элементу <ul> для активации компонента. Используйте тег <a> для элементов списка. Активное состояние автоматически применяется к последнему элементу <li> вашего списка.

    Чтобы добавить элементы списка без ссылки (неактивный элемент), используйте тег <span> вместо <a>. Или отключите элемент <a> путем подстановки класса .uk-disabled элементу <li>. Не забудьте убрать атрибут href, чтобы сделать ссылку неактивной.

    <ul class="uk-breadcrumb">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><span></span></li>
    </ul>
    
    • <ul class="uk-breadcrumb">
          <li><a href="#">Главная</a></li>
          <li><a href="#">Каталог</a></li>
          <li class="uk-disabled"><a>Неактивная ссылка</a></li>
          <li><span>Элемент span </span></li>
      </ul>
  4. Создавайте информационные уведомления, которые исчезают автоматически.

    Использование

    Уведомление не исчезнет, а останется видимым при наведении на сообщение, пока оно не прекратится. Вы также можете закрыть уведомление, нажав на него.Для отображения уведомлений компонент предоставляет простой JavaScript API. Следующий фрагмент кода поможет вам начать.

    JavaScript

    UIkit.notification({
        message: 'my-message!',
        status: 'primary',
        pos: 'top-right',
        timeout: 5000
    });
    
    // Shortcuts
    UIkit.notification('Сообщение');
    UIkit.notification('Сообщение', status);
    UIkit.notification('Сообщение', { /* options */ });
    
    • <button class="demo uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Сообщение'})">Кликните</button>

    HTML формат

    Вы можете использовать HTML внутри своего уведомления и значки из компонента Иконки.

    UIkit.notification("<span uk-icon='icon: check'></span> Сообщение");
    
    • <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: '<span uk-icon=\'icon: check\'></span> Message with an icon'})">With icon</button>

    Позиционирование уведомлений

    Добавьте один из следующих параметров, чтобы настроить положение уведомления в различных местах.

    UIkit.notification("...", {pos: 'top-right'})
    
    Позиция Код
    top-left UIkit.notification("...", {pos: 'top-left'})
    top-center UIkit.notification("...", {pos: 'top-center'})
    top-right UIkit.notification("...", {pos: 'top-right'})
    bottom-left UIkit.notification("...", {pos: 'bottom-left'})
    bottom-center UIkit.notification("...", {pos: 'bottom-center'})
    bottom-right UIkit.notification("...", {pos: 'bottom-right'})
    • <p uk-margin>
          <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Left...', pos: 'top-left'})">Top Left</button>
          <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Center...', pos: 'top-center'})">Top Center</button>
          <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Right...', pos: 'top-right'})">Top Right</button>
          <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Left...', pos: 'bottom-left'})">Bottom Left</button>
          <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Center...', pos: 'bottom-center'})">Bottom Center</button>
          <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Right...', pos: 'bottom-right'})">Bottom Right</button>
      </p>

    Стиль

    Можно изменить стиль уведомления, добавив к нему соответствующий статус — успешно, предупреждение или опасность.

    UIkit.notification("...", {status: 'primary'})
    
    Стиль Код
    primary UIkit.notification("...", {status:'primary'})
    success UIkit.notification("...", {status:'success'})
    warning UIkit.notification("...", {status:'warning'})
    danger UIkit.notification("...", {status:'danger'})
    • <p uk-margin>
          <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Primary message...', status: 'primary'})">Primary</button>
          <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Success message...', status: 'success'})">Success</button>
          <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Warning message...', status: 'warning'})">Warning</button>
          <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Danger message...', status: 'danger'})">Danger</button>
      </p>

    Закрыть все

    Вы можете закрыть все открытые уведомления, вызвав UIkit.notification.closeAll().

    • <button class="uk-button uk-button-default close" onclick="UIkit.notification.closeAll()">Close All</button>

    Опции компонента

    Любой из этих параметров может быть применен к атрибуту компонента. Разделяйте несколько вариантов точкой с запятой. Подробнее о синтаксисе

    Опция Значение По умолчанию Описание
    message String false Текст уведомления.
    status String null Цвет статуса сообщения.
    timeout Integer 5000 Продолжительность отображения до исчезновения уведомления.
    group String null Пригодится, если вы хотите закрыть все уведомления в определенной группе.
    pos String top-center В каком углу будет появляться.

    JavaScript

    Подробнее о компонентах JavaScript.

    Initialization

    Это функциональный компонент, в котором может отсутствовать аргумент элемента.

    UIkit.notification(options);
    UIkit.notification(message, status);
    

    События

    Следующие события будут инициированы для элементов, связанных с этим компонентом:

    Имя Описание
    close Срабатывает после закрытия уведомления.

    Методы

    Для компонента доступны следующие методы:

    Close

    UIkit.notification(element).close(immediate);
    

    Закрывает уведомление.

    Имя Тип По умолчанию Описание
    immediate Boolean true Отправка уведомления куда-либо.
  5. С помощью компонента Формы можно создавать красивые адаптивные формы.

    Как использовать компонент Формы в Uikit 3

    Добавьте один из следующих классов, чтобы сформировать элементы управления внутри тега <form>.

    Класс Описание
    .uk-input Добавьте этот класс для элемента <input>.
    .uk-select Добавьте этот класс для элемента <select>.
    .uk-textarea Добавьте этот класс для элемента <textarea>.
    .uk-radio Добавьте этот класс для элемента <input type="radio">, чтобы стилизовать радио кнопку.
    .uk-checkbox Добавьте этот класс для элемента <input type="checkbox">, чтобы стилизовать чекбоксы.
    .uk-range Добавьте этот класс для элемента <input type="range">, чтобы стилизовать слайдер диапазона.
    <form>
        <select class="uk-select">
            <option></option>
            <option></option>
        </select>
        <textarea class="uk-textarea"></textarea>
        <input class="uk-radio" type="radio">
        <input class="uk-checkbox" type="checkbox">
        <input class="uk-range" type="range">
    </form>
    

    Добавьте класс .uk-fieldset к элементу <fieldset> и класс .uk-legend к элементу <legend>, чтобы задать набор полей и легенду формы.

    • Легенда
    • <form>
          <fieldset class="uk-fieldset">
      
              <legend class="uk-legend">Легенда</legend>
      
              <div class="uk-margin">
                  <input class="uk-input" type="text" placeholder="Input">
              </div>
      
              <div class="uk-margin">
                  <select class="uk-select">
                      <option>Опция 01</option>
                      <option>Опция 02</option>
                  </select>
              </div>
      
              <div class="uk-margin">
                  <textarea class="uk-textarea" rows="5" placeholder="Textarea"></textarea>
              </div>
      
              <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
                  <label><input class="uk-radio" type="radio" name="radio2" checked> A</label>
                  <label><input class="uk-radio" type="radio" name="radio2"> B</label>
              </div>
      
              <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
                  <label><input class="uk-checkbox" type="checkbox" checked> A</label>
                  <label><input class="uk-checkbox" type="checkbox"> B</label>
              </div>
      
              <div class="uk-margin">
                  <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
              </div>
      
          </fieldset>
      </form>

    Модификаторы состояния

    Предоставьте пользователю информацию о состоянии элементов управления формы с помощью одного из следующих классов. Эти классы следует использовать для валидации форм UIkit.

    Класс Описание
    .uk-form-danger Добавьте этот класс, чтобы уведомить пользователя о том, что значение не проверено.
    .uk-form-success Добавьте этот класс, чтобы уведомить пользователя о том, что значение проверено.

    Добавьте атрибут disabled к элементу управления формы, и он будет казаться приглушенным.

    • <div class="uk-margin">
          <input class="uk-input uk-form-danger uk-form-width-medium" type="text" placeholder="form-danger" value="form-danger">
      </div>
      
      <div class="uk-margin">
          <input class="uk-input uk-form-success uk-form-width-medium" type="text" placeholder="form-success" value="form-success">
      </div>
      
      <div class="uk-margin">
          <input class="uk-input uk-form-width-medium" type="text" placeholder="disabled" value="disabled" disabled>
      </div>

    Модификаторы размера

    Добавьте один из классов к <input>, <select> или <textarea> для изменения его размера.

    Класс Описание
    .uk-form-large Этот класс увеличивает размер элемента.
    .uk-form-small Этот класс уменьшает размер элемента .
    • <form>
      
          <div class="uk-margin">
              <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="Большой">
          </div>
      
          <div class="uk-margin">
              <input class="uk-input uk-form-width-medium" type="text" placeholder="Стандартный">
          </div>
      
          <div class="uk-margin">
              <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Маленький">
          </div>
      
      </form>

    Модификаторы ширины

    Добавьте один из этих классов к эементу <input>, <select> или <textarea> для установки ширины.

    Class Description
    .uk-form-width-large Задает ширину 500px.
    .uk-form-width-medium Задает ширину 200px.
    .uk-form-width-small Задает ширину 130px.
    .uk-form-width-xsmall Задает ширину 40px.
    • <form>
      
          <div class="uk-margin">
              <input class="uk-input uk-form-width-large" type="text" placeholder="Большой">
          </div>
      
          <div class="uk-margin">
              <input class="uk-input uk-form-width-medium" type="text" placeholder="Средний">
          </div>
      
          <div class="uk-margin">
              <input class="uk-input uk-form-width-small" type="text" placeholder="Маленький">
          </div>
      
          <div class="uk-margin">
              <input class="uk-input uk-form-width-xsmall" type="text" placeholder="Очень маленький">
          </div>
      
      </form>

    Вы можете добавить классы семейства .uk-width-* из компонента Ширина для применения большего количества вариантов.

    • <form>
          <input class="uk-input uk-width-1-2" type="text" placeholder="uk-width-1-2">
      </form>

    Модификатор минимизации стилей

    Добавьте класс .uk-form-blank для минимизации стиля элементов управления формы.

    • <form>
          <input class="uk-input uk-form-blank uk-form-width-medium" type="text" placeholder="Form blank">
      </form>

    Макет формы

    Определите метки и элементы управления, примените сложенный или горизонтальный макет к элементам формы. Модификаторы макета могут быть добавлены к любому родительскому элементу, например <fieldset>. Это позволяет иметь разные макеты форм для каждого набора полей.

    Класс Описание
    .uk-form-stacked Добавьте этот класс для отображения надписей над элементами управления.
    .uk-form-horizontal Добавьте этот класс для отображения меток и элементов управления рядом.
    .uk-form-label Добавьте этот класс для определения меток формы.
    .uk-form-controls Добавьте этот класс для определения элементов управления формы.
    <form class="uk-form-stacked">
        <div>
            <label class="uk-form-label"></label>
            <div class="uk-form-controls">...</div>
        </div>
        <div>
            <div class="uk-form-label"></div>
            <div class="uk-form-controls">...</div>
        </div>
    </form>
    
    • Радиокнопки

    • <form class="uk-form-stacked">
      
          <div class="uk-margin">
              <label class="uk-form-label" for="form-stacked-text">Текст</label>
              <div class="uk-form-controls">
                  <input class="uk-input" id="form-stacked-text" type="text" placeholder="Какой-то текст...">
              </div>
          </div>
      
          <div class="uk-margin">
              <label class="uk-form-label" for="form-stacked-select">Селект</label>
              <div class="uk-form-controls">
                  <select class="uk-select" id="form-stacked-select">
                      <option>Опция 01</option>
                      <option>Опция 02</option>
                  </select>
              </div>
          </div>
      
          <div class="uk-margin">
              <div class="uk-form-label">Радиокнопки</div>
              <div class="uk-form-controls">
                  <label><input class="uk-radio" type="radio" name="radio1"> Опция 01</label><br>
                  <label><input class="uk-radio" type="radio" name="radio1"> Опция 02</label>
              </div>
          </div>
      
      </form>

    Горизонтальные формы

    Используйте класс .uk-form-controls-text для качественного выравнивания флажков и переключателей при использовании их с текстом в горизонтальной компоновке.

    <form class="uk-form-horizontal">
        <div>
            <label class="uk-form-label"></label>
            <div class="uk-form-controls">...</div>
        </div>
        <div>
            <div class="uk-form-label"></div>
            <div class="uk-form-controls uk-form-controls-text">...</div>
        </div>
    </form>
    
    • Radio

    • <form class="uk-form-horizontal uk-margin-large">
      
          <div class="uk-margin">
              <label class="uk-form-label" for="form-horizontal-text">Текст</label>
              <div class="uk-form-controls">
                  <input class="uk-input" id="form-horizontal-text" type="text" placeholder="Какой-то текст...">
              </div>
          </div>
      
          <div class="uk-margin">
              <label class="uk-form-label" for="form-horizontal-select">Select</label>
              <div class="uk-form-controls">
                  <select class="uk-select" id="form-horizontal-select">
                      <option>Опция 01</option>
                      <option>Опция 02</option>
                  </select>
              </div>
          </div>
      
          <div class="uk-margin">
              <div class="uk-form-label">Radio</div>
              <div class="uk-form-controls uk-form-controls-text">
                  <label><input class="uk-radio" type="radio" name="radio1"> Опция 01</label><br>
                  <label><input class="uk-radio" type="radio" name="radio1"> Опция 02</label>
              </div>
          </div>
      
      </form>

    Формы и иконки

    Вы можете использовать формы вместе с иконками из компонента Иконки. Добавьте класс .uk-form-icon к элементу <span>. Сгруппируйте их с элементами <input> и добавьте класс .uk-inline из компонента Utility component к родительскому контейнеру. Иконка должна стоять первой в разметке. По умолчанию иконка будет размещена в левой части формы. Чтобы изменить ее положение, задайте класс .uk-form-icon-flip.

    <div class="uk-inline">
        <span class="uk-form-icon" uk-icon="icon: user"></span>
        <input class="uk-input">
    </div>
    
    • <form>
      
          <div class="uk-margin">
              <div class="uk-inline">
                  <span class="uk-form-icon" uk-icon="icon: user"></span>
                  <input class="uk-input" type="text">
              </div>
          </div>
      
          <div class="uk-margin">
              <div class="uk-inline">
                  <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
                  <input class="uk-input" type="text">
              </div>
          </div>
      
      </form>

    Кликабельные иконки

    Чтобы включить действие, например, открыть модальное окно, используйте элементы <a> или <button> и добавьте в них иконку.

    <div class="uk-inline">
        <a class="uk-form-icon uk-form-icon-flip" href="" uk-icon="icon: user"></a>
        <input class="uk-input">
    </div>
    
    • <form>
      
          <div class="uk-margin">
              <div class="uk-inline">
                  <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
                  <input class="uk-input" type="text">
              </div>
          </div>
      
          <div class="uk-margin">
              <div class="uk-inline">
                  <a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: link"></a>
                  <input class="uk-input" type="text">
              </div>
          </div>
      
      </form>

    Формы и сетка

    Вы можете использовать компоненты Сетка и Ширина для создания сложных макетов форм.

    • <form class="uk-grid-small" uk-grid>
          <div class="uk-width-1-1">
              <input class="uk-input" type="text" placeholder="100">
          </div>
          <div class="uk-width-1-2@s">
              <input class="uk-input" type="text" placeholder="50">
          </div>
          <div class="uk-width-1-4@s">
              <input class="uk-input" type="text" placeholder="25">
          </div>
          <div class="uk-width-1-4@s">
              <input class="uk-input" type="text" placeholder="25">
          </div>
          <div class="uk-width-1-2@s">
              <input class="uk-input" type="text" placeholder="50">
          </div>
          <div class="uk-width-1-2@s">
              <input class="uk-input" type="text" placeholder="50">
          </div>
      </form>

    Пользовательская разметка

    Чтобы заменить входные файлы или выбрать формы с вашим собственным содержимым HTML, например, кнопка или текст, добавьте атрибут uk-form-custom к родительскому элементу.

    Файл

    Используйте кнопку или текст в качестве элемента загрузки файла.

    <div uk-form-custom>
        <input type="file">
        <button type="button"></button>
    </div>
    
    • Это текст
      Загрузить
    • <form>
      
          <div class="uk-margin">
              <div uk-form-custom>
                  <input type="file">
                  <button class="uk-button uk-button-default" type="button" tabindex="-1">Селект</button>
              </div>
          </div>
      
          <div class="uk-margin">
              <span class="uk-text-middle">Это текст</span>
              <div uk-form-custom>
                  <input type="file">
                  <span class="uk-link">Загрузить</span>
              </div>
          </div>
      
          <div class="uk-margin" uk-margin>
              <div uk-form-custom="target: true">
                  <input type="file">
                  <input class="uk-input uk-form-width-medium" type="text" placeholder="Выбрать файл" disabled>
              </div>
              <button class="uk-button uk-button-default">Отправить</button>
          </div>
      
      </form>

    Селекты

    Используйте кнопку, текст или ссылку в качестве формы выбора. Задайте опцию target: SELECTOR к атрибуту uk-form-custom, чтобы выбрать, где должен отображаться select. target: true выберет соседний элемент в разметке.

    <div uk-form-custom="target: true">
        <select>
            <option></option>
            <option></option>
        </select>
        <button type="button"></button>
    </div>
    
    • Опция 01
      Опция 01
    • <form>
      
          <div class="uk-margin">
              <div uk-form-custom="target: true">
                  <select>
                      <option value="1">Опция 01</option>
                      <option value="2">Опция 02</option>
                      <option value="3">Опция 03</option>
                      <option value="4">Опция 04</option>
                  </select>
                  <span></span>
              </div>
          </div>
      
          <div class="uk-margin">
              <div uk-form-custom="target: > * > span:last-child">
                  <select>
                      <option value="1">Опция 01</option>
                      <option value="2">Опция 02</option>
                      <option value="3">Опция 03</option>
                      <option value="4">Опция 04</option>
                  </select>
                  <span class="uk-link">
                      <span uk-icon="icon: pencil"></span>
                      <span></span>
                  </span>
              </div>
          </div>
      
          <div class="uk-margin">
              <div uk-form-custom="target: > * > span:first-child">
                  <select>
                      <option value="">Выберите...</option>
                      <option value="1">Опция 01</option>
                      <option value="2">Опция 02</option>
                      <option value="3">Опция 03</option>
                      <option value="4">Опция 04</option>
                  </select>
                  <button class="uk-button uk-button-default" type="button" tabindex="-1">
                      <span></span>
                      <span uk-icon="icon: chevron-down"></span>
                  </button>
              </div>
          </div>
      
      </form>

    Опции компонента

    Вы можете добавлять следующие опции к атрибуту uk-form-custom. Подробнее об атрибутах

    Опция Значение По умолчанию Описание
    target CSS selector, Boolean false Значение цели для отображения селекта.

    JavaScript

    Подробнее о JavaScript компонентах.

    Инициализация

    UIkit.formCustom(element, options);