Master Detailのリファレンス

Last updated
Save as PDF

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

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

.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

Training

Documentation