Object Template : Paging

Paging : Type & Position

Typeb

Typeb 를 사용할 경우 class 'Typeb'를 적용해줍니다.

Element 영역 나누기

단순 Paging만이 아니라 element 를 한 줄에 넣고 싶은 경우 UI Layout Grid을 사용하여 원하는 영역으로 분활하여 줍니다.
element가 비어있더라도 paging을 가운데로 두려면 UI Layout Grid를 그대로 유지하여 영역을 맞추어 줍니다.

Paging
Paging Tybeb
Position : center
Position : right
							
								<div class="Text-center">
								<!--Paging의 Position을 center로 설정할 경우 <div class="Text-center"> 를 추가해주고
								    Position을 right로 설정할 경우 <div class="Float-right"> 를 추가해주세요.-->
								    <div class="Paging" data-totalpage="19" data-button-behavior="disable">
								    <!-- Paging Typeb : Paging의 또다른 디자인 적용 시 'Typeb'를 추가해줍니다.-->
								        <a class="Link First"><span>첫페이지</span></a>
								        <a class="Link Prev"><span>이전</span></a>
								        <a class="Link"><span>1</span></a>
								        <a class="Link"><span>2</span></a>
								        <a class="Link"><span>3</span></a>
								        <a class="Link Next"><span>다음</span></a>
								        <a class="Link Last"><span>마지막페이지</span></a>
								    </div>
								</div>
							
						
Paging Layout
/ 1000
Paging Layout : 왼쪽 Element 가 비어있는 경우
Paging Layout : 오른쪽 element가 비어있는 경우
							
								<!-- UI Layout Grid를 3columns / 6columns / 3columns 로 나누어 적용하였습니다. -->
								<div class="Grid-sm-12">
								    <div class="Grid-sm-3">
								        <select class="Select">
								            <option>1~10 Pages</option>
								            <option>11~20 Pages</option>
								            <option>21~30 Pages</option>
								        </select>
								    </div>
								    <div class="Grid-sm-6 Text-center">
								    <!-- 가운데 Paging 부분을 6columns에서 중앙에 위치하도록 하기 위해서 class 'Text-center'를 추가하였습니다. -->
								        <div class="Paging" data-totalpage="19" data-button-behavior="disable">
								            <a class="Link First"><span>첫페이지</span></a>
								            <a class="Link Prev"><span>이전</span></a>
								            <a class="Link"><span>1</span></a>
								            <a class="Link"><span>2</span></a>
								            <a class="Link"><span>3</span></a>
								            <a class="Link Next"><span>다음</span></a>
								            <a class="Link Last"><span>마지막페이지</span></a>
								        </div>
								    </div>
								    <div class="Grid-sm-3 Text-right">
								    <!-- 오른쪽 element 부분을 오른쪽으로 완전히 붙이기 위해서 class 'Text-right'를 추가하였습니다.-->
								        <input class="Textinput"><span>/ 1000</span><button class="Button">이동</button>
								    </div>
								</div>

								* 각 column에 내용이 없더라도 Paging을 중앙에 위치하도록 하려면 내용만 비워두고 UI Layout Grid 형식은 그대로 유지하여 줍니다.
							
						
SK Holdings C&C

26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.