Object Template : Progress bar

Progress bar

Type 사용법

프로그레스바는 %를 이미지로만 표시하는 경우와 %를 텍스트랑 같이 bar 내에 표시하는 경우로 나누어집니다.

  • 이미지로만 표시하는 경우 : bar 내에 텍스트를 두지않고 본문내에 두거나 분리하여 사용할 경우/ 단순히 %의 정도만 보여줄경우
  • bar 내에 텍스트와 컬러를 같이 표현할 경우 : 좁은 공간에서 한번에 많은 정보를 제공하고자 할 때 사용합니다..
    설문 조사등에 사용할 때는 각 element 별로 Helper css를 사용하여 영역을 구분하여 적용하여 줍니다.
In Table
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1
Row 2, Col 3 Row 2, Col 4
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3
					 	
					 		<!-- class 'Progress-text'를 추가하면 Progressbar로 표시되는 해당 %에 대한 텍스트를 추가할 수 있습니다. 자세한 사항은 ui.alopex.io에서 확인해주세요 -->
					 		<div class="Progressbar Progress-text" data-default="25"></div>
					 	
					 
Survey
Q.01 Alopex UI/UX 를 웹사이트에 접근할때 사용성은 어떤가요?
  • 사용성이 훌륭하다.
    67명
    67%
  • 쓸만하다
    30명
    30%
  • 제품에 대해서 잘 모른다.
    3명
    3%
					 	
					 		<!-- 설문 조사 질문 한개당 한개의 'Panel'이라고 생각하여 여기서는 'Panel'로 적용했습니다. 다른 html tag를 사용하여 custom해도 됩니다.
					 		     'Panel' 사용법에 대해서는 ui.alopex.io에서 확인하실 수 있습니다.-->
					 		<div class="Panel">
					 		    <div class="Panel-header">Q.질문</div>
					 		    <div class="Panel-content">
					 		        <ul>
					 		            <li>
					 		                설문조사 항목에 대한 결과 1
					 		            </li>
					 		            <li>
					 		                설문조사 항목에 대한 결과 2
					 		            </li>
					 		            <li>
					 		                설문조사 항목에 대한 결과 3
					 		            </li>
					 		        </ul>
					 		    </div>
					 		</div>
					 	
					 
SK Holdings C&C

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