Master Detailのリファレンス
動作がタブレットと同じ横向きのスマホ
横向きのスマホをタブレットと同じように動作させることができます。
.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;
}
イベント
| イベント名 | 説明 | 必須 |
|---|---|---|
| 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 |