Компонент Dropbar

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

Панель dropbar по типу выпадения обеспечивает стиль похожий на компонент Drop. В отличие от выпадающей капли, которая расположена в любом месте на странице с пространством вокруг, dropbar простирается на всю ширину или высоту области просмотра, поэтому он идеально подходит для трех краев без отступа.

Использование

Чтобы применить компонент Dropbar, добавьте к элементу класс .uk-dropbar, добавьте также класс-модификатор для указания направления, из которого должна появляться широкая скрытая панель, например .uk-dropbar-top.

<div class="uk-dropbar uk-dropbar-top"></div>

Кроме того, добавьте атрибут uk-drop к создаваемой 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>
  • 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-inline">
            <button class="uk-button uk-button-default" type="button">Наведи курсор</button>
            <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">
            	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>
        </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">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">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>

Направление

Чтобы установить соответствующий стиль раскрывающейся панели, добавьте один из следующих классов модификаторов направления.

Направление Описание
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>
    • 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.
    • 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.
    • 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="#">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>

Анимация

Для анимации при отображении 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">
    
        <div class="uk-navbar-container" uk-navbar>
            <div class="uk-navbar-left">
    
                <ul class="uk-navbar-nav">
                    <li>
                        <a href="#">Hover</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>
        </div>
        
    </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">
    
        <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-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>