From Design pattern
Jump to: navigation, search
m (Admin8 moved page Switch to Switches without leaving a redirect)
(Blanked the page)
 
(12 intermediate revisions by 2 users not shown)
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;
 
-->
 
}
 
 
}}
 
 
Switches는 On/Off와 마찬가지로 두 개의 상호 배타적인 옵션 중 하나를 지정하는 pattern이다.
 
 
두 개의 옵션이 함께 보여지며 좌우로 swipe하여 설정하는 경우는 switches로, 동일한 기능이지만 하나의 설정값이 보여지며 버튼을 클릭하여 다른 설정값으로 바꾸는 경우는 toggle buttons라고 불린다. toggle buttons의 경우는 두번 누를 경우 다시 처음 설정값으로 돌아온다. switches나 toggle은 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절한다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 함께 주어진다.
 
----
 
=Switches=
 
<div id="sun-col">
 
=== iOS_설정 ===
 
{{#Widget:Vimeo|id=96557098|width=300|height=533}}
 
 
=== iOS_gmail ===
 
{{#Widget:Vimeo|id=96557102|width=300|height=533}}
 
</div>
 
 
[[Category:Make selection from pre-defined values]]
 

Latest revision as of 13:04, 28 May 2014