Enterprise: λͺ©λ‘-μ„ΈλΆ€ 사항 νŒ¨ν„΄(λ°˜μ‘ν˜• λͺ¨λ“œμ—μ„œ) - μ„ΈλΆ€ 사항을 ν‘œμ‹œν•˜λŠ” 선택을 μœ„ν•΄ κ³ μœ ν•œ μ–΄ν¬λ˜μŠ€ λͺ©λ‘ 보기가 ν•„μš”ν•©λ‹ˆλ‹€.

에 λ§Œλ“  2018λ…„ 11μ›” 01일  Β·  8μ½”λ©˜νŠΈ  Β·  좜처: infor-design/enterprise

버그 μ„€λͺ…
ν˜„μž¬ λ°˜μ‘ν˜• λͺ¨λ“œμ˜ λͺ©λ‘-μ„ΈλΆ€ 사항 νŒ¨ν„΄μ€ 선택이 이루어지면 μ„ΈλΆ€ μ‚¬ν•­μœΌλ‘œ μ΄λ™ν•©λ‹ˆλ‹€. λͺ©λ‘μ—μ„œ 상황별 μž‘μ—…μ„ μ‹€ν–‰ν•˜κΈ° μœ„ν•΄ μ„ νƒν•˜λŠ” κΈ°λŠ₯κ³Ό "μ„ΈλΆ€ 사항을 ν‘œμ‹œν•˜λŠ”" 또 λ‹€λ₯Έ 방법이 ν•„μš”ν•©λ‹ˆλ‹€.

원이 μ—†λŠ” ν™”μ‚΄ν‘œ λ²„νŠΌ(ν•­λͺ©μ„ 아무 κ³³μ΄λ‚˜ 클릭할 수 μžˆμŒμ„ μ˜λ―Έν•¨)κ³Ό μ›μœΌλ‘œ λ‘˜λŸ¬μ‹ΈμΈ ν™”μ‚΄ν‘œ λ²„νŠΌ(μ„ΈλΆ€ 사항을 ν‘œμ‹œν•˜λ €λ©΄ νƒ­ν•΄μ•Ό 함을 μ˜λ―Έν•¨)을 κ΅¬λ³„ν•˜κΈ° μœ„ν•΄ μ£Όμœ„μ— 원이 μžˆλŠ” ν™”μ‚΄ν‘œ λ²„νŠΌμ„ μ œμ•ˆν•˜μ‹­μ‹œμ˜€.

μž¬ν˜„ν•˜κΈ° μœ„ν•΄
λ™μž‘μ„ μž¬ν˜„ν•˜λŠ” 단계:

  1. http://master-enterprise.demo.design.infor.com/patterns/list-detail-paging-indeterminate.html둜 μ΄λ™ν•©λ‹ˆλ‹€
  2. λͺ©λ‘-μ„ΈλΆ€ 사항 νŒ¨ν„΄μ΄ μ „ν™” λ„ˆλΉ„λ₯Ό μž…λ ₯ν•˜λ„λ‘ λΈŒλΌμš°μ €λ₯Ό μ’νž™λ‹ˆλ‹€.
  3. λͺ©λ‘μ—μ„œ ν•­λͺ©μ„ ν΄λ¦­ν•˜μ‹­μ‹œμ˜€
  4. λͺ©λ‘μ„ 숨기고 μ„ΈλΆ€ 정보λ₯Ό ν‘œμ‹œν•˜μ§€ μ•Šκ³  λͺ©λ‘ ν•­λͺ©μ„ 선택할 수 μžˆλŠ” 방법이 μ—†μŠ΅λ‹ˆλ‹€.

μ˜ˆμƒλ˜λŠ” 행동
λ‘˜ 쀑 ν•˜λ‚˜λ₯Ό ν•  수 μžˆλŠ” μ—¬μœ κ°€ ν•„μš”ν•©λ‹ˆλ‹€.

μŠ€ν¬λ¦°μƒ·

μ±„μ›Œμ§„ ν™”μ‚΄ν‘œ λ²„νŠΌ(iphone처럼)이 μœ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이것은 고정될 ν•„μš”κ°€ μ—†μ§€λ§Œ ν…œν”Œλ¦Ώμ— μΆ”κ°€ν•˜κ³  νŠΉλ³„ν•œ νƒ­ κ°€λŠ₯/클릭 κ°€λŠ₯ μ˜μ—­μœΌλ‘œ ν‘œμ‹œν•  수 μžˆλŠ” λ²„νŠΌμž…λ‹ˆλ‹€.

showdetails

μΆ”κ°€ μ»¨ν…μŠ€νŠΈ
여기에 λ¬Έμ œμ— λŒ€ν•œ λ‹€λ₯Έ μ»¨ν…μŠ€νŠΈλ₯Ό μΆ”κ°€ν•˜μ‹­μ‹œμ˜€.

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

@tmcconechy에 λ™μ˜ν•©λ‹ˆλ‹€. 클릭 κ°€λŠ₯ν•œ λΆ€λͺ¨μ— 클릭 κ°€λŠ₯ν•œ μžμ‹μ΄ μžˆλŠ” 문제λ₯Ό ν•΄κ²°ν•˜λ €λ©΄ 클릭을 λ‹€μŒκ³Ό 같이 λ³€κ²½ν•΄μ•Ό ν•©λ‹ˆλ‹€.
screen shot 2018-11-02 at 10 40 23 am
ν™•μΈλž€μ΄ μ—†μœΌλ©΄ 클릭 κ°€λŠ₯ν•œ μ˜μ—­μ΄ 전체 ν–‰μœΌλ‘œ ν™•μž₯λ©λ‹ˆλ‹€. ν™•μΈλž€μ„ μ‚¬μš©ν•˜λ©΄ μžμ—°μŠ€λŸ½κ²Œ 클릭 κ°€λŠ₯ν•œ μ˜μ—­μ„ λ°€μ–΄μ„œ ν™•μΈλž€μ„ "λ†“μΉ˜μ§€" μ•Šκ³  "λ“œλ¦΄λ‹€μš΄"을 ν΄λ¦­ν•˜κ²Œ λ©λ‹ˆλ‹€.

그런 λ‹€μŒ μ±„μ›Œμ§„ 원 캐럿 μ•„μ΄μ½˜μ„ μ‚¬μš©ν•˜λŠ” λŒ€μ‹  @kayiuho μ—μ„œ 기쑴의 일반 였λ₯Έμͺ½ 캐럿 > 을 기호둜 μ‚¬μš©ν•˜μ—¬ 였λ₯Έμͺ½μœΌλ‘œ "λ“œλ¦΄λ‹€μš΄"λ˜μ—ˆμŒμ„ ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

HTML은 λ‹€μŒκ³Ό 같을 수 μžˆμŠ΅λ‹ˆλ‹€.
html <div> <label> <input type="checkbox" /> Stuff </label> <a href=""> Drill down <i class="icon"></i> ....other stuff.... </a> </div>

λͺ¨λ“  8 λŒ“κΈ€

@theakatz @kayiuho 이 λ””μžμΈ/μ•„μ΄μ½˜μ— λŒ€ν•΄ μ–΄λ–»κ²Œ μƒκ°ν•˜μ„Έμš”?

ν•œ 가지 μ•„μ΄λ””μ–΄λŠ” 단일 선택에 μžˆλ”λΌλ„ 선택 ν™•μΈλž€μ„ ν‘œμ‹œν•˜λ„λ‘ ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.
그리고 μ²΄ν¬λ°•μŠ€λ₯Ό ν΄λ¦­ν•˜λ©΄ λ“œλ¦΄λ˜λŠ” 문제λ₯Ό μˆ˜μ •ν•©λ‹ˆλ‹€. (ν™•μΈλž€ 클릭 μ‹œ λ“œλ¦΄ κ±΄λ„ˆλ›°κΈ°)

@tmcconechy에 λ™μ˜ν•©λ‹ˆλ‹€. 클릭 κ°€λŠ₯ν•œ λΆ€λͺ¨μ— 클릭 κ°€λŠ₯ν•œ μžμ‹μ΄ μžˆλŠ” 문제λ₯Ό ν•΄κ²°ν•˜λ €λ©΄ 클릭을 λ‹€μŒκ³Ό 같이 λ³€κ²½ν•΄μ•Ό ν•©λ‹ˆλ‹€.
screen shot 2018-11-02 at 10 40 23 am
ν™•μΈλž€μ΄ μ—†μœΌλ©΄ 클릭 κ°€λŠ₯ν•œ μ˜μ—­μ΄ 전체 ν–‰μœΌλ‘œ ν™•μž₯λ©λ‹ˆλ‹€. ν™•μΈλž€μ„ μ‚¬μš©ν•˜λ©΄ μžμ—°μŠ€λŸ½κ²Œ 클릭 κ°€λŠ₯ν•œ μ˜μ—­μ„ λ°€μ–΄μ„œ ν™•μΈλž€μ„ "λ†“μΉ˜μ§€" μ•Šκ³  "λ“œλ¦΄λ‹€μš΄"을 ν΄λ¦­ν•˜κ²Œ λ©λ‹ˆλ‹€.

그런 λ‹€μŒ μ±„μ›Œμ§„ 원 캐럿 μ•„μ΄μ½˜μ„ μ‚¬μš©ν•˜λŠ” λŒ€μ‹  @kayiuho μ—μ„œ 기쑴의 일반 였λ₯Έμͺ½ 캐럿 > 을 기호둜 μ‚¬μš©ν•˜μ—¬ 였λ₯Έμͺ½μœΌλ‘œ "λ“œλ¦΄λ‹€μš΄"λ˜μ—ˆμŒμ„ ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

HTML은 λ‹€μŒκ³Ό 같을 수 μžˆμŠ΅λ‹ˆλ‹€.
html <div> <label> <input type="checkbox" /> Stuff </label> <a href=""> Drill down <i class="icon"></i> ....other stuff.... </a> </div>

ν™”μ‚΄ν‘œ λ²„νŠΌμ΄ ν•„μš”ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— 정말 쒋은 것 κ°™μŠ΅λ‹ˆλ‹€. 그리고 ν™•μΈλž€μ„ μœ μ§€ν•΄λ„ ν™”μ‚΄ν‘œ λ²„νŠΌμ— ν•„μš”ν•œ 것보닀 더 λ§Žμ€ μˆ˜ν‰ 곡간을 μ°¨μ§€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

λ‹€λ₯Έ μ•„μ΄μ½˜μ„ λ„μž…ν•˜μ§€ μ•Šκ³  이 μž‘μ—…μ„ μˆ˜ν–‰ν•  수 μžˆλŠ”μ§€ ν™•μΈν•˜κ³  μ‹Άμ—ˆμŠ΅λ‹ˆλ‹€. λ“œλ¦΄μ— ν—ˆμš©λœ λŒ€μƒ μ˜μ—­μ— λΉ„ν•΄ 선택 μ˜μ—­μ— λŒ€ν•΄ 더 μ˜λ„μ μ΄λΌλ©΄ 캐럿 μ•„μ΄μ½˜μ΄ μ •λ§λ‘œ ν•„μš”ν•©λ‹ˆκΉŒ? μ‚¬μš©μžκ°€ μ‹€μˆ˜λ‘œ ν™•μΈλž€μ„ ν΄λ¦­ν•˜μ—¬ λ“œλ¦΄ν•˜λŠ”μ§€ λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€. μ§ˆλ¬Έμ€ μ‚¬μš©μžκ°€ λͺ…μ‹œμ μΈ 캐럿 μ•„μ΄μ½˜μ΄ ν‘œμ‹œλ˜μ§€ μ•ŠλŠ” 경우 λ“œλ¦΄ν•  수 μžˆλŠ”μ§€ 여뢀에 λŒ€ν•΄ ν˜Όλž€μŠ€λŸ¬μ›Œν•  κ²ƒμž…λ‹ˆλ‹€.

@jamie-norman , μƒˆ μ•„μ΄μ½˜μ„ μΆ”κ°€ν•˜κ³  싢지 μ•Šκ±°λ‚˜ UI에 λ‹€λ₯Έ μ•„μ΄μ½˜μ„ μΆ”κ°€ν•˜κ³  싢지 μ•Šλ‹€λŠ” λœ»μž…λ‹ˆκΉŒ? λ‚΄ λͺ©ν‘œλŠ” 일반 캐럿(덜 λ²„νŠΌμ‹)을 μ‚¬μš©ν•˜μ—¬ λ“œλ¦΄λ‹€μš΄ν•  수 μžˆμŒμ„ 보여 μ£ΌλŠ” κ²ƒμ΄μ—ˆμŠ΅λ‹ˆλ‹€. κ·€ν•˜κ°€ μ˜³μ•˜λ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. κ°„νŒ 없이 λ“œλ¦΄λ‹€μš΄λœλ‹€λŠ” 것을 그듀은 λͺ¨λ₯Ό 것이라고 μƒκ°ν•©λ‹ˆλ‹€.

@clepore μ£„μ†‘ν•©λ‹ˆλ‹€. λͺ…ν™•ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. UI에 λ‹€λ₯Έ μ•„μ΄μ½˜μ„ μΆ”κ°€ν•˜μ§€ μ•ŠλŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. @kayiuho μ—κ²Œ 그것에 λŒ€ν•΄ μ΄μ•ΌκΈ°ν–ˆκ³  κ·Έλ…€λŠ” μ˜¬λ°”λ₯Έ 캐럿 μ•„μ΄μ½˜μ΄ 도움이 될 것이라고 μƒκ°ν•©λ‹ˆλ‹€. 였늘 μ˜€ν›„μ— Tim의 μˆ˜μ • 사항을 λ³΄μ•˜μœΌλ―€λ‘œ 캐럿 μ•„μ΄μ½˜μ„ μΆ”κ°€ν•˜μ§€ μ•Šκ³ λ„ _아직도 μ’‹μŠ΅λ‹ˆλ‹€. λΉΌλŠ”κ²ƒλ³΄λ‹€ λ„£λŠ”κ²Œ 더 μ‰½λ„€μš” 😜

덜 μΌν•˜κ³  λ‚˜λ₯Ό μœ„ν•΄ μΌν•©λ‹ˆλ‹€ πŸ‘

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰