メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

ステップコンポーネント

最終更新日:

マルチステップ ウィザードおよび進行状況インジケーター用の CSS のみの Tailwind CSS ステップ。水平および垂直レイアウト、ステップごとのカラーバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

ステップ コンポーネントは、連続したステージを表示することで、複数のステップのプロセス、ガイド、またはワークフローを視覚化します。セマンティック HTML と柔軟なレイアウトで構築されたステップは、セットアップ ウィザード、チュートリアル、および複雑な手順の進行状況を示します。 Frutjam ステップ システムは、複数のサイズ、色、構造、完了状態をサポートしており、フォーム ウィザード、インストール ガイド、進捗状況の追跡に最適です。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
stepsベース順序付けされたステップのリストのコンテナー
step修飾子番号付きマーカーが付いた個々のステップ項目
steps-horizontal修飾子横型レイアウト (デフォルト)
steps-vertical修飾子縦積みレイアウト
step-primary色主要テーマカラーマーカー
step-secondary色二次テーマカラーマーカー
step-accent色アクセントテーマカラーマーカー
step-neutral色ニュートラルテーマカラーマーカー
step-info色情報セマンティックカラーマーカー
step-success色成功セマンティックカラーマーカー
step-warning色警告セマンティックカラーマーカー
step-error色エラー セマンティック カラー マーカー

基本的な使い方

  • Shipping
  • Payment
  • Confirmation
1
2
3
4
5
<ul class="steps">
  <li class="step">Shipping</li>
  <li class="step step-primary">Payment</li>
  <li class="step">Confirmation</li>
</ul>

1
2
3
4
5
<ul className="steps">
  <li className="step">Shipping</li>
  <li className="step step-primary">Payment</li>
  <li className="step">Confirmation</li>
</ul>

ステップのレイアウト

  • Step 1
  • Step 2
  • Step 3
html 
1
2
3
4
5
<ul class="steps steps-horizontal">
  <li class="step">Step 1</li>
  <li class="step step-primary">Step 2</li>
  <li class="step">Step 3</li>
</ul>

ステップカラー

  • Primary
  • Secondary
  • Accent
  • Info
  • Success
  • Warning
  • Error
html 
1
2
3
4
5
6
7
8
9
<ul class="steps">
  <li class="step step-primary">Primary</li>
  <li class="step step-secondary">Secondary</li>
  <li class="step step-accent">Accent</li>
  <li class="step step-info">Info</li>
  <li class="step step-success">Success</li>
  <li class="step step-warning">Warning</li>
  <li class="step step-error">Error</li>
</ul>

垂直ステップ

  • Account setup
  • Personal info
  • Payment method
  • Confirmation
html 
1
2
3
4
5
6
<ul class="steps steps-vertical">
  <li class="step step-primary">Account setup</li>
  <li class="step step-primary">Personal info</li>
  <li class="step">Payment method</li>
  <li class="step">Confirmation</li>
</ul>

手順と説明

  • Register
  • Verify Email
  • Choose Plan
  • Complete
Create account
Check your inbox
Select pricing
Get started
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="space-y-4">
  <div>
    <ul class="steps w-full">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Verify Email</li>
      <li class="step">Choose Plan</li>
      <li class="step">Complete</li>
    </ul>
    <div class="grid grid-cols-4 gap-4 mt-4 text-xs text-center">
      <div>Create account</div>
      <div>Check your inbox</div>
      <div>Select pricing</div>
      <div>Get started</div>
    </div>
  </div>
</div>

対応手順

  • Order placed
  • Processing
  • Shipped
  • Delivered
html 
1
2
3
4
5
6
<ul class="steps w-full">
  <li class="step step-primary">Order placed</li>
  <li class="step step-primary">Processing</li>
  <li class="step">Shipped</li>
  <li class="step">Delivered</li>
</ul>

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な ステップ クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる