Form select
Замените <select> ("форма выбора" по умолчанию - элемент интерфейса в виде раскрывающегося списка) своим собственным содержимым HTML, таким как кнопка или текст.
Применение
Чтобы применить этот компонент, просто добавьте класс .uk-form-select
и атрибут data-uk-form-select
к элементу контейнера вокруг span и элемента <select>
. По сути, это перекроет (наложит) элемент выбора *select
по умолчанию на пользовательскую форму UIkit.
Пример
Разметка
<div class="uk-form-select" data-uk-form-select>
<span></span>
<select>
<option value="">...</option>
<option value="">...</option>
</select>
</div>
В виде кнопки
Добавьте класс .uk-button
к элементу контейнера, чтобы оформить его как кнопку.
Разметка
<div class="uk-button uk-form-select" data-uk-form-select>
<span></span>
<i class="uk-icon-caret-down"></i>
<select>
<option value="">...</option>
<option value="">...</option>
</select>
</div>
В виде ссылки
Вы можете использовать такой элемент, как <a>
в качестве select form. Просто добавьте опцию {target:'a'}
к атрибуту data-uk-form-select
и используйте <a>
вместо элемента <span>
.
Пример
Разметка
<div class="uk-form-select" data-uk-form-select="{target:'a'}">
<a></a>
<select>...</select>
</div>
Добавляем компонент к проекту
<link rel="stylesheet" href="/../css/components/form-select.min.css">
<script src="/../js/components/form-select.min.js"></script>