Компонент Dropbar
Создайте переключаемый раздел полной ширины с анимацией при появлении, называемый dropbar-панель.
Панель dropbar по типу выпадения обеспечивает стиль для компонента Drop. В отличие от выпадающей капли, которая расположена в любом месте на странице с пространством вокруг, dropbar простирается на всю ширину или высоту области просмотра, поэтому она идеально подходит для трех краев без отступа.
Компонент Dropbar ориентируется на цель. Дополнительная задержка гарантирует, что активная раскрывающаяся панель останется открытой, даже если указатель мыши на короткое время переместится в другом направлении. Адаптивная dropbar-панель немедленно закрывается, если открыта другая dropbar-панель.
Использование
Чтобы применить компонент Dropbar,
добавьте к элементу класс .uk-dropbar, добавьте также класс-модификатор для указания направления,
из которого должна появляться скрытая панель, например .uk-dropbar-top.
<div class="uk-dropbar uk-dropbar-top"></div>
Кроме того, добавьте атрибут uk-drop к создаваемой dropbar-панели и элемент-переключатель перед ним.
Любой контент, например кнопка, может переключать отображение выдвигаемой блочной панели.
Поскольку раскрывающийся dropbar-раздел визуально требует расширения на всю ширину или высоту области просмотра,
добавьте параметр stretch: true к uk-drop атрибуту.
Чтобы растянуть только до одной оси, используйте stretch: x или stretch: y.
Для получения всех деталей анимации взгляните на компонент Drop.
<button type="button">Переключатель</button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"></div>
-
-
<div class="uk-overflow-auto uk-height-medium"> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Наведи курсор</button> <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"> Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. </div> </div> </div>
-
-
<div class="uk-overflow-auto uk-height-medium"> <div class="uk-navbar-container" uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li> <a href="#">Наведи</a> <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"> <em>Наведение</em>... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </li> <li> <a href="#">Нажми</a> <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; mode: click"> <em>Нажатие</em>... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </li> </ul> </div> </div> </div>
-
-
<div class="uk-overflow-auto uk-height-medium"> <nav class="uk-navbar-container"> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li> <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a> <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"> Dropbar обычно используется вместе с компонентом <a href="/v3/navbar">Navbar</a>. <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </li> </ul> </div> </div> </div> </nav> </div>
Направление
Чтобы установить соответствующий стиль раскрывающейся панели, добавьте один из следующих классов модификаторов направления.
| Направление | Описание |
|---|---|
uk-dropbar-top |
Открывает переключаемый раздел сверху. |
uk-dropbar-bottom |
Откроет выпадающую панель снизу. |
uk-dropbar-left |
Раскрывает раскрывающуюся панель слева. |
uk-dropbar-right |
Открывает раскрывающуюся панель справа. |
Чтобы открыть панель в определенном направлении,
используйте параметры Drop компонента pos и stretch.
| Позиция | Описание |
|---|---|
pos: top-left; stretch: x |
Располагает раздел над переключателем и растягивает его по горизонтали. |
pos: bottom-left; stretch: x |
Располагает раздел под переключателем и растягивает его по горизонтали. |
pos: left-top; stretch: y |
Позиционирует панель слева от переключателя и растягивает его по вертикали. |
pos: right-top; stretch: y |
Позиционирует панель справа от переключателя и растягивает его по вертикали. |
<div class="uk-dropbar uk-dropbar-left" uk-drop="pos: left-top; stretch: y"></div>
-
-
<div class="uk-overflow-auto uk-height-medium"> <nav class="uk-navbar-container"> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li> <a href="#">Top</a> <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </li> <li> <a href="#">Left</a> <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> </li> <li> <a href="#">Right</a> <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> </li> </ul> </div> </div> </div> </nav> </div>
Анимация
Для анимации при отображении dropbar-панели используйте анимацию slide-* или reveal-* из компонента Drop.
Анимация slide-* перемещает каплю и ее содержимое в выбранном направлении,
в то время как при reveal-* анимации содержимое панели остается статичным открываясь с выбранного направления.
Установите параметр animate-out: true, чтобы отображать анимацию и при закрытии dropbar-панели.
| Анимация | Описание |
|---|---|
slide-top |
Выкатывает всё содержимое панели сверху. |
slide-bottom |
Выкатывает всё содержимое панели снизу. |
slide-left |
Скользит всё содержимое слева. |
slide-right |
Скользит всё содержимое справа. |
reveal-top |
Отображает контент панели выезжая сверху. |
reveal-bottom |
Отображает контент панели выезжая снизу. |
reveal-left |
Показывает контент выезжая слева. |
reveal-right |
Показывает контент выезжая справа. |
<div uk-drop="animation: slide-top; animate-out: true"></div>
-
-
<div class="uk-overflow-auto uk-height-medium"> <div class="uk-navbar-container" uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li> <a href="#">Slide Top</a> <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: slide-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </li> <li> <a href="#">Reveal Top</a> <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: reveal-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </li> <li> <a href="#">Slide Left</a> <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: slide-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> </li> <li> <a href="#">Reveal Left</a> <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: reveal-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> </li> <li> <a href="#">Slide Right</a> <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y; target: !.uk-navbar-container; animation: slide-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> </li> <li> <a href="#">Reveal Right</a> <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y; target: !.uk-navbar-container; animation: reveal-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> </li> </ul> </div> </div> </div>
Nav в dropbar
Широкая панель Dropbar может содержать навигацию из компонента Nav .
Просто добавьте класс .uk-nav к элементу <ul> и используйте тот же
модификатор .uk-dropdown-nav из компонента Dropdown, чтобы иметь тот же стиль навигации.
<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">
<ul class="uk-nav uk-dropdown-nav">…</ul>
</div>
-
-
<div class="uk-overflow-auto uk-height-large"> <nav class="uk-navbar-container" uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li> <a href>При наведении курсора <span uk-navbar-parent-icon></span></a> <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Название меню</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт меню</a></li> </ul> </div> </li> </ul> </div> </nav> </div>
Модификатор «Large»
Класс-модификатор .uk-dropbar-large позволяет увеличить внутренний отступ.
Добавьте класс .uk-dropbar-large для применения выпадающей dropbar-панели с большим вертикальным отступом.
<div class="uk-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x"></div>
-
-
<div class="uk-overflow-auto uk-height-large"> <nav class="uk-navbar-container"> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li> <a href>Новости</a> <div class="uk-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Название меню</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт меню</a></li> </ul> </div> </li> </ul> </div> </div> </div> </nav> </div>
Доступность
Компонент «Отображение содержимого по типу выпадения» соответствует Menu Button Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
Переключатель имеет роль button, состояние aria-expanded и свойство aria-haspopup.
Взаимодействие с клавиатурой
Доступ к компоненту можно получить с клавиатуры используя следующие кнопки:
- Клавиши enter или space открывают и закрывают отображение выпадения.
- Клавиша esc закрывает выпавшее содержимое, даже если фокус переместился на другой элемент.