Shortcodes

Shortcodes

[heading size=”h2″ style=”uk-module-title”]Dropdowns[/heading]

Dropdowns are a creative way to provide more options on a click or hover element. With Uikit dropdown component, you can attach the dropdown to couple of elements to enrich your UI composition.

[heading size=”h3″ style=”uk-module-title”]Button with dropdowns[/heading]

To create a button dropdown, wrap the [dropdown] shortcode around a button that you’d like to add a dropdown menu, then add the dropdowm markup right after the button. Additionally, you can add an arrow icon using the [icon] shortcode to depict a dropdown menu.

[dropdown style=”uk-button-dropdown”] [button style=”default” href=”#” target=”_self”]Dropdown 1 [icon style=”icon-angle-down”/][/button] [nav style=””]

[/nav] [/dropdown] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge]

[code][dropdown style=”uk-button-dropdown”] [button style=”default” href=”#” target=”_self”]Dropdown 1 [icon style=”icon-angle-down”/][/button] [nav style=””] <li><a href=”#”>Menu item</a></li> <li><a href=”#”>Menu item</a></li> <li class=”uk-nav-header uk-navbar-nav-subtitle”>Menu Heading<div>Subtitle possible</div></li> <li><a href=”#”>[icon style=”icon-envelope-o”/] Menu Icon</a></li> <li><a href=”#”>[icon style=”icon-heart-o”/] Another Menu item</a></li> <li class=”uk-nav-divider”></li> <li><a href=”#”>Separated item</a></li> [/nav] [/dropdown] [/code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Button group with dropdowns[/heading]

You can also use button groups to split buttons into a standard action on the left and a dropdown toggle on the right.

[button_group] [button style=”success” href=”#” target=”_self”]Button[/button] [dropdown style=””] [button style=”success” href=”#” target=”_self”][icon style=”icon-caret-down”/][/button] [nav style=””]

[/nav][/dropdown] [/button_group] [button_group] [button style=”color” href=”#” target=”_self”]Button[/button] [dropdown style=””] [button style=”color” href=”#” target=”_self”][icon style=”icon-caret-down”/][/button] [nav style=””]

[/nav][/dropdown] [/button_group] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge]

[code][button_group] [button style=”color” href=”#” target=”_self”]split button[/button] [dropdown style=””] [button style=”color” href=”#” target=”_self”][icon style=”icon-angle-down”/][/button] [nav style=””] …menu items [/nav] [/dropdown] [/button_group] [/code] [line_break/]

The following is a list of possible style options for the [nav] dropdown menu

style Description
uk-color Use the main menu color in the dropdown menu
uk-dropdown-flip Aligns the dropdown menu to the right
uk-dropdown-up Aligns the dropdown menu above the toggle
uk-dropdown-center Centers the dropdown menu.
uk-dropdown-small Set the dropdown to be smaller

[badge style=”note uk-margin-top”]markup[/badge]

[code][button_group] [button style=”color” href=”#” target=”_self”]split button[/button] [dropdown style=””] [button style=”color” href=”#” target=”_self”][icon style=”icon-angle-down”/][/button] [nav style=”uk-color uk-dropdown-up uk-dropdown-center uk-dropdown-small”] …menu items [/nav] [/dropdown] [/button_group] [/code] [line_break/]

Przegląd prywatności

Ta strona korzysta z ciasteczek, aby zapewnić Ci najlepszą możliwą obsługę. Informacje o ciasteczkach są przechowywane w przeglądarce i wykonują funkcje takie jak rozpoznawanie Cię po powrocie na naszą stronę internetową i pomaganie naszemu zespołowi w zrozumieniu, które sekcje witryny są dla Ciebie najbardziej interesujące i przydatne.

Ściśle niezbędne ciasteczka

Niezbędne ciasteczka powinny być zawsze włączone, abyśmy mogli zapisać twoje preferencje dotyczące ustawień ciasteczek.

Jeśli wyłączysz to ciasteczko, nie będziemy mogli zapisać twoich preferencji. Oznacza to, że za każdym razem, gdy odwiedzasz tę stronę, musisz ponownie włączyć lub wyłączyć ciasteczka.

Dodatkowe ciasteczka

Ta strona korzysta z następujących dodatkowych ciasteczek: