Компонент Dropbar

Создайте переключаемый раздел полной ширины с анимацией при появлении, называемый dropbar-панель.

Панель dropbar по типу выпадения обеспечивает стиль похожий на компонент Drop. В отличие от выпадающей капли, которая расположена в любом месте на странице с пространством вокруг, 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>
    • Наведи
      Наведение... 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.
    • Нажми
      Нажатие... 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 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>
    • Slide Top
      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.
    • Reveal Top
      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.
    • Slide Left
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    • Reveal Left
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    • Slide Right
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    • Reveal Right
      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 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>

Широкая панель 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 закрывает выпавшее содержимое, даже если фокус переместился на другой элемент.