SBUx - OVERVIEW

Tutorials

2.15 alet 컴포넌트로 공지사항 만들기

STEP 1. alert 컴포넌트 생성

1. alert을 띄우게할 컴포넌트를 생성합니다.

<sbux-select id="sbIdx" name="sbName" uitype="single">
    <option-item value="iValue">input</option-item>
    <option-item value="pValue">picker</option-item>
    <option-item value="rValue">radio</option-item>
    <option-item value="sValue">select</option-item>
</sbux-select>

2. 생성한 컴포넌트와 연동하여 alert 컴포넌트를 생성합니다.

<sbux-select id="sbIdx" name="sbName" uitype="single">
    <option-item value="iValue">input</option-item>
    <option-item value="pValue">picker</option-item>
    <option-item value="rValue">radio</option-item>
    <option-item value="sValue">select</option-item>
</sbux-select>
<sbux-alert id="sbIdx1_1" name="sbTagNm1_1" uitype="alert" switch-name="sbName"
            case-array="{iValue,,input을 선택하셨습니다.,}^
                        {pValue,,picker를 선택하셨습니다.,}^
                        {rValue,,radio를 선택하셨습니다.,}^
                        {sValue,,select를 선택하셨습니다.,}">
</sbux-alert>

STEP 2. is-fixed 속성 추가

1. is-fixed 속성을 추가합니다.

<sbux-select id="sbIdx" name="sbName" uitype="single">
    <option-item value="iValue">input</option-item>
    <option-item value="pValue">picker</option-item>
    <option-item value="rValue">radio</option-item>
    <option-item value="sValue">select</option-item>
</sbux-select>
<sbux-alert id="sbIdx1_1" name="sbTagNm1_1" uitype="alert" switch-name="sbName"
            case-array="{iValue,,input을 선택하셨습니다.,}^
                        {pValue,,picker를 선택하셨습니다.,}^
                        {rValue,,radio를 선택하셨습니다.,}^
                        {sValue,,select를 선택하셨습니다.,}"
            is-fixed="true">
</sbux-alert>

메뉴를 선택해보세요.

input

picker

radio

select