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

장소 UI 키트는 디스플레이 요소를 구성하기 위한 다양한 설정과 맞춤 CSS 속성을 지원합니다. 아래의 맞춤설정 도구 및 CSS 속성 참조 표를 사용하여 이러한 속성을 UI 키트에 적용하는 방법을 알아보세요.

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

장소 UI 키트는 대략적으로 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 ✔ ✔ 모든 서체의 기본 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>