コンテンツ v1.0.0

統計カード

主要な指標や統計をコンパクトなカード形式で表示。ラベル、値、オプションのトレンドインジケーターを含みます。

プレビュー & コード

_stat_card.html.erb

███
  ████ ████ █████████ █████████

  ██████
    ███ ██████ ███████████████████████ ██████ ██████ ███████ ██████ ███████ ██

    ███ ██████ ███████████████████████
        ██████ ██████████
        ██████ ██████████
        ██████ ████

Get Access to View Code

stat_card_component.html.erb

████ ██████████ █████████████████ ████
  ████ ██████████████ ██████████████ ████ ████████████████████████ █████ ████████
  ████ ███████████████ █████████████ ██████████████ ██████████████ ████████████████████ █████ ████████
  ██ ██ ███████████ ██
    ████ ██████████ █████████████ ████
      ██ ██ █████ ██ ███ ██
        ████ ██████████████████████████████████ ██████████ █ ██ ███ ███████████████████ ██████████ █████
          █████ ███████████████████ ██████ █████████ █ █ ████████████████████ ███████████ █ █ ███████████████████████████ █ █ █ ████ ██████ ██████████ █ █ ██████ █████████████████████████████ █ █ █ ██ ████ ███████████████████ ██
        ██████
      ██ █████ █████ ██ █████ ██

Get Access to View Code

stat_card_component.rb

█ ██████████████████████ ████

█████ █████████████████ █ ███████████████████
  ██████ █ █████ ████ ███████████████

  ███ ██████████████████ ███████ ██████ ████ ████████████ ████ ████████████████
    ██████ █ █████
    ██████ █ █████
    ██████ █ █████████████
    ████████████ █ ███████████

Get Access to View Code

オプション

名前	型	デフォルト	説明
`label` *	String	必須	The metric label (e.g., "Total Users")
`value` *	String	必須	The metric value (e.g., "1,234")
`trend`	Symbol	`nil`	Trend direction: :up, :down, or :neutral
`trend_value`	String	`nil`	Trend value text (e.g., "+12%")
`class`	String	`""`	Additional CSS classes to apply

名前	型	デフォルト	説明
`label` *	String	必須	The metric label (e.g., "Total Users")
`value` *	String	必須	The metric value (e.g., "1,234")
`trend`	Symbol	`nil`	Trend direction: :up, :down, or :neutral
`trend_value`	String	`nil`	Trend value text (e.g., "+12%")

変更履歴 v1.0.0

- Initial release
- Optional trend indicator (up/down/neutral)
- Customizable label and value formatting

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得