카드 뷰 버튼에 대한 색상 변수 지원

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 소요 시간: 1분

    • 색상 변수를 사용하여 모바일 카드 뷰 버튼의 테마를 변경하는 방법에 대해 알아봅니다.

    카드 템플릿 요소 속성의 색상 변수를 사용하여 모바일 카드의 아이콘 버튼에 대한 색상 값을 제어합니다.

    다음과 같은 색상 변수를 사용할 수 있습니다.
    • BackgroundColorVariable (배경 색상 변수)
    • BorderColorVariable
    • TextColorVariable

    이러한 속성에 대한 자세한 내용은 다음 문서를 참조하십시오 카드 템플릿 요소 속성.

    		 카드 뷰 템플릿 요소에 사용되는 색상 변수

    버튼 스타일 가이드

    색상 예 변수
    기본 기본 버튼 예
    백그라운드

    모바일 변수: 기본

    웹 변수: now-color--primary-1

    텍스트

    모바일 변수: 텍스트 작업 가능

    웹 변수: now-color_text--primary-actionable
    보조 보조 버튼 예
    백그라운드

    모바일 변수: 배경 기본

    웹 변수: now-color_background--primary

    텍스트

    모바일 변수: 기본

    웹 변수: now-color--primary-1

    테두리(2px)

    모바일 변수: 기본

    웹 변수: now-color--primary-1
    긍정적 양수 버튼 예
    백그라운드

    모바일 변수: 양수

    웹 변수: now-color_alert--positive-3

    텍스트

    모바일 변수: 텍스트 작업 가능

    웹 변수: now-color_text--primary-actionable
    소거식 파괴적인 단추 예
    백그라운드

    모바일 변수: 파괴

    웹 변수: now-color_alert--critical-3

    텍스트

    모바일 변수: 텍스트 작업 가능

    웹 변수: now-color_text--primary-actionable
    기본 기본 버튼 예제
    백그라운드

    모바일 변수: 기본/양수/파괴

    웹 변수: now-color--primary-1/

    now-color_alert--긍정적-3/

    now-color_alert--critical-3

    텍스트

    모바일 변수: 텍스트 작업 가능

    웹 변수: now-color_text--primary-actionable

    주:
    이 버튼은 원색, 긍정적 또는 파괴적인 색으로 구성할 수 있습니다.
    사용 안 함 비활성화된 버튼 예

    오프라인 상태에서 작업을 사용할 수 없는 경우 이 스타일을 사용합니다.

    모든 스타일(기본, 보조, 텍스트/아이콘)과 함께 사용할 수 있습니다.