Develop

Styles

A count indicator shows the current position within a set of items using dots and optional navigation controls.

<div class="tng-count-indicator">
  <div class="tng-count-indicator-helper">1 of 10</div>
  <div class="tng-count-indicator-dots">
    <div class="is-current"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="tng-count-indicator-buttons">
    <button class="tng-icon-button is-sm" aria-label="Previous">
      <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
    </button>
    <button class="tng-icon-button is-sm" aria-label="Next">
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </button>
  </div>
</div>

Default

1 of 10

Contrast

1 of 10

React

Import the CountIndicator component from @tmedxp/react-components.

Properties

Prop	Type	Description	Required
total	number	Total number of items.	✅
index	number	Zero-based current item index.	✅
onPrev	() => void	Previous action callback.	✅
onNext	() => void	Next action callback.	✅
wrap	boolean	Loops navigation at boundaries.
showHelper	boolean	Show X of Y helper text. Default true.
showButtons	boolean	Show previous/next buttons. Default true.
showDots	boolean	Show dots indicator. Default true.
maxDots	number	Maximum number of rendered dots. Default 10.
semanticDots	boolean	Use 1:1 semantic dots when total <= maxDots. Default true.
ariaLabel	string	Label for the root group.	✅
ariaLabelDots	string	Label for dots group.	✅
prevAriaLabel	string	Previous button aria-label.	✅
nextAriaLabel	string	Next button aria-label.	✅
helperOfLabel	string	Translation for of in helper text.	✅
className	string	Extra class name for root element.

Example: default

import { useState } from 'react';
import { CountIndicator } from '@tmedxp/react-components';

const CountIndicatorDefaultExample = () => {
  const total = 10;
  const [index, setIndex] = useState(0);

  return (
    <CountIndicator
      total={total}
      index={index}
      ariaLabel="count indicator"
      ariaLabelDots="progress"
      prevAriaLabel="previous"
      nextAriaLabel="next"
      helperOfLabel="of"
      onPrev={() => setIndex((i) => Math.max(0, i - 1))}
      onNext={() => setIndex((i) => Math.min(total - 1, i + 1))}
    />
  );
};

export { CountIndicatorDefaultExample };

Example: helper and dots only

import { CountIndicator } from '@tmedxp/react-components';

const CountIndicatorSimpleExample = () => {
  return (
    <CountIndicator
      total={42}
      index={5}
      onPrev={() => {}}
      onNext={() => {}}
      showButtons={false}
      maxDots={5}
      ariaLabel="count indicator"
      ariaLabelDots="progress"
      prevAriaLabel="previous"
      nextAriaLabel="next"
      helperOfLabel="of"
    />
  );
};

export { CountIndicatorSimpleExample };