SplitScreenパターン

Last updated
Save as PDF

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

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

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

SplitScreenパターンの使用方法

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

1.Boolean型のローカル変数を作成して、OpenedOnPhoneパラメータに設定します。

2.クリックした要素の詳細を開くには、アクションのリンクを使用し、ローカル変数を_True_に設定します。適切な詳細を開くロジックを追加します。

3.詳細を閉じるには、アクションを作成し、ローカル変数を_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	分割された画面の右側（詳細）を開いたり閉じたりするために使用します。