Material-ui: [ListItem] primaryText์— ๋Œ€ํ•œ ์˜ค๋ฒ„ํ”Œ๋กœ

์— ๋งŒ๋“  2016๋…„ 07์›” 13์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mui-org/material-ui

๋ฌธ์ œ ์„ค๋ช…

ListItem ์™€ ๊ตฌ์„ฑ ์š”์†Œ primaryText ๊ทธ๊ฒƒ์˜ ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์˜ค๋ฒ„ํ”Œ๋กœ. secondaryText ์™€ ๋‹ฌ๋ฆฌ ์˜ค๋ฒ„ํ”Œ๋กœ ์ „์— ์ค„ ์ˆ˜๋ฅผ ์„ค์ •ํ•˜๋Š” ์˜ต์…˜์ด ์—†์œผ๋ฉฐ ๊ธฐ๋ณธ์ ์œผ๋กœ ์˜ค๋ฒ„ํ”Œ๋กœ ๋™์ž‘์ด ์—†์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์˜ _possible_๊ฐ€ ๋Œ€์ƒ์œผ๋กœ ์ƒ๊ฐ div ํ…์ŠคํŠธ๊ฐ€ ์„ค์ •ํ•˜์—ฌ ๋ Œ๋”๋ง๋˜๋Š”์ด className (๊ฐ€)์— ListItem , ๋‹ค์Œ ์ฒซ ๋ฒˆ์งธ ์ž์‹ DIV์˜ ๋‘ ๋ฒˆ์งธ DIV๋ฅผ ๋ฐœ๊ฒฌ,ํ•˜์ง€๋งŒ ๊ทธ ์˜ค๋ฅ˜ - ๋ณด์ธ๋‹ค ์ƒ์„ฑ๋œ HTML์— ์˜์กดํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค.

์žฌํ˜„ ๋‹จ๊ณ„

  1. ListItem ์•ˆ์— List ๋ฅผ ๋งŒ๋“ค๊ณ  primaryText ๋ฅผ ์˜ค๋ฒ„ํ”Œ๋กœ๋ฅผ ์ผ์œผํ‚ฌ ๋งŒํผ ๊ธด ๋ฌธ์ž์—ด๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  2. ํ…์ŠคํŠธ๊ฐ€ ๋ชฉ๋ก์˜ ๋์„ ๋„˜์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

    ๋ฒ„์ „

  • ์žฌ์งˆ UI: 0.15.2
  • ๋ฐ˜์‘: 15.2.0
  • ๋ธŒ๋ผ์šฐ์ €: ์‚ฌํŒŒ๋ฆฌ 10

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” ์ด๊ฒƒ์ด ์˜ค๋ž˜๋˜์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ 2 ์„ผํŠธ๋ฅผ ๋˜์ง€๊ธฐ ์œ„ํ•ด ... ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ธฐ๋ณธ ํ…์ŠคํŠธ๊ฐ€ ์˜ค๋ฒ„ํ”Œ๋กœ์— ์ค„์ž„ํ‘œ๋ฅผ ํ‘œ์‹œํ•˜๋„๋กํ•˜์ง€ ์•Š๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋ฌผ๋ก  primaryText๊ฐ€ ๋„ˆ๋ฌด ๊ธธ์–ด์„œ ์˜ค๋ฒ„ํ”Œ๋กœ๋˜์–ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ๋ ‡๋‹ค๋ฉด ๋„˜์น˜๊ณ  ๊นจ์ ธ ๋ณด์ด๋Š” ๋Œ€์‹  ์ค„์ž„ํ‘œ๋ฅผ ํ‘œ์‹œํ•ด์•ผ ํ•˜์ง€ ์•Š์„๊นŒ์š”? ์˜ค๋ฒ„ํ”Œ๋กœ์— ์˜์กดํ•˜๋Š” ๋‹ค๋ฅธ ๊ฒƒ์ด ์—†๋Š” ํ•œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋ฅผ ๊ตฌํ˜„ํ•˜์ง€ ์•Š์„ ์ด์œ ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

@finaiized ์ œ ์ƒ๊ฐ์—๋Š” primaryText ๋Š” ์ œ๋ชฉ์„ ์˜๋ฏธํ•˜๊ณ  secondaryText ๋Š” ์„ค๋ช…์„ ์˜๋ฏธํ•˜๋ฏ€๋กœ ํ˜•์‹์ด ๊ทธ๋Œ€๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค. ํ…์ŠคํŠธ๋Š” ๋„˜์น  ์ •๋„๋กœ ๊ธธ์–ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด overflow : hidden ์˜ค๋ฒ„ ํ”Œ๋กœ์šฐ๋ฅผ ๋ฐฉ์ง€ ๋‹ค๋ฅธ ์Šคํƒ€์ผ๊ณผ ํ•จ๊ป˜ ์Šคํƒ€์ผ์ด ์•„๋‹ˆ๋ผ ๊ทธ๋ƒฅ ๊ทธ ๋“ฑ primaryText ์Šคํƒ€์ผ์„ ๋ถ€์—ฌ ํ•  ์ˆ˜ secondaryText ์™€ ํ™๋ณด๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@finaiized ์ด์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์ด ๊ฒŒ์‹œ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ primaryText ๋Š” ๋„ˆ๋ฌด ๊ธธ์–ด์„œ ํ…์ŠคํŠธ ์ค„ ๋ฐ”๊ฟˆ์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์•„์•ผ ํ•˜๋ฉฐ MUI ํ”„๋กœ์ ํŠธ์—์„œ ์ด๊ฒƒ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋„์›€์ด ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค! ๐Ÿ˜„

๋‚˜๋Š” ์ด๊ฒƒ์ด ์˜ค๋ž˜๋˜์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ 2 ์„ผํŠธ๋ฅผ ๋˜์ง€๊ธฐ ์œ„ํ•ด ... ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ธฐ๋ณธ ํ…์ŠคํŠธ๊ฐ€ ์˜ค๋ฒ„ํ”Œ๋กœ์— ์ค„์ž„ํ‘œ๋ฅผ ํ‘œ์‹œํ•˜๋„๋กํ•˜์ง€ ์•Š๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋ฌผ๋ก  primaryText๊ฐ€ ๋„ˆ๋ฌด ๊ธธ์–ด์„œ ์˜ค๋ฒ„ํ”Œ๋กœ๋˜์–ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ๋ ‡๋‹ค๋ฉด ๋„˜์น˜๊ณ  ๊นจ์ ธ ๋ณด์ด๋Š” ๋Œ€์‹  ์ค„์ž„ํ‘œ๋ฅผ ํ‘œ์‹œํ•ด์•ผ ํ•˜์ง€ ์•Š์„๊นŒ์š”? ์˜ค๋ฒ„ํ”Œ๋กœ์— ์˜์กดํ•˜๋Š” ๋‹ค๋ฅธ ๊ฒƒ์ด ์—†๋Š” ํ•œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋ฅผ ๊ตฌํ˜„ํ•˜์ง€ ์•Š์„ ์ด์œ ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

FranBran picture FranBran  ยท  3์ฝ”๋ฉ˜ํŠธ

sys13 picture sys13  ยท  3์ฝ”๋ฉ˜ํŠธ

mb-copart picture mb-copart  ยท  3์ฝ”๋ฉ˜ํŠธ

joewalker picture joewalker  ยท  3์ฝ”๋ฉ˜ํŠธ

reflog picture reflog  ยท  3์ฝ”๋ฉ˜ํŠธ