Web - LinkStyleSelectCard (Deprecated in 1.4)

정의

LinkStyleSelectCard

최적화 대상

Desktop

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

width

• 2단 배치
  (카드 사이 간격 24px)

icon

• 기본 링크 타이틀 앞

  • size : 20

  • iconName : ic_pin

  • fillType : fill

• 커스텀 링크 타이틀 앞

  • size : 20

  • iconName : ic_links

  • fillType : line

• 신규 링크 생성 (+)

  • size : 24

  • iconName : ic_plus

  • fillType : line

text

TextLabel 참고

• titleText

  • styleTheme : body1Bold

  • ellipsisMode : use

  • lineLimit : 1

• caption1Text

  • styleTheme : caption1Bold

• caption2Text

  • styleTheme : body2Regular

iBtn

IconButton 참고

• 생성된 링크 우측 버튼

  • fillType : fill

  • baseSize : small

  • iconSize : 20

  • shapeType : rectangle

divider

• direction : horizontal

base

radius : 16px

shadow

• 기본 상태 : elevation-2

• 선택 시 : ui_cpnt_card_shadow, x:0, y:3, blur:12

icon color

• 기본 링크

  • ui_cpnt_card_icon_basic

• 커스텀 링크

  • ui_cpnt_card_icon_custom

• 새로 생성

  • ui_cpnt_card_icon_create

Text

TextLabel

• titleText

  • 기본 링크

    • colorTheme : usrTextBrandPrimary

  • 커스텀 링크

    • colorTheme : sysTextPrimary

• captionTitleText

  • colorTheme : sysTextTertiary

• captionText

  • colorTheme : sysTextPrimary

IconButton

iconColorKey : ui_cpnt_button_icon_default

baseColorKey : ui_cpnt_button_fill_base_transparent

divider color

Divider 내 Color Key 참고

base color

ui_cpnt_card_base

shadow

Contents Layer에 소속, elevation-2를 적용합니다.

linkType

카드 타입을 결정합니다.

enum

basic

basicIconName

링크 타입이 basic일 때, 아이콘 이름을 결정합니다.

enum

ic_xxx

basicTitleText

링크 타입이 basic일 때, 주요 텍스트입니다.

*1줄 이상 말줄임표 처리

String

basicCaption1TitleText

링크 타입이 basic일 때, 1번째 링크 정보에 대한 값 중 타이틀 부분입니다.

String

basicCaption1Text

링크 타입이 basic일 때, 1번째 링크 정보에 대한 값 상세 내용입니다.

String

basicCaption2TitleText

링크 타입이 basic일 때, 2번째 링크 정보에 대한 값 중 타이틀 부분입니다.

String

basicCaption2Text

링크 타입이 basic일 때, 2번째 링크 정보에 대한 값 상세 내용입니다.

String

basicCaption3TitleText

링크 타입이 basic일 때, 3번째 링크 정보에 대한 값 중 타이틀 부분입니다.

String

basicCaption3Text

링크 타입이 basic일 때, 3번째 링크 정보에 대한 값 상세 내용입니다.

String

basicIBtn1IconName

링크 타입이 basic일 때, 타이틀 우측에 있는 3개의 버튼 중 좌측에서 1번 아이콘 이름을 결정합니다.

enum

ic_xxx

basicIBtn2IconName

링크 타입이 basic일 때, 타이틀 우측에 있는 3개의 버튼 중 좌측에서 2번 아이콘 이름을 결정합니다.

enum

ic_xxx

basicIBtn3IconName

링크 타입이 basic일 때, 타이틀 우측에 있는 3개의 버튼 중 좌측에서 3번 아이콘 이름을 결정합니다.

enum

ic_xxx

customIconName

링크 타입이 custom일 때, 아이콘 이름을 결정합니다.

enum

ic_xxx

customTitleText

링크 타입이 custom일 때, 주요 텍스트입니다.

*1줄 이상 말줄임표 처리

String

customCaption1TitleText

링크 타입이 custom일 때, 1번째 링크 정보에 대한 값 중 타이틀 부분입니다.

String

customCaption1Text

링크 타입이 custom일 때, 1번째 링크 정보에 대한 값 상세 내용입니다.

String

customCaption2TitleText

링크 타입이 custom일 때, 2번째 링크 정보에 대한 값 중 타이틀 부분입니다.

String

customCaption2Text

링크 타입이 custom일 때, 2번째 링크 정보에 대한 값 상세 내용입니다.

String

customCaption3TitleText

링크 타입이 custom일 때, 3번째 링크 정보에 대한 값 중 타이틀 부분입니다.

String

customCaption3Text

링크 타입이 custom일 때, 3번째 링크 정보에 대한 값 상세 내용입니다.

String

customIBtn1IconName

링크 타입이 custom일 때, 타이틀 우측에 있는 3개의 버튼 중 좌측에서 1번 아이콘 이름을 결정합니다.

enum

ic_xxx

customIBtn1IconFillType

링크 타입이 custom일 때, 타이틀 우측에 있는 3개의 버튼 중 좌측에서 1번 아이콘 형태를 결정합니다.

enum

line

customIBtn2IconName

링크 타입이 custom일 때, 타이틀 우측에 있는 3개의 버튼 중 좌측에서 2번 아이콘 이름을 결정합니다.

enum

ic_xxx

customIBtn2IconFillType

링크 타입이 custom일 때, 타이틀 우측에 있는 3개의 버튼 중 좌측에서 2번 아이콘 형태를 결정합니다.

enum

line

customIBtn3IconName

링크 타입이 custom일 때, 타이틀 우측에 있는 3개의 버튼 중 좌측에서 3번 아이콘 이름을 결정합니다.

enum

ic_xxx

customIBtn3IconFillType

링크 타입이 custom일 때, 타이틀 우측에 있는 3개의 버튼 중 좌측에서 3번 아이콘 형태를 결정합니다.

enum

line

linkType

basic

기본 링크 카드입니다.

custom

커스텀 링크 카드입니다.

create

새로 추가할 수 있는 링크 카드입니다.

basicIconName

ic_xxx

basicTitleText

basicCaption1TitleText

basicCaption1Text

basicCaption2TitleText

basicCaption2Text

basicCaption3TitleText

basicCaption3Text

basicIBtn1IconName

ic_xxx

basicIBtn2IconName

ic_xxx

basicIBtn3IconName

ic_xxx

customIconName

customTitleText

customCaption1TitleText

customCaption1Text

customCaption2TitleText

customCaption2Text

customCaption3TitleText

customCaption3Text

customIBtn1IconName

ic_xxx

customIBtn1IconFillType

line

fill

customIBtn2IconName

ic_xxx

customIBtn2IconFillType

line

fill

customIBtn3IconName

ic_xxx

customIBtn3IconFillType

line

fill

김혜진

• 2021/11/18 : text 스펙 ellipsisMode, lineLimit 추가 - 김혜진

• 2021/11/17 : style을 styleTheme로 수정, 카드 선택시 그림자 컬러값 추가 - 김혜진

• 2021/11/16 : 아이콘 버튼에 대한 spec, prop 추가 - 김혜진

• 2021/11/03 : 내용 업데이트 - 김혜진

• 2021/11/02 : 최초 문서 작성 - 김혜진