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.
Easily create nice looking lists, which come in different styles.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the List component
within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
list: {
hooks: {}
}
}
}),To apply this component, add the .uk-list class to an unordered or ordered list. The list will now display without any spacing or list-style.
<ul class="uk-list">
<li></li>
<li></li>
<li></li>
</ul><ul class="uk-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>Add one of the following classes to set the marker of a list item.
| Class | Description |
|---|---|
.uk-list-disc | Use a filled circle as a marker. |
.uk-list-circle | Use a hollow circle as marker. |
.uk-list-square | Use a filled square as marker |
.uk-list-decimal | Use decimal numbers as marker. Beginning with 1. |
.uk-list-hyphen | Use a hyphen as marker |
<ul class="uk-list uk-list-disc">
…
</ul><div class="uk-child-width-expand@s" uk-grid>
<div>
<h4 class="uk-h4 uk-margin">Disc</h4>
<ul class="uk-list uk-list-disc">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4 class="uk-h4 uk-margin">Circle</h4>
<ul class="uk-list uk-list-circle">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4 class="uk-h4 uk-margin">Square</h4>
<ul class="uk-list uk-list-square">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4 class="uk-h4 uk-margin">Decimal</h4>
<ul class="uk-list uk-list-decimal">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4 class="uk-h4 uk-margin">Hyphen</h4>
<ul class="uk-list uk-list-hyphen">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>Add one of the following classes to set the marker color.
| Class | Description |
|---|---|
.uk-list-muted | Add this class to mute the marker. |
.uk-list-primary | Add this class to emphasize the marker with the primary color. |
.uk-list-secondary | Add this class to emphasize the marker with the secondary color. |
<ul class="uk-list uk-list-disc uk-list-primary">
…
</ul><div class="uk-child-width-expand@s" uk-grid>
<div>
<h4 class="uk-h4 uk-margin">Muted</h4>
<ul class="uk-list uk-list-disc uk-list-muted">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4 class="uk-h4 uk-margin">Primary</h4>
<ul class="uk-list uk-list-disc uk-list-primary">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4 class="uk-h4 uk-margin">Secondary</h4>
<ul class="uk-list uk-list-disc uk-list-secondary">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>Add the .uk-list-bullet class to set a custom image bullet as a marker of a list item. Mind, that it can not be combined with color modifiers.
<ul class="uk-list uk-list-bullet">
…
</ul><ul class="uk-list uk-list-bullet">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>Add the .uk-list-divider class to separate list items with lines.
<ul class="uk-list uk-list-divider">
…
</ul><ul class="uk-list uk-list-divider">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>Add zebra-striping to a list using the .uk-list-striped class.
<ul class="uk-list uk-list-striped">
…
</ul><ul class="uk-list uk-list-striped">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>Set the appropriate WAI-ARIA roles, states and properties to the List component.
<div> element is used, set the list role to the list, and the listitem role to the list items.<div class="uk-list" role="list">
<div role="listitem">List item 1</div>
<div role="listitem">List item 2</div>
<div role="listitem">List item 3</div>
</div>