오리가미 다운로드

    if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))     {(function(){document.writeln(' ');})();}     else{(function(){document.writeln(' ');})();}

5. 상태 State

모든 프로토타입에는 여러 상태가 전환될 수 있습니다. 오리가미에서는 스위치Switch 패치를 사용하여 현재 상태를 추적할 수 있습니다. 이 스위치는 전등 스위치와 같으며 인터랙션 패치로 켰다 껐다 할 수 있습니다.

상태 패치 State Patches

스위치 Switch (단축키 ⇧S)

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545; min-height: 12.0px} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px '.Apple SD Gothic NeoI'; color: #000000} span.s1 {font: 12.0px 'Lucida Grande'} span.s2 {font: 12.0px 'Helvetica Neue'}

스위치 패치는 전등 스위치와 같습니다: 켜면 계속 켜져 있고, 끄면 계속 꺼져 있게 됩니다. 이는 단순한 두 상태의 인터랙션을 만드는데 도움이 됩니다. (예: 팝오버popover에서 주석을 보이고 숨기기)

여러 개의 스위치Switch 패치를 로직Logic 패치 (Or, And, Not)와 결합하여 서로의 위에 구축할 수 있습니다. 

옵션 스위치 Option Switch

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545; min-height: 12.0px}

옵션 스위치 패치는 공존할 수 없는 상호 배타적인 상태에 유용합니다 (예: 탭 바tab bar). 옵션 스위치는 상태에 따라 다른 값을 전달하기 위해 일반적으로 옵션 선택기Option Picker와 함께 사용됩니다. 예를 들어, 3가지 상태 사이에서 내비게이션 타이틀을 변경할 때 사용할 수 있습니다. 

카운터 Counter

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545} span.s1 {font: 12.0px '.Apple SD Gothic NeoI'}

카운터 패치는 공존할 수 없는 상호 배타적인 상태에 유용하며, 고정된 순서로 증가합니다. (예: 온보딩onboarding)

인덱스 번호는 상태를 나타냅니다

스위치 및 옵션 스위치 패치는 활성 상태에 대한 번호를 출력합니다. 스위치 패치 출력을 0(꺼짐) 또는 1(켜짐)로 전환하고 옵션 스위치 패치 출력은 첫 번째 상태의 경우 0, 두 번째의 경우 1, 이렇게 계속 늘어납니다.

인덱스 0 → 초기 상태 / 꺼짐 상태

인덱스 1 → 두 번째 상태 / 켜짐 상태

인덱스 2 → 세 번째 상태

인덱스 3 → 네 번째 상태

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545; min-height: 14.0px} p.p3 {margin: 0.0px 0.0px 2.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545} p.p4 {margin: 0.0px 0.0px 2.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545} span.s1 {font: 12.0px 'Helvetica Neue'}

...

    if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))     {(function(){document.writeln(' ');})();}     else{(function(){document.writeln(' ');})();}

원문: Origami Studio - State

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.