SBUx - OVERVIEW

Tutorials

2.21 메뉴 하위 구조를 한꺼번에 보기

STEP 1. menu 컴포넌트 생성

1. menu 컴포넌트를 생성하고 trigger 속성을 추가합니다.

<script>
    var menuJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"SBUx"},
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"input" },
        {"id":"1_2",	"pid":"1",	"order":"2",	"text":"text"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"SBChart"},
        {"id":"3",	"pid":"0",	"order":"3",	"text":"SBGrid"},
        {"id":"3_1",	"pid":"3",	"order":"1",	"text":"SBGrid 2.1"},
        {"id":"3_2",	"pid":"3",	"order":"2",	"text":"SBGrid 2.5"},
    ];
</script>

<sbux-menu id="sbIdx1" name="sbTagNm1" uitype="normal" trigger="hover" jsondata-ref="menuJsonData" ></sbux-menu>

STEP 2. 전체 메뉴 보기

1. show-all-menu 속성을 설정합니다.

<script>
    var menuJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"SBUx"},
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"input" },
        {"id":"1_2",	"pid":"1",	"order":"2",	"text":"text"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"SBChart"},
        {"id":"3",	"pid":"0",	"order":"3",	"text":"SBGrid"},
        {"id":"3_1",	"pid":"3",	"order":"1",	"text":"SBGrid 2.1"},
        {"id":"3_2",	"pid":"3",	"order":"2",	"text":"SBGrid 2.5"},
    ];
</script>

<sbux-menu id="sbIdx1" name="sbTagNm1" uitype="normal" trigger="hover" jsondata-ref="menuJsonData" show-all-menu="true" ></sbux-menu>

STEP 3. 자식 메뉴만 보기

1. show-sub-all-menu 속성을 설정합니다.

<script>
    var menuJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"SBUx"},
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"input" },
        {"id":"1_2",	"pid":"1",	"order":"2",	"text":"text"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"SBChart"},
        {"id":"3",	"pid":"0",	"order":"3",	"text":"SBGrid"},
        {"id":"3_1",	"pid":"3",	"order":"1",	"text":"SBGrid 2.1"},
        {"id":"3_2",	"pid":"3",	"order":"2",	"text":"SBGrid 2.5"},
    ];
</script>

<sbux-menu id="sbIdx1" name="sbTagNm1" uitype="normal" trigger="hover" jsondata-ref="menuJsonData" show-sub-all-menu="true" ></sbux-menu>

마우스를 올려 전체메뉴가 보이는 것을 확인해보세요.

마우스를 올려 자식메뉴가 보이는 것을 확인해보세요.