Skip to main content
Designkufu

smarthr-ui-page-counter

PageCounterは、「よくあるテーブル」などの一覧の総件数と現在ページの件数を表示するためのコンポーネントです。Paginationと併用し件数を提示するときに使います。

Stars
30
Source
kufu/smarthr-design-system
Updated
2026-05-29
Slug
kufu--smarthr-design-system--smarthr-ui-page-counter
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/kufu/smarthr-design-system/HEAD/plugins/smarthr-design-system/skills/smarthr-ui-page-counter/SKILL.md -o .claude/skills/smarthr-ui-page-counter.md

Drops the SKILL.md into .claude/skills/smarthr-ui-page-counter.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

「よくあるテーブル」などの一覧の総件数と現在ページの件数を表示するためのコンポーネントです。Paginationと併用し件数を提示するときに使います。

import

import { PageCounter } from 'smarthr-ui'

Props

Props 名 デフォルト値 必須 説明
start number - -
end number - -
total number - - -

実装ルール

PageCounter に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。

使い方チェックリスト

モバイル

  • [must] PageCounter は Pagination と合わせて使う
  • [avoid] モバイルで Pagination を表示していない場合(代わりに「さらに表示」ボタンを表示している場合など)は PageCounter を使わない