Компонент Поиск

Создание поиска. Кликабельная иконка поиска внутри панели навигации; открытие с использованием наложения или в модальном окне. Модификаторы.

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. 

<form class="uk-search uk-search-default">
    <input class="uk-search-input" type="search" placeholder="Поиск..." aria-label="Поиск">
</form>

Поиск с иконкой

Чтобы создать иконку поиска, добавьте атрибут 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>

Поиск может быть расположен внутри панели навигации из компонента 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>

Модификатор «Medium»

Чтобы увеличить размер поиска, например, при использовании поиска в раскрывающемся списке, добавьте класс .uk-search-medium. 

<form class="uk-search uk-search-medium">…</form>

<form class="uk-search uk-search-medium">
    <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>

Состояние наведения

Toggle

Чтобы применить состояние наведения на значок поиска при использовании элемента <a> или <button>, добавьте класс .uk-search-toggle. Чтобы создать сам значок поиска, добавьте атрибут uk-search-icon. 

<a class="uk-search-toggle" href="" uk-search-icon></a>

<a class="uk-search-toggle uk-margin-right" href="" uk-search-icon></a>

<button class="uk-search-toggle" title="Найти" type="button" uk-search-icon></button>

Поиск в панели навигации

Значок поиска можно использовать в качестве переключателя, чтобы открыть поиск внутри навигационной панели используя наложение (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>

<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>
Поиск и Overlay (эффект наложения) 
<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>
Поиск и компонент Drop 
<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>
Выпадающий поиск «Dropdown» 
<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="…">

Интернационализация

Компонент Search использует следующие строки перевода:
Ключ По умолчанию Описание
toggle Open Search Атрибут aria-label для кнопки переключения.
submit Submit Search Атрибут aria-label для кнопки отправки.

Подробнее о переводе компонентов.