맨위로가기
 

SBUx

닫기

2.28 좌측 메뉴의 접고/펼치기 기능을 이용한 화면 넓게 사용하기

STEP 1. sidemenu 컴포넌트 생성

1. menu 컴포넌트를 생성합니다. 
<script>
    var sideJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"1"},
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"1_1" },
        {"id":"1_1_1",	"pid":"1_1",	"order":"1",	"text":"1_1_1"},
        {"id":"1_1_2",	"pid":"1_1",	"order":"2",	"text":"1_1_2"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"2"},
        {"id":"2_1",	"pid":"2",	"order":"1",	"text":"2_1"},
        {"id":"2_1_1",	"pid":"2_1",	"order":"1",	"text":"2_1_1"}
    ];
</script>
<sbux-sidemenu id="sbIdx1_1" name="sbIdx1_1" uitype="normal" jsondata-ref="sideJsonData" ></sbux-sidemenu>

STEP 2. show-slide-button 속성 추가

1. show-slide-button 속성을 설정합니다. 
<script>
    var sideJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"1"},
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"1_1" },
        {"id":"1_1_1",	"pid":"1_1",	"order":"1",	"text":"1_1_1"},
        {"id":"1_1_2",	"pid":"1_1",	"order":"2",	"text":"1_1_2"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"2"},
        {"id":"2_1",	"pid":"2",	"order":"1",	"text":"2_1"},
        {"id":"2_1_1",	"pid":"2_1",	"order":"1",	"text":"2_1_1"}
    ];
</script>
<sbux-sidemenu id="sbIdx1_1" name="sbIdx1_1" uitype="normal" jsondata-ref="sideJsonData" show-slide-button="true" ></sbux-sidemenu>