x
1
2
3
4
5
6
7
8
9
10
<div class="lui-dots" data-controller="dots" data-dots-index-value="2"> <div class="lui-dot " data-dots-target="dot" data-action="click->dots#selectDot"></div> <div class="lui-dot " data-dots-target="dot" data-action="click->dots#selectDot"></div> <div class="lui-dot lui-dot--active" data-dots-target="dot" data-action="click->dots#selectDot"></div> <div class="lui-dot " data-dots-target="dot" data-action="click->dots#selectDot"></div> <div class="lui-dot " data-dots-target="dot" data-action="click->dots#selectDot"></div> <div class="lui-dot " data-dots-target="dot" data-action="click->dots#selectDot"></div> <div class="lui-dot " data-dots-target="dot" data-action="click->dots#selectDot"></div> <div class="lui-dot " data-dots-target="dot" data-action="click->dots#selectDot"></div></div>Dots
Description
Related components
| Used Components | Components where is Used |
|---|---|
| Label |
Usage rules
- ✅ Do
- ❌ Don't
1
<%= render LooposUi::Dots.new(amount: 8, active: 3) %>No notes provided.
No params configured.
Description
Dots is a UI component used to visually represent a set of items or steps, such as pagination indicators or progress steps. It highlights the active dot and allows users to interact with each dot (e.g., to select a step).
Arguments
| Property | Default | Required | Type | Description |
|---|---|---|---|---|
amount |
1 |
No | Integer | The total number of dots to display. |
active |
1 |
No | Integer | The index (1-based) of the currently active dot. |
data |
{} |
No | Hash | Additional data attributes for the dots container. |
dot_data |
{} |
No | Hash | Additional data attributes for each individual dot. |
Example Usage
<%= render LooposUi::Dots.new(amount: 5, active: 3) %>