Enterprise: μƒˆλ‘œμš΄ μ—…λ¦¬ν”„νŠΈ 빈 μƒνƒœ

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

κΈ°λŠ₯ μš”μ²­μ΄ λ¬Έμ œμ™€ κ΄€λ ¨λ˜μ–΄ μžˆμŠ΅λ‹ˆκΉŒ?
우리의 κ³ μ–‘ ν…Œλ§ˆμ™€ ν•¨κ»˜ ν•˜λ €λ©΄ κ³ μ–‘λœ 빈 μƒνƒœκ°€ ν•„μš”ν•©λ‹ˆλ‹€.

μ›ν•˜λŠ” μ†”λ£¨μ…˜ μ„€λͺ…
uplift ν…Œλ§ˆμ— 맞게 빈 μƒνƒœμ˜ 헀더, μœ ν˜•, μ•„μ΄μ½˜ 및 μΌλŸ¬μŠ€νŠΈλ ˆμ΄μ…˜μ„ μ—…λ°μ΄νŠΈν•΄ λ³΄κ² μŠ΅λ‹ˆλ‹€.

κ³ λ €ν•œ λŒ€μ•ˆμ„ κΈ°μˆ ν•˜μ‹­μ‹œμ˜€.
μš°λ¦¬κ°€ κ²°μ •ν•΄μ•Ό ν•˜λŠ” 잠재적으둜 μ‚¬μš©ν•  수 μžˆλŠ” 두 가지 λ²„νŠΌ μŠ€νƒ€μΌμ΄ μžˆμ§€λ§Œ κ΅¬ν˜„ 방법에 λŒ€ν•œ λŒ€ν™”λ₯Ό μ‹œμž‘ν•˜κ² μŠ΅λ‹ˆλ‹€.

μΆ”κ°€ μ»¨ν…μŠ€νŠΈ
https://tasks.office.com/InforOnline.onmicrosoft.com/en-us/Home/Task/E6r20AcIQUSsqmgoIFHoJGQAMfdh?Type=TaskLink&Channel=Link&CreatedTime=637066764449100000

Screenshot 2019-10-14 15 44 38

image

[3] type type

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

@kevinwhitedesign

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

@kevinwhitedesign

@elizabethhartley λ‚˜λŠ” Planner μž‘μ—…μ„ κ²€ν† ν–ˆκ³  μš°λ¦¬κ°€ ν•΄κ²°ν•  수 μžˆλŠ” λͺ‡ 가지 글머리 기호λ₯Ό λ³΄μ•˜μŠ΅λ‹ˆλ‹€.

Timμ—κ²Œ 후속 쑰치λ₯Ό μ·¨ν•˜κ³  기쑴의 빈 μƒνƒœ κ·Έλž˜ν”½ 및 예제λ₯Ό κ΅μ²΄ν•©λ‹ˆλ‹€.

IDS EnterpriseλŠ” μ‹€μ œλ‘œ λ””μžμΈ μ‹œμŠ€ν…œ μ €μž₯μ†Œμ—μ„œ μ•„μ΄μ½˜μ„ κ°€μ Έμ˜€λ―€λ‘œ μ—¬κΈ°μ„œ 문제λ₯Ό μ—΄μ–΄μ•Ό ν•©λ‹ˆλ‹€. λͺ¨λ“  μ˜¬λ°”λ₯Έ 치수/λ“±μ—μ„œ SVG둜 μΆ”μΆœν•˜λŠ” μžλ™ν™”λœ ν”„λ‘œμ„ΈμŠ€μ™€ κ²°ν•©λœ Soho ν…Œλ§ˆμ˜ 빈 μƒνƒœ μ•„μ΄μ½˜μ— λŒ€ν•œ μŠ€μΌ€μΉ˜ 파일 이 μžˆμŠ΅λ‹ˆλ‹€. μ—¬λŸ¬λΆ„μ΄ Soho용 μŠ€μΌ€μΉ˜ νŒŒμΌμ„ λͺ¨λ°©ν•œ Uplifted μžμ‚°μš© μŠ€μΌ€μΉ˜ νŒŒμΌμ„ λ§Œλ“€ 수 μžˆλ‹€λ©΄ μžλ™ν™” μ‹œμŠ€ν…œμ— μ—°κ²°ν•˜μ—¬ μž‘λ™ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이 μ•„μ΄μ½˜μ„ IDS μƒ‰μƒμœΌλ‘œ ν…Œλ§ˆν™”ν•  수 μžˆλŠ” 방법이 μžˆλŠ”μ§€ ν™•μΈν•˜μ‹­μ‹œμ˜€.

일반적으둜 μ•„μ΄μ½˜μ— κ°œμΈν™”λ₯Ό μ‚¬μš©ν•˜λŠ” 데 λͺ‡ 가지 λ¬Έμ œκ°€ μžˆμ—ˆλ˜ κ²ƒμœΌλ‘œ κΈ°μ–΅ν•©λ‹ˆλ‹€. @tmcconechy , μ •ν™•νžˆ μ™œ κ·Έλž¬λŠ”μ§€ λ‹€μ‹œ μ‚΄νŽ΄λ΄μ•Ό ν•©λ‹ˆλ‹€.

κ°œμΈν™”λŠ” ν•  수 μžˆλ‹€κ³  μƒκ°ν•˜μ§€λ§Œ κΈ°λ³Έ 색상은 ν•˜λ‚˜λ§Œ κ°€λŠ₯ν•©λ‹ˆλ‹€. 이제 ꡬ성 μš”μ†Œμ˜ μ„€μ •μœΌλ‘œ μž‘λ™ν•©λ‹ˆλ‹€. 더 λ§Žμ€ 톡합이 ν•„μš”ν•  수 μžˆμŠ΅λ‹ˆλ‹€. https://github.com/infor-design/enterprise/blob/master/src/components/emptymessage/emptymessage.js#L18

이것을 κ΅¬ν˜„ν•˜λ €λ©΄ μŠ€μΌ€μΉ˜ νŒŒμΌμ„ 가져와 μ•„μ΄μ½˜μ„ 두 개의 별도 νŒŒμΌμ— 생성해야 ν•  κ²ƒμž…λ‹ˆλ‹€. λ”°λΌμ„œ 이것은 μ•„λ§ˆλ„ λ””μžμΈ μ‹œμŠ€ν…œ λ¦¬ν¬μ§€ν† λ¦¬μ˜ μŠ€μΌ€μΉ˜ 파일과 생성 슀크립트λ₯Ό μ—…λ°μ΄νŠΈν•˜λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€.

@EdwardCoyle μ—… λ¦¬ν”„νŠΈ μΌλŸ¬μŠ€νŠΈμ™€ μ†Œν˜Έ 일러슀트의 크기가 λ‹€λ₯΄λ©΄ 큰 λ¬Έμ œκ°€ 될 것 κ°™μ€λ°μš”?

μƒˆ μžμ‚°μ€ μ–Όλ§ˆλ‚˜ ν¬κ±°λ‚˜ μž‘μŠ΅λ‹ˆκΉŒ? 크기에 μ•½κ°„μ˜ 차이가 μžˆμ–΄λ„ μ΄λŸ¬ν•œ μ•„μ΄μ½˜μ˜ μ‚¬μš©μ€ 일반적으둜 큰 "빈" 곡간에 있기 λ•Œλ¬Έμ— λ¬Έμ œκ°€ λ˜μ§€ μ•Šμ„ 것이라고 μƒκ°ν•©λ‹ˆλ‹€.

@elizabethhartley μŠ€μΌ€μΉ˜ νŒŒμΌμ„ κ΅¬μ„±ν•˜λŠ” ν•œ IIRC μ•„μ΄μ½˜ λŒ€μ§€μ˜ ν¬κΈ°λŠ” λŒ€μ§€μ˜ λͺ…λͺ… κ·œμΉ™μ„ 두 ν…Œλ§ˆ 간에 μΌκ΄€λ˜κ²Œ μœ μ§€ν•˜λŠ” κ²ƒλ§ŒνΌ μ€‘μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μš°λ¦¬λŠ” ꡬ성 μš”μ†Œμ—μ„œ SVG둜 μž‘μ—…ν•˜κ³  μžˆμœΌλ―€λ‘œ λ‚˜μ€‘μ— 크기 쑰정을 ν•΄μ•Ό ν•˜λŠ” 경우 κ±°κΈ°μ—μ„œ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ—„μ²­λ‚œ! μ†Œν˜Έ μ•„μ΄μ½˜λ³΄λ‹€ ν¬μ§€λ§Œ μœ ν˜• 계측 ꡬ쑰도 λ³€κ²½ν•˜λŠ” 데 관심이 있기 λ•Œλ¬Έμž…λ‹ˆλ‹€. 이름을 1:1둜 μ§€μ •ν•˜κ² μŠ΅λ‹ˆλ‹€.

예, 이름이 λ™μΌν•˜κ³  μƒˆ μ•„μ΄μ½˜μ΄ μžˆλŠ”μ§€ ν™•μΈν•˜λŠ” 것은 μƒˆλ‘œμš΄ 경우 μ†Œν˜Έ 및 μ—…λ¦¬ν”„νŠΈ ν…Œλ§ˆ λͺ¨λ‘μ— μžˆμŠ΅λ‹ˆλ‹€. 더 μ€‘μš”ν•©λ‹ˆλ‹€. μ›ν•˜λŠ” 경우 λ™μΌν•œ 크기둜 μœ μ§€ν•  μˆ˜λ„ 있고 그렇지 μ•Šμ„ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. μš°λ¦¬λŠ” 항상 CSS둜 크기λ₯Ό μ‘°μ •ν•  수 있으며 각 ν…Œλ§ˆμ—μ„œ λ‹€λ₯΄κ²Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

κ²€ν† λ₯Ό μœ„ν•΄ 파일둜 PR을 ν•΄μ•Ό ν•©λ‹ˆκΉŒ?

λ¬Όλ‘  λ””μžμΈ μ‹œμŠ€ν…œμœΌλ‘œ 홍보λ₯Όν•˜κ³  μš°λ¦¬κ°€ ν…ŒμŠ€νŠΈ ν•  수 μžˆμŠ΅λ‹ˆλ‹€ 그것은 https://github.com/infor-design/design-system/pulls λ‚΄κ°€ 가지고 슀크립트 쀑 μΌλΆ€λŠ” μˆ˜μ •μ΄ ν•„μš”ν•˜κ³  우리뿐만 μ•„λ‹ˆλΌ μ½”λ“œμ˜ λ³€ν™” μˆ˜λ„ λŠλ‚Œ 빈 λ©”μ‹œμ§€μ— λŒ€ν•΄ μ§€κΈˆκΉŒμ§€ λ‘˜ λ‹€μ—μ„œ λ™μΌν•œ μ•„μ΄μ½˜μ„ μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€.

http://master-enterprise.demo.design.infor.com/components/emptymessage/example-index.html?theme=uplift&variant=light&colors=0563C2
http://master-enterprise.demo.design.infor.com/components/emptymessage/example-widgets.html?theme=uplift&variant=light&colors=0563C2
λͺ¨λ“  λΈŒλΌμš°μ €μ—μ„œ QAλ₯Ό ν†΅κ³Όν–ˆμœΌλ©° 이제 Uplift 빈 μƒνƒœ μ•„μ΄μ½˜μ΄ μ—…λ°μ΄νŠΈλ©λ‹ˆλ‹€.
image

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