Skip to main content

 

UIを設計する

 

OutSystems

SplitScreenパターン

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

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

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

SplitScreenパターンの使用方法

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

1. ブーリアン型のローカル変数を作成して、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 分割された画面の右側(詳細)を開いたり閉じたりするために使用します。

イベント

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

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
MasterDetail Wrapper .split-screen-wrapper
Left Content .split-left
Right Content .split-right
Close Right Content .split-right-close

他のパターンとの互換性

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

サンプル

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

  • Was this article helpful?