Indicator

A simple dot-styled position indicator bar. This is currently not intended to be used as navigation but only a visual indicator.


React Component

Default

  • Page 1
  • Page 2
  • Page 3
  • Page 4
  • Page 5

Show Text

Page 2 of 5

Sage Component

SageIndicator
<h3 class="t-sage-heading-6">Default</h3>
<%= sage_component SageIndicator, {
  current_item: 2,
  label: "Page",
  num_items: 5,
} %>


<h3 class="t-sage-heading-6">Show Text</h3>
<%= sage_component SageIndicator, {
  current_item: 2,
  label: "Page",
  num_items: 5,
  show_text: true
} %>
Property Description Type Default

current_item

The item that is "selected" in the indicator list.

Integer

nil

label

The label to prepend in front of the number for the indicator in visually-hidden text.

String

nil

num_items

The total number of items to display.

Integer

nil

preposition

The preposition is between the two page numbers. This allows for words other than "of".

String

of

show_text

When enabled, this replaces the indicator dots with text to represent the current page.

Boolean

nil