テーマ可能な空ステータス画像の操作

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：12分

    • テーマ可能な空ステータスの画像を追加して、空ステータスをカスタマイズし、ユーザーエクスペリエンスを向上させます。空ステータスには、ユーザーがコンテンツを追加または作成するためのガイダンスまたはアクションが含まれます。

    コンポーネントまたは ネクストエクスペリエンス Web ページの一部にデータが含まれていない場合は、空ステータスの画像が表示されます。空ステータスの画像はテーマ可能で、インスタンスのテーマの色に適応します。

    図 : 1. 空ステータスの画像
    利用可能なデータがありません 空のステート画像。

    空ステータスの画像タイプは 12 種類あり、それぞれ小、中、大のバージョンがあります。テーマビルダーを使用してテーマを作成すると、UX スタイル画像レコードが作成されますが、レコードは空です。この場合、テーマはデフォルトでベースシステムの空ステータスのテーマ可能な画像を使用します。これらの画像を上書きする場合は、「 テーマに合わせてテーマ可能な空ステータスの画像をカスタマイズ」を参照してください。

    空のステート画像をカスタムエクスペリエンスに挿入するには、 UI ビルダー のイラストコンポーネントを使用します。Illustration コンポーネントには、利用可能なすべての空ステータスの画像が表示されます。Illustration コンポーネントの詳細については、 Horizon Design System の空状態を参照してください。

    UI ビルダー のカスタムイラストレーションコンポーネントを使用して、カスタム画像を追加することもできます。

    テーマフックがあるテーマ可能な空ステータスの画像

    次の画像は、検索結果なしの空ステータスの画像と、各バリエーションに必要なテーマフックを表しています。

    図 : 2. 検索結果なし (単色アクセント)
    検索結果がありません 空ステータスの画像、アクセントソリッドバリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_interactive-1 です。

    図 : 3. 検索結果なし (アクセントアウトライン)
    検索結果がありません、空ステータスの画像、アクセントのアウトラインのバリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_interactive-3 です。

    図 : 4. 検索結果なし (微妙なアウトライン)
    検索結果なし、空ステータスの画像、微妙なアウトラインのバリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは、 $now-color_border-secondary です。

    図 : 5. 検索結果なし (件名の暗い詳細)
    検索結果がありません 空ステータスの画像、件名の暗い詳細のバリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは、 $now-color_border-ターシャリです。

    図 : 6. 検索結果なし (件名、明かりの詳細)
    検索結果がありません 空ステータスの画像、被写体の光の詳細のばらつき。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは、 $now-color_background-secondary です。

    図 : 7. 検索結果なし (件名入力)
    検索結果がありません 空ステータスの画像、件名のバリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは $now-color_background-primary です。

    図 : 8. 検索結果なし (件名の概要)
    検索結果がありません 空ステータスの画像、件名のアウトラインのバリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは、 $now-color_border-secondary です。

    図 : 9. 検索結果なし (被写体の影)
    検索結果なし、空ステータスの画像、被写体の影のバリエーション。テキストの説明については、以下のテーマフック情報を参照してください。

    このバリエーションに必要なテーマフックは、 $now-color_border-secondary です。

    空ステータスのライトモードトークン

    図 : 10. メインオブジェクトの空ステータスの画像
    メインオブジェクトの空ステータスの画像。テキストの説明については、以下のテーマフック情報を参照してください。
    メインオブジェクトの空ステータスの画像を上書きするために使用されるテーマフック。
    • now-illustration--empty-state--main-object--outline
    • now-illustration--empty-state--main-object--fill
    図 : 11. プライマリオブジェクトの空ステータスの画像
    プライマリオブジェクトの空ステータスの画像。テキストの説明については、以下のテーマフック情報を参照してください。
    プライマリオブジェクトの空ステータスの画像を上書きするために使用されるテーマフック。
    • now-illustration--empty-state--primary-object--outline
    • now-illustration--empty-state--primary-object--primary-fill
    • now-illustration--empty-state--primary-object--tertiary-fill
    • now-illustration--empty-state--primary-object--main-detail
    • now-illustration--empty-state--primary-object--detail
    • now-illustration--empty-state--primary-object--shadow
    図 : 12. ターシャリオブジェクトの空ステータスの画像
    ターシャリオブジェクトの空ステータスの画像。テキストの説明については、以下のテーマフック情報を参照してください。
    第 3 オブジェクトの空ステータスの画像を上書きするために使用されるテーマフック。
    • now-illustration--empty-state--tertiary-object--outline
    • now-illustration--empty-state--tertiary-object--primary-fill
    • now-illustration--empty-state--tertiary-object--tertiary-fill
    • now-illustration--empty-state--tertiary-object--main-detail
    • now-illustration--empty-state--tertiary-object--detail
    • now-illustration--empty-state--tertiary-object--shadow
    図 : 13. 背景の空ステータスの画像
    背景の空ステータスの画像。テキストの説明については、以下のテーマフック情報を参照してください。
    背景の空ステータスの画像を上書きするために使用されるテーマフック。
    • now-illustration--empty-state--background--lines
    • now-illustration--empty-state--background--tertiary-lines
    • now-illustration--empty-state--background--object-outline
    • now-illustration--empty-state--background--object-detail
    • now-illustration--empty-state--background--object-shadow
    • now-illustration--empty-state--background--object-fill

    空ステートのライトモードの代替

    表 : 1. 空ステートのライトモードフォールバックスタイルの宣言
    オブジェクト スタイル宣言
    メインオブジェクト 
    
 .main-object--outline {
  fill:rgb(var(--empty-state--main-object--outline),
      var(--main-object--outline), var(--now-color--interactive-3), 51,53,123);
}
    		 
    
 .main-object--fill {
  fill:rgb(var(--empty-state--main-object--fill),
      var(--main-object--fill), var(--now-color--interactive-1), 144,146,213);
}
    プライマリオブジェクト 
    
 .primary-object--outline {
  fill:rgb(var(--empty-state--primary-object--outline),
      var(--primary-object--outline), var(--now-color--border--secondary),
    176,181,191);
}
    		 
    
 .primary-object--primary-fill {

      fill:rgb(var(--empty-state--primary-object--primary-fill),
      var(--primary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .primary-object--tertiary-fill {

      fill:rgb(var(--empty-state--primary-object--tertiary-fill),
      var(--primary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .primary-object--main-detail {

      fill:rgb(var(--empty-state--primary-object--main-detail), var(--primary-object--main-detail),
      var(--now-color--border--secondary), 176,181,191);
}
    		 
    
 .primary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .primary-object--shadow {
  fill:rgb(var(--empty-state--primary-object--shadow),
      var(--primary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    第 3 のオブジェクト 
    
 .tertiary-object--outline {
  fill:rgb(var(--empty-state--tertiary-object--outline),
      var(--tertiary-object--outline), var(--now-color--border--secondary), 176,181,191);
}
      
    
 .tertiary-object--primary-fill {

      fill:rgb(var(--empty-state--tertiary-object--primary-fill),
      var(--tertiary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .tertiary-object--tertiary-fill {

      fill:rgb(var(--empty-state--tertiary-object--tertiary-fill),
      var(--tertiary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .tertiary-object--main-detail {

      fill:rgb(var(--empty-state--tertiary-object--main-detail),
      var(--tertiary-object--main-detail), var(--now-color--border--secondary),
      176,181,191);
}
    		 
    
 .tertiary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .tertiary-object--shadow {
  fill:rgb(var(--empty-state--tertiary-object--shadow),
      var(--tertiary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    背景オブジェクト 
    
 .background--lines {
  fill:rgb(var(--empty-state--background--lines),
      var(--background--lines), var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--tertiary-lines {

      fill:rgb(var(--empty-state--background--tertiary-lines), var(--background--tertiary-lines),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-outline {

      fill:rgb(var(--empty-state--background--object-outline), var(--background--object-outline),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-detail {
  fill:rgb(var(--empty-state--background--object-detail),
      var(--background--object-detail), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .background--object-shadow {
  fill:rgb(var(--empty-state--background--object-shadow),
      var(--background--object-shadow), var(--now-color--background--tertiary),
      228,230,234);
}
    		 
    
 .background--object-fill {
  fill:rgb(var(--empty-state--background--object-fill),
      var(--background--object-fill), var(--now-color--background--primary),
    255,255,255);
}