Skip to main content

 

UIを設計する

 

OutSystems

MasterDetailパターン

MasterDetailパターンはSplitScreenパターンに似ていますが、左パネルのアイテムリストを受け取ります。タブレットアプリでこのパターンを使用すると、アイテムのリストの詳細を表示できます。

以下は、Development環境でのプレビューです。

MasterDetailパターンの使用方法

最初にListをItemListパラメータにバインドし、ブロックの各イベントを使用して[Content]プレースホルダを変更します。

1. ブーリアン型のローカル変数を作成して、「OpenedOnPhone」に設定します。

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

3. 詳細を閉じるには、アクションを作成し、ローカル変数を[False]に設定して、DetailCloseイベントでこのアクションを使用します。必要なロジックを追加します。

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

横向きのスマホをタブレットと同じように動作させることができます。

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



.phone.landscape .split-right {
     -webkit-transform: translateX(0) translateZ(0);
      transform: translateX(0) translateZ(0);
    width: **x; /* This is 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;
}

入力パラメータ

入力名 説明 デフォルト値
ItemList MasterDetailの左側のリストの項目です。 N/A

イベント

イベント名 説明 必須
DetailClose 詳細(MasterDetailの右側)が閉じるとトリガーされます。 False
ItemSelected リストの項目(MasterDetailの左側)が選択されるとトリガーされます。 False

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
MasterDetail Wrapper .split-screen-wrapper 左右のコンテナ内の要素をラップするコンテナ。
Left Content .split-left 左側にコンテンツを追加します。
Right Content .split-right 右側にコンテンツを追加します。スマホ表示では、この要素はキャンバスの外側になります。
Close Right Content .split-right-close

他のパターンとの互換性

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

サンプル

MasterDetailパターンは、以下のサンプルのように使用できます。

  • Was this article helpful?