Chip 구현 #27
Chip 구현 #27
Conversation
|
|
compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
Outdated
Show resolved
Hide resolved
| Text( | ||
| text = if (text.length < 10) text else text.take(9) + "...", | ||
| color = textColor, | ||
| fontSize = 14.dp, | ||
| style = textStyle | ||
| ) |
There was a problem hiding this comment.
| Text( | |
| text = if (text.length < 10) text else text.take(9) + "...", | |
| color = textColor, | |
| fontSize = 14.dp, | |
| style = textStyle | |
| ) | |
| Text( | |
| text = text, | |
| color = textColor, | |
| style = textStyle, | |
| maxLines = 1, // 최대 1줄 | |
| overflow = TextOverflow.Ellipsis // 길이 초과 시 말줄임표로 | |
| ) |
maxLines , overflow 속성 활용 시 text = if (text.length < 10) text else text.take(9) + "...", 처럼 직접 구현하실 필요없습니다!
이미 textStyle로 typo를 적용하셨어서 fontsize를 굳이 한번 더 적용하실 필요 없어요
HandyTextStyle 들어가보시면 이미 적용되어있습니다!
There was a problem hiding this comment.
overflow는 Modifier나 부모 layout 같은 배치 공간의 크기를 넘어설 때 말 줄임표 처리하는 것으로 알고 있는데
Figma의 Spec에는
Chip 하나당 최대 글자 수 10자 이내(공백 포함)로 제한됩니다. 최대 글자 수를 넘을 시 말줄임표 처리됩니다.
로 작성되어 있습니다.
Typography와 TextOverflow를 찾아봤는데 이 부분을 TextOverflow를 이용해서 처리해주는 부분을 발견하지 못 했습니다!
혹시 글자수에 따른 말줄임표 기능이 TextOverflow에 있는지 알려주시면 감사하겠습니다!
오 이건 저도 몰랐네요 꿀팁 감사합니다 |
feat: Chip 구현 feat: Chip 구현 feat: Chip 구현 feat: Chip 구현
minjun011026
force-pushed
the
feature/teach/chip
branch
from
50874b4 to
04100d8
Compare
There was a problem hiding this comment.
앗 SearchBar를 만들어야 하는 줄 알고 만들었던 건데 같이 올려버렸네요
|
커밋 메시지를 좀 더 상세히 적어주시면 좋을 것 같아요! |
Summary
Chip 구현입니다.
Figma의 요구사항을 기반으로 구현하였습니다.
추가적으로 leadingIcon의 기본값은 InfoCircle, trailingIcon의 기본값은 Close로 설정하였고
각 Icon과 Icon의 onClick은 nullable처리를 하여 선택적으로 사용하도록 구현하였습니다.
Describe your changes