From Design pattern
Jump to: navigation, search
Line 1: Line 1:
 
{{#css:
 
#mw-content-text h3 span {
 
font-weight: 600;
 
padding-left: 0px;
 
}
 
 
.mw-headline {
 
font-weight: 600;
 
}
 
 
span.mw-editsection {
 
font-weight: 200;
 
position: relative;
 
float:right;
 
margin-right: 25px
 
}
 
 
span.mw-editsection a {
 
font-weight: 200;
 
}
 
 
.art-subpage {
 
background: #F7F7F7;
 
}
 
 
#mw-content-text p {
 
padding-top: 0px;
 
padding-bottom: 6px;
 
}
 
 
.mw-content-ltr ul {
 
margin: 0.3em 0 0 42px;
 
}
 
 
 
hr {
 
margin-top: 0px;
 
margin-bottom: 0px;
 
margin-left: -31px;
 
width: 720px;
 
border-bottom: 1px solid #E0E0DD;
 
border-left: 0px;
 
border-right: 0px;
 
border-top: 30px solid #F7F7F7;
 
}
 
<!--
 
#sun-col {
 
-webkit-column-count:2; /* Chrome, Safari, Opera */
 
-moz-column-count:2; /* Firefox */
 
column-count:2;
 
}
 
 
#sun-col p {
 
padding-left: 0px;
 
-->
 
}
 
 
}}
 
 
 
Stepper는 숫자를 입력하거나 특정수치를 단계적으로 증가시키거나 감소시킬 때 사용하는 pattern이다. Plus/minus button이라고도 불린다.
 
Stepper는 숫자를 입력하거나 특정수치를 단계적으로 증가시키거나 감소시킬 때 사용하는 pattern이다. Plus/minus button이라고도 불린다.
  
Line 74: Line 14:
  
 
== Stepper (Enter value) ==
 
== Stepper (Enter value) ==
<div id="sun-col">
 
  
 
=== Example : Android_Noom Diet Coach ===
 
=== Example : Android_Noom Diet Coach ===
Line 84: Line 23:
 
=== Android_Naver Cal ===
 
=== Android_Naver Cal ===
 
{{#Widget:Vimeo|id=96420901|width=300|height=541}}
 
{{#Widget:Vimeo|id=96420901|width=300|height=541}}
</div>
 
  
 
----
 
----
  
 
== Stepper (Control value) ==
 
== Stepper (Control value) ==
<div id="sun-col">
 
  
 
=== Android_Candy Camera ===
 
=== Android_Candy Camera ===
Line 100: Line 37:
 
=== iOS_Cragslist ===
 
=== iOS_Cragslist ===
 
{{#Widget:Vimeo|id=93367952|width=300|height=400}}
 
{{#Widget:Vimeo|id=93367952|width=300|height=400}}
 
</div>
 
  
 
[[Category:Enter a continuous value]]
 
[[Category:Enter a continuous value]]

Revision as of 11:02, 11 June 2014

Stepper는 숫자를 입력하거나 특정수치를 단계적으로 증가시키거나 감소시킬 때 사용하는 pattern이다. Plus/minus button이라고도 불린다.

With this pattern, we can solve...

app에서 숫자를 입력하거나 단계적 수치를 조절하기 위한 pattern이 필요하다. Stepper는 원하는 숫자나 수치를 단계적으로 입력할 수 있는 기능을 제공한다.

  • Stepper는 원하는 숫자를 입력하거나 수치를 조절할 때, 일정한 양이 증가하거나 감소한다.
  • Stepper는 각 버튼을 tap하여 수치를 조절하며, 변경된 수치는 화면에 즉각적으로 나타난다.

Example : iOS_Vueling


Stepper (Enter value)

Example : Android_Noom Diet Coach

Android_Preference

Android_Naver Cal


Stepper (Control value)

Android_Candy Camera

  • 화면의 버튼을 플러스, 마이너스로 drag하여 카메라 렌즈의 배율을 조절한다.

iOS_NAVER

iOS_Cragslist