モバイルアプリとリアクティブWebアプリにのみ適用されます

Split Screen

Last updated
Save as PDF

タブレットでSplit Screenパターンを使用すると、画面が左右に分割されて2つの独立したパネルになります。左パネルの幅を画面の割合で構成できます。パターンを使用すると、一度に1つのパネルのみを表示することで、スマホのレイアウトに適切に適合できます。

これは一般的なタブレット用のパターンであり、左パネルで選択した項目の詳細を右パネルに表示するときに使用できます。

以下は、Service Studioでのプレビューです。

Split Screen UIパターンの使用方法

左側を占める画面の割合を定義し、モバイル端末で右側の領域の状態（開くおよび閉じる）を処理する変数をバインドします。また、独自のロジックをDetailCloseイベントにバインドすることもできます。

Boolean型のローカル変数を作成して、OpenedOnPhoneパラメータに設定します。
クリックした要素の詳細を開くには、アクションのリンクを使用し、ローカル変数を_True_に設定します。適切な詳細を開くロジックを追加します。
詳細を閉じるには、アクションを作成し、ローカル変数を_False_に設定して、DetailCloseイベントでこのアクションを使用します。このプロセスにロジックを追加します。

動作がタブレットと同じ横向きのスマホ

Service Studioでスタイルシートエディタを開き、以下のコードを追加します。

.phone.landscape .split-left {
         width: **x; /* Enter the width value for the left side */**
}



.phone.landscape .split-right {
         -webkit-transform: translateX(0) translateZ(0);
                transform: translateX(0) translateZ(0);
        width: **x; /* Enter the width value for the right side */**
         left: auto;
        right: 0;
        border-left: 1px solid #d3d3d3;
}


.phone.landscape .detail-open .split-right-close {
        opacity: 0;
        pointer-events: none;
}


.phone.landscape .detail-open .app-menu-icon {
        opacity: 1;
        pointer-events: auto;
}

プロパティ

プロパティ	説明
LeftPercentage	分割された画面の左側の割合。
OpenedOnPhone	分割された画面の右側（詳細）を開いたり閉じたりするために使用します。

イベント

イベント名	説明	必須
DetailClose	詳細（分割された画面の右側）が閉じるとトリガーされます。	False

他のパターンとの互換性

このパターンは親要素の高さに合わせるため、画面コンテンツ内で単独で使用する必要があります。TabsやCarouselなど、スワップイベントを使用するパターン内での使用は避けてください。

サンプル

以下は、Split Screenパターンを使用したサンプルです。

Training

Documentation