장소 UI 키트 맞춤 스타일 지정

Places UI Kit은 표시 요소를 구성하기 위한 다양한 설정과 맞춤 CSS 속성을 지원합니다. 아래의 맞춤설정 도구 및 CSS 속성 참조 표를 사용하여 이러한 속성을 UI 키트에 적용하는 방법을 확인하세요.

장소 UI 키트 요소에 매핑된 CSS 속성

Places UI Kit은 Material Design을 대략적으로 기반으로 하는 시각적 맞춤설정에 디자인 시스템 접근 방식을 제공합니다 (일부 Google 지도 전용 수정사항 포함). 색상 및 서체에 관한 Material Design 참조를 확인하세요. 기본적으로 스타일은 Google 지도 시각적 디자인 언어를 따릅니다.

맞춤설정 도구

이 도구를 사용하여 장소 UI 키트 요소의 맞춤 구성을 시각화합니다.

CSS 속성

속성 세부정보 컴팩트 요소 세부정보 요소 사용
색상 (시스템)
--gmp-mat-color-surface ✔ ✔ 컨테이너 및 대화상자 배경
--gmp-mat-color-on-surface ✔ ✔ 제목, 대화상자 콘텐츠
--gmp-mat-color-on-surface-variant ✔ ✔ 장소 정보
--gmp-mat-color-primary ✔ ✔ 링크, 로드 표시기, 개요 아이콘
--gmp-mat-color-disabled-surface ✔ 채워지지 않은 별표 평점
--gmp-mat-color-positive ✔ ✔ '지금 영업 중' 라벨 배치
--gmp-mat-color-positive-container ✔ 사용 가능한 EV 충전기 배지
--gmp-mat-color-on-positive-container ✔ 사용 가능한 EV 충전기 배지 콘텐츠
--gmp-mat-color-negative ✔ ✔ '폐업' 라벨이 현재 라벨로 지정됨
--gmp-mat-color-info ✔ ✔ 장애인 이용 가능 입구 아이콘
--gmp-mat-color-secondary-container ✔ ✔ 버튼 배경
--gmp-mat-color-on-secondary-container ✔ ✔ 버튼 텍스트 및 아이콘
--gmp-mat-color-neutral-container ✔ ✔ 날짜 배지, 로드 자리표시자 도형 검토
--gmp-mat-color-on-neutral-container ✔ ✔ 검토 날짜, 로드 오류
--gmp-mat-color-outline-decorative ✔ ✔ 컨테이너 테두리
서체 (시스템)
--gmp-mat-font-family ✔ ✔ 모든 서체의 기본 글꼴 모음
--gmp-mat-font-display-small ✔ 장소 이름
--gmp-mat-font-headline-medium ✔ ✔ 대화상자 제목
--gmp-mat-font-title-small ✔ 장소 이름
--gmp-mat-font-body-medium ✔ 장소 정보, 대화상자 콘텐츠
--gmp-mat-font-body-small ✔ 장소 정보
--gmp-mat-font-label-large ✔ ✔ 버튼 콘텐츠
--gmp-mat-font-label-medium ✔ 배지 콘텐츠
컨테이너 (구성요소)
border(:host) ✔ ✔ 컨테이너
border-radius(:host) ✔ ✔ 컨테이너

Google 지도 브랜드 저작자 표시

속성 세부정보 컴팩트 요소 세부정보 요소 사용
(블랙 | 화이트 | 그레이) ✔ ✔ Google 지도 브랜드 저작자 표시,
Google 지도 공개 버튼

Google 지도 서비스 약관에 따라 Google 지도 저작자 표시에는 세 가지 브랜드 색상 중 하나를 사용해야 합니다. 맞춤설정 변경사항이 적용된 경우 이 기여 분석이 표시되고 액세스할 수 있어야 합니다. 자세한 내용은 저작자 표시 요구사항을 참고하세요.

밝은 테마와 어두운 테마에 독립적으로 설정할 수 있는 세 가지 브랜드 색상을 제공합니다. 

<gmp-place-content-config>
  <gmp-place-attribution
      light-scheme-color="black"
      dark-scheme-color="white"
  ></gmp-place-attribution>
</gmp-place-content-config>