Drop

Position any element in relation to another element.

Usage

Any content, like a button, can toggle the drop component. Simply add the vk-drop component following the toggle.

<vk-button></vk-button>
<vk-drop></vk-drop>

A dropdown can be enabled by hovering and clicking the toggle. Set the mode prop as click to force a click only mode. If you want to group the toggle and the dropdown, you can add the .uk-inline class from the UIkit Utility component to a container element around both.

<div class="uk-inline">
  <vk-button></vk-button>
  <vk-drop mode="click"></vk-drop>
</div>

Note The Drop component has no default styling. In this example, we've used a card from the Card component for visualization.

Grid in drop

You can place a grid from the Grid component inside a drop. If the grid should stack automatically, whenever the drop no longer fits its container, add the .uk-drop-grid class.

<vk-drop class="uk-width-large">
  <vk-grid class="uk-drop-grid uk-child-width-1-2@m">...</vk-grid>
</div>

Use one of the classes from the UIkit Width component to adjust the drop's width.

Position

Add one of the following options to the position prop to adjust the drop's alignment.

<vk-drop position="top-left"></div>

Boundary

By default, the drop flips automatically when it exceeds the viewport's edge. If you want to flip it according to a container's boundary, use the boundary prop, specifying a query selector or Vue ref for the container. That way you can determine any parent element as the drop's boundary.

<div class="my-class">
  <vk-button></vk-button>
  <vk-drop boundary=".my-class"></div>
</div>

<div ref="myBoundary">
  <vk-button></vk-button>
  <vk-drop boundary="myBoundary"></div>
</div>

Boundary alignment

You can also align the drop to its boundary. To do so, use the boundary-align prop.

<div ref="my-boundary">
  <vk-button></vk-button>
  <vk-drop boundary="my-boundary" boundary-align></vk-drop>
</div>

Offset

To define a custom offset between the drop container and the toggle, specify the value with the offset prop, measured in pixels.

<vk-drop :offset="80"></vk-drop>

Animation

Apply one or more animations to the dropdown by using the animation prop with one of the classes (without the prefix) from the UIkit Animation component. You can also determine the animation's duration by setting the duration prop with a value in milliseconds.

<vk-drop animation="slide-top-small" :duration="1000"></vk-drop>

Props