UIkit 2.23 – Popovers, column component and inline SVG

Say hello to the new release of UIkit. Version 2.23.0 includes a lot of bug fixes and many improvements. Plus, it comes with three notable additions: Reworked dropdowns, a new column component and inline SVG.

Dropdowns - The new Popovers

Traditionally, the Dropdown component has been used for dropdown menus on buttons with its own dropdown panel style. While this is still possible, the Dropdown component is way more flexible now. A new uk-dropdown-blank class removes the default dropdown styling. This allows for creating popovers of any kind, not just the default dropdown panel. A great use case are popovers on visual elements, like photos with interactive labels. In addition, you can now reveal in eight more directions via the pos parameter.

<div class="uk-position-relative uk-display-inline-block" data-uk-dropdown="{pos:'right-center'}">
    <a href class="uk-button">Hover</a>
    <div class="uk-dropdown-blank uk-panel uk-panel-box">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

Inline SVG

A new JavaScript utility allows automatic inlining of SVG graphics. Just include the SVG file using an image element and add the right data attribute. All attributes on the image element will be preserved, so you can add additional classes, inline styles or ID attributes as well. This is great because now you can style the SVG with CSS.

<img id src="file.svg" data-uk-svg>

Text columns

Text columns is a small component that allows you to render text in columns, with full support for responsive behavior. The following example displays 2 columns on small devices and 3 columns on larger devices (tablet and above).

<p class="uk-column-small-1-2 uk-column-medium-1-3">...</p>

Feedback

We'd like to know what you think about the release. Please leave your feedback in the comments and join us in the UIkit Gitter chat.