<!--Margin-right-5 는 margin-right: 5px 을 뜻하는 helper css 입니다.-->
<!--검색 버튼의 활용은 아이콘만 넣을 수도 있고 텍스트, 아이콘+텍스트, 텍스트+아이콘등으로 사용할 수 있습니다.
상세한 자료는 ui.alopex.io에서 확인해주세요.-->
<!--input & button 타입-->
<!--data-position="left" 는 아이콘의 위치를 왼쪽으로 지정해주는 속성입니다.-->
<input class="Textinput Margin-right-5">
<button class="Button"><span class="Icon Search" data-position="left"></span>검색</button>
<!--검색 option 선택 타입-->
<!--data-placeholder="선택"은 셀렉트 컴포넌트의 placeholder 값을 설정하는 속성입니다.-->
<select class="Select Margin-right-5" data-placeholder="선택">
<option>제목</option>
<option>글쓴이</option>
<option>내용</option>
</select>
<input class="Textinput Margin-right-5"><button class="Button">검색</button>
Helper css를 응용한 big size search sample
<!--포털 사이트처럼 최상단에 search를 우선으로 넣을 경우 Helper css를 활용하여 search object를 구성할 수 있습니다.-->
<!--Text-center 는 text-align: center을 상징하는 Helper css 입니다. search object를 가운데로 위치하도록 하기 위해서 사용합니다.-->
<div class="Text-center">
<!--Width-60 을 width: 60%를 의미합니다. button의 크기는 Extra로 줬기 때문에 input의 height 값을 inline element style을 사용하여 button에 맞추어 줍니다.-->
<input class="Textinput Width-60 Margin-right-5" style="height: 38px">
<button class="Button Extra"><span class="Icon Search" data-position="left"></span>검색</button>
</div>
*항목 | 체크박스 | |||
---|---|---|---|---|
항목 | 검색 | |||
검색조건 | 검색조건 |
*항목 | 체크박스 | ||
---|---|---|---|
항목 | 검색 | ||
검색조건 | 검색조건 |
<!--Table Alopex UI를 사용해서 적용해줍니다. Table 내 Scroller가 필요한 경우 "Table-wrapper" 아래에 <div class="Table-scroller">를 넣어 주면 됩니다.
Table 내에 버튼을 넣고 싶은 경우에는 마지막 td 안에 넣어주세요
Table 외부로 버튼을 놓고자 하는 경우 Table-wrapper와 동일 선에서 markup 하여줍니다. 위치값은 Button Object Template를 참고하여 원하는 방향으로
설정해주면 됩니다.-->
<div class="Table-wrapper">
<table class="Table Form-type"> <!--Form 모양의 Table이 필요한 경우 class name Form-type을 넣어준다.-->
<colgroup>
<col style="width:100px"> <!--th의 사이즈를 정해준다. 사이즈를 넣지 않을 경우 동일 width로 지정된다.-->
<col>
<col style="width:100px">
<col>
</colgroup>
<tbody>
<tr>
<th>항목</th>
<td>내용들어가는 곳</td>
<th>항목</th>
<td>내용들어가는 곳</td>
......
</tbody>
</table>
</div>
<!--Button Object 영역-->
<div class="Float-right"><button class="Button Warning Margin-right-5">검색</button><button class="Button Default">삭제</button></div>
<ul class="Navmenu"> <!--메인 메뉴에 대한 API를 적용해주세요.-->
<li><a href="#0">Parent #1</a>
<ul>
<li><a href="#0">Child #1</a>
<ul>
<li>
<a href="#0">GrandChild #1</a>
</li>
</ul>
</li>
<li><a href="#0">Child #2</a>
<ul>
<li>
<a href="#0">GrandChild #1</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#0">Parent #2</a>
<ul>
<li><a href="#0">Child #1</a>
<ul>
...... <!--이후 Navmenu에 관한 사용법은 ui.alopex.io를 참조해주세요.-->
</ul>
</li>
</ul>
</li>
<li>
<a href="#0">Parent #3</a>
</li>
<li class="Float-right"><!--Search 부분을 메뉴의 오른쪽으로 위치하기 위해 Helper css "Float-right"를 사용합니다.-->
<input class="Textinput"><button class="Button Onlyicon"><span class="Icon Search" data-position="top"></span></button>
<!--Button Onlyicon classname을 적용하고 icon의 위치를 잡아주는 data-position="top" 을 추가해주면 버튼을 아이콘만 표시할 수 있습니다.-->
</li>
</ul>
<!--search 가 먼저 시작하므로 search에 해당하는 markup을 먼저 적용해줍니다. Navmenu 내에 있지 않으므로 block tag를 사용해줍니다.-->
<div class="Float-right">
<input class="Textinput"><button class="Button Onlyicon"><span class="Icon Search" data-position="top"></span></button>
</div>
<ul class="Clearboth Navmenu"> <!--Navmenu에는 clear:both 등 상위 markup의 float를 해제해주는 것이 없으므로 Helper css인 Clearboth 를 추가해줍니다.-->
<li><a href="#0">Parent #1</a>
<ul>
<li><a href="#0">Child #1</a>
........
</li>
</ul>
Accordion으로 적용할 경우
List로 적용할 경우
Tab을 적용하고 Tree 구조를 사용할 경우
tab2 Contents
<!--search를 먼저 위치시키거나 메뉴 밑에 위치시키거나 사용자의 필요성에 따라 적용해줍니다.-->
<div>
<input class="Textinput"><button class="Button Onlyicon"><span class="Icon Search" data-position="top"></span></button>
</div>
26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.