SBUx

<sbux-button></sbux-button>

<script>

   function evt_onclick(args){

       console.log ("큰버튼 클릭시의 value입니다. : " + args);

   }                

</script>

<!-- normal type -->

<sbux-button id="idxBtn_norm_1" name="btn_norm_1" uitype="normal"

                   text="큰버튼"

                   value="큰버튼 value"

                   button-size="large"

                   onclick="evt_onclick(btn_norm_1)"></sbux-button>

<sbux-button id="idxBtn_norm_2" name="btn_norm_2" uitype="normal"

                   text="중간버튼"

                   value="중간버튼 value"

                   button-color="blue"></sbux-button>

<sbux-button id="idxBtn_norm_3" name="btn_norm_3" uitype="normal"

                   text="작은버튼"

                   value="작은버튼 value"

                   button-size="small"

                   button-color="green"></sbux-button>

<sbux-button id="idxBtn_norm_4" name="btn_norm_4" uitype="normal"

  style="padding:1px 10px 1px 1px;background-color:#242C38;border-color:#1C222B;"

                image-src="./images/logout.png"

                image-style="width:15px;height:15px;"

                image-placement="front"

                button-size="small">

</sbux-button>

<!-- modal type -->

<sbux-select id="idxSelect_modal" name="select_modal" uitype="single"

                 auto-unselected-text="true"  style="width:150px;">

     <option-item value="red">빨강</option-item>

     <option-item value="green">초록</option-item>

</sbux-select>

<sbux-button id="idxBtn_modal" name="btn_modal" uitype="modal"

                   text="expression 을 통한 처리"

                   value="버튼 value"

                   button-color="blue"

                   target-id="{{select_modal == 'red' ? 'idxModal_small' : '' }}" >

</sbux-button>

<sbux-modal id="idxModal_small" name="modal_samll" uitype="small"

                   is-fade="true"

                   header-title="빨강 일때 나타나는 Modal"

                   body-html="Modal 관련 부분은 Modal 컴포넌트 시 설명합니다.">

</sbux-modal>

<!-- submit type -->

<script>

   function fnFormSubmit(){

       console.log ("폼 서브밋 처리를 합니다");

      $("idxReqForm").submit(function(event){

          console.log("submit event", event);

      });

   }                

</script>

<form id="idxReqForm" name="reqForm" method="POST">

   <sbux-input id="idxInputReq" name="inputReq" uitype="text"

                     style="width:100px"

                     minlength="3"

                     maxlength="10"

                     required></sbux-input>

   <sbux-button id="idxBtn_sub" name="btn_sub" uitype="submit"

                       button-size="small"

                       text="자료제출"

                       onclick="fnFormSubmit()"></sbux-button>

</form>

<div id="sbArea"></div>

<script>

   $(document).ready(function(){

       $('#sbArea').sbButton({

           name : 'sbScriptNm',

           uitype : 'normal',

           text : 'SBUx normal button'

       });

   });

</script>