맨위로가기
 

SBUx

닫기

2.13 드롭다운의 Bradcrumb 기능 활용하기

STEP 1. dropdown 컴포넌트 생성

1. 2level 이상의 자식구조를 가진 dropdown 컴포넌트를 생성합니다. 
<script>
    var dropdownJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"input"},
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"text" },
        {"id":"1_1_1",	"pid":"1_1",	"order":"1",	"text":"init"},
        {"id":"1_1_2",	"pid":"1_1",	"order":"2",	"text":"password"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"picker"},
        {"id":"3",	"pid":"0",	"order":"3",	"text":"radio"},
        {"id":"4",	"pid":"0",	"order":"4",	"text":"select"},
    ];
</script>
<sbux-dropdown id="sbIdx1_1" name="sbTagNm1_1" uitype="normal" text="SBUx normal dropdown" jsondata-ref="dropdownJsonData" ></sbux-dropdown>

STEP 2. dropdown 컴포넌트에 show-bradcrumb-text 속성 추가

1. show-bradcrumb-text 속성의 필수 속성인 is-change-text 속성을 추가합니다. 
<script>
    var dropdownJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"input"},
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"text" },
        {"id":"1_1_1",	"pid":"1_1",	"order":"1",	"text":"init"},
        {"id":"1_1_2",	"pid":"1_1",	"order":"2",	"text":"password"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"picker"},
        {"id":"3",	"pid":"0",	"order":"3",	"text":"radio"},
        {"id":"4",	"pid":"0",	"order":"4",	"text":"select"},
    ];
</script>
<sbux-dropdown id="sbIdx1_1" name="sbTagNm1_1" uitype="normal" text="SBUx normal dropdown" jsondata-ref="dropdownJsonData" is-change-text="true" ></sbux-dropdown>
2. show-bradcrumb-text 속성을 추가합니다. 
<script>
    var dropdownJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"input"},
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"text" },
        {"id":"1_1_1",	"pid":"1_1",	"order":"1",	"text":"init"},
        {"id":"1_1_2",	"pid":"1_1",	"order":"2",	"text":"password"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"picker"},
        {"id":"3",	"pid":"0",	"order":"3",	"text":"radio"},
        {"id":"4",	"pid":"0",	"order":"4",	"text":"select"},
    ];
</script>
<sbux-dropdown id="sbIdx1_1" name="sbTagNm1_1" uitype="normal" text="SBUx normal dropdown" jsondata-ref="dropdownJsonData" is-change-text="true" show-breadcrumb-text="true" ></sbux-dropdown>

메뉴를 선택하고 Title을 확인해보세요.