Blank Slate
表示可能なデータがないことをエンドユーザーに通知するための画面上のコンテンツです。
BlankSlateは、アプリケーションの使用を開始したとき、タスクを完了したとき、表示可能なデータがないときに、エンドユーザーに通知するために使用します。
使用方法
パターンを画面にドラッグし、要件に合わせてコンテンツを編集します。
- BlankSlateパターンをプレビューにドラッグします。
- プレースホルダに必要なコンテンツを設定します。
- パブリッシュしてテストします。
入力パラメータ
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| Position | ウィジェット要素の周囲の位置を設定します。 | PositionExtended Identifier | False | Entities.PositionExtended.Center |
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。 | Text | False | なし |
レイアウトおよびクラス
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
| .blank-slate | .bottom-center | コンテンツの垂直位置を下に合わせ、水平位置を中央に合わせます。 |
| .blank-slate | .bottom-left | コンテンツの垂直位置を下に合わせ、水平位置を左に合わせます。 |
| .blank-slate | .bottom-right | コンテンツの垂直位置を下に合わせ、水平位置を右に合わせます。 |
| .blank-slate | .center | コンテンツの垂直位置を中央に合わせ、水平位置を中央に合わせます。 |
| .blank-slate | .center-left | コンテンツの垂直位置を中央に合わせ、水平位置を左に合わせます。 |
| .blank-slate | .center-right | コンテンツの垂直位置を中央に合わせ、水平位置を右に合わせます。 |
| .blank-slate | .top-center | コンテンツの垂直位置を上に合わせ、水平位置を中央に合わせます。 |
| .blank-slate | .top-left | コンテンツの垂直位置を上に合わせ、水平位置を左に合わせます。 |
| .blank-slate | .top-right | コンテンツの垂直位置を上に合わせ、水平位置を右に合わせます。 |
高度なユースケース
リストが空のときにBlankSlateパターンを表示する
-
Ifウィジェットをドラッグし、条件にEmptyランタイムプロパティを入力します。
-
条件のTrueブランチで、BlankSlateパターンを使用します。
-
条件のFalseブランチで、リストを使用します。
