Компонент Поиск Search
Создание поиска. Кликабельная иконка поиска внутри панели навигации; открытие с использованием наложения или в модальном окне. Модификаторы.
Руководство
Компонент Поиск состоит из формы поиска и самого поискового ввода.
Класс | Описание |
---|---|
.uk-search |
Добавьте этот класс к элементу контейнера, чтобы определить компонент поиска. |
.uk-search-input |
Добавьте этот класс к элементу <input> , чтобы создать поле поиска. |
<form class="uk-search">
<input class="uk-search-input" type="search" placeholder="" aria-label="">
</form>
По умолчанию Поиск не имеет дополнительных стилей.
В этом примере используется модификатор .uk-search-default
.
Поиск с иконкой
Чтобы создать иконку поиска, добавьте атрибут uk-search-icon
к элементу <span>
.
Чтобы изменить выравнивание, установив значёк с правой стороны, добавьте класс .uk-search-icon-flip
.
<form class="uk-search uk-search-default">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="" aria-label="">
</form>
-
-
<div class="uk-margin"> <form class="uk-search uk-search-default"> <span uk-search-icon></span> <input class="uk-search-input" type="search" placeholder="Поиск..." aria-label="Поиск"> </form> </div> <div class="uk-margin"> <form class="uk-search uk-search-default"> <span class="uk-search-icon-flip" uk-search-icon></span> <input class="uk-search-input" type="search" placeholder="Найти..." aria-label="Найти"> </form> </div>
Кликабельный поиск
Кликабельная иконка поиска
Чтобы использовать данную функциональность используйте элемент <a>
или <button>
для создания значка (иконки).
<form class="uk-search uk-search-default">
<a href="" uk-search-icon></a>
<input class="uk-search-input" type="search" placeholder="" aria-label="">
</form>
-
-
<div class="uk-margin"> <form class="uk-search uk-search-default"> <a href="" uk-search-icon></a> <input class="uk-search-input" type="search" placeholder="Поиск..." aria-label="Поиск"> </form> </div> <div class="uk-margin"> <form class="uk-search uk-search-default"> <a href="" class="uk-search-icon-flip" uk-search-icon></a> <input class="uk-search-input" type="search" placeholder="Найти..." aria-label="Найти"> </form> </div>
Модификатор «Default»
Чтобы применить стиль поиска по умолчанию, добавьте класс .uk-search-default
.
<form class="uk-search uk-search-default">...</form>
-
-
<form class="uk-search uk-search-default"> <span uk-search-icon></span> <input class="uk-search-input" type="search" placeholder="Поиск..." aria-label="Поиск"> </form>
Модификатор «Large»
Чтобы увеличить размер поиска, например, при создании "оверлейного" поиска, добавьте класс .uk-search-large
.
<form class="uk-search uk-search-large">...</form>
-
-
<form class="uk-search uk-search-large"> <span uk-search-icon></span> <input class="uk-search-input" type="search" placeholder="Поиск..." aria-label="Поиск"> </form>
Модификатор «Navbar»
Поиск может быть расположен внутри панели навигации из компонента Navbar.
Просто добавьте класс .uk-search-navbar
.
<form class="uk-search uk-search-navbar">...</form>
-
-
<nav class="uk-navbar-container" uk-navbar> <div class="uk-navbar-left"> <div class="uk-navbar-item"> <form class="uk-search uk-search-navbar"> <span uk-search-icon></span> <input class="uk-search-input" type="search" placeholder="Поиск..." aria-label="Поиск"> </form> </div> </div> </nav>
Состояние наведения
Toggle
Чтобы применить состояние наведения на значок поиска при использовании элемента <a>
или <button>
,
добавьте класс .uk-search-toggle
. Чтобы создать сам значок поиска, добавьте атрибут uk-search-icon
.
<a class="uk-search-toggle" href="" uk-search-icon></a>
Поиск в навигации
Поиск в панели навигации
Значок поиска можно использовать в качестве переключателя,
чтобы открыть поиск внутри навигационной панели используя наложение (Overlay),
выпадение (Drop) или выпадающий список Dropdown.
Можно открыть и снаружи в модальном окне. Просто добавьте класс .uk-navbar-toggle
к иконке.
<div class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-search-icon uk-toggle href=""></a>
</div>
</div>
- Пример №1
- Overlay :: Эффект наложения
- Пример №2
- С использованием компонента Drop
- Пример №3
- Dropdown :: Выпадающий поиск
- Пример №4
- Modal :: Поиск в модальном окне
-
-
<nav class="uk-navbar-container uk-margin" uk-navbar> <div class="nav-overlay uk-navbar-left"> <a class="uk-navbar-item uk-logo" href="#">Overlay</a> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Активно</a></li> <li><a href="#">Пункт</a></li> </ul> </div> <div class="nav-overlay uk-navbar-right"> <a class="uk-navbar-toggle" uk-search-icon uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#"></a> </div> <div class="nav-overlay uk-navbar-left uk-flex-1" hidden> <div class="uk-navbar-item uk-width-expand"> <form class="uk-search uk-search-navbar uk-width-1-1"> <input class="uk-search-input" type="search" placeholder="Поиск..." aria-label="Поиск" autofocus> </form> </div> <a class="uk-navbar-toggle" uk-close uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#"></a> </div> </nav>
-
-
<nav class="uk-navbar-container uk-margin" uk-navbar> <div class="uk-navbar-left"> <a class="uk-navbar-item uk-logo" href="#">Drop</a> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Активно</a></li> <li><a href="#">Пункт</a></li> </ul> </div> <div class="uk-navbar-right"> <div> <a class="uk-navbar-toggle" uk-search-icon href="#"></a> <div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0"> <form class="uk-search uk-search-navbar uk-width-1-1"> <input class="uk-search-input" type="search" placeholder="Поиск..." aria-label="Поиск" autofocus> </form> </div> </div> </div> </nav>
-
-
<nav class="uk-navbar-container uk-margin" uk-navbar> <div class="uk-navbar-left"> <a class="uk-navbar-item uk-logo" href="#">Dropdown</a> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Активно</a></li> <li><a href="#">Пункт</a></li> </ul> </div> <div class="uk-navbar-right"> <div> <a class="uk-navbar-toggle" href="#" uk-search-icon></a> <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-expand"> <form class="uk-search uk-search-navbar uk-width-1-1"> <input class="uk-search-input" type="search" placeholder="Найти..." aria-label="Найти" autofocus> </form> </div> <div class="uk-width-auto"> <a class="uk-drop-close" href="#" uk-close></a> </div> </div> </div> </div> </div> </nav>
-
-
<nav class="uk-navbar-container"> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <a class="uk-navbar-item uk-logo uk-text-primary" href="#" uk-icon="icon: uikit; ratio: 1.8"></a> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Активно</a></li> <li><a href="#">Modal</a></li> </ul> </div> <div class="uk-navbar-right"> <a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a> </div> </div> </div> </nav> <div id="modal-full" class="uk-modal-full uk-modal" uk-modal> <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport> <button class="uk-modal-close-full" type="button" uk-close></button> <form class="uk-search uk-search-large"> <input class="uk-search-input uk-text-center" type="search" placeholder="Найти..." aria-label="Найти" autofocus> </form> </div> </div>
Доступность
Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента поиска.
-
Если с элементом управления поиском не связан ни один
<label>
элемент, задайте свойствоaria-label
для элемента<input>
поиска, чтобы описать его значение.
<input class="uk-search-input" type="search" aria-label="…">
Интернационализация
Ключ | По умолчанию | Описание |
---|---|---|
toggle |
Open Search |
Атрибут aria-label для кнопки переключения. |
submit |
Submit Search |
Атрибут aria-label для кнопки отправки. |
Подробнее о переводе компонентов.