We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Create dot leaders for pricing menus or tables of contents.
A leader, also known as a dot leader or a tab leader, is a repeating pattern used to visually connect content across horizontal spaces. It is most commonly used for restaurant menus, between the meals and prices, and for tables of contents, between titles and page numbers.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js
file, add the Leader component
within the ui()
plugin.
import ui from "franken-ui";
ui({
components: {
leader: {
hooks: {}
}
}
}),
To apply this component, add the uk-leader
attribute to the element on the left. A line of characters, by default dots, will then fill the remaining space between the item and its adjacent element.
<div uk-leader></div>
<div class="uk-grid uk-grid-small" uk-grid>
<div class="uk-width-expand" uk-leader>Lorem ipsum dolor sit amet</div>
<div>$20.90</div>
</div>
To change the dot to any custom character, just add the fill: STRING
option to the attribute.
<div uk-leader="fill: -"></div>
<div class="uk-grid uk-grid-small" uk-grid>
<div class="uk-width-expand" uk-leader="fill: -">
Lorem ipsum dolor sit amet
</div>
<div>$20.90</div>
</div>
Note The default fill character can be set through CSS variable.
.uk-leader-fill-content::before {
content: ".";
}
:root {
--uk-leader-fill-content: ".";
}
It’s possible to disable the leader for different device widths by applying the media
option to the attribute and adding the appropriate viewport width. Add a number in pixels, for example media: 640
, or a breakpoint, for example media: @m
. The leader will be shown from the specified viewport width and upwards, but not below.
<div uk-leader="media: @m"></div>
Learn more about using hooks.
Hook Name | Affected Classes |
---|---|
hook-leader | .uk-leader |
hook-misc | * |
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more
Option | Value | Default | Description |
---|---|---|---|
fill | String | Optional fill character. | |
media | Boolean, Number, String | false | Condition for the space filling - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)). |
Learn more about JavaScript components.
UIkit.leader(element, options);