장소 UI 키트는 다양한 설정과 맞춤 CSS 속성을 지원하여 표시 요소를 구성합니다. 이 CSS 속성 참조 표를 사용하여 이러한 속성을 UI 키트에 적용하는 방법을 확인하세요.
맞춤설정 도구를 사용하여 다양한 속성 집합이 장소 세부정보 요소의 모양에 미치는 영향을 시각화하고 HTML/CSS, Kotlin/XML, Swift로 코드에 액세스합니다.
장소 UI 키트는 Material Design을 기반으로 하는 시각적 맞춤설정에 대한 디자인 시스템 접근 방식을 제공합니다(일부 Google 지도 관련 수정사항 포함). Material Design의 색상 및 서체 참조를 확인하세요. 기본적으로 스타일은 Google 지도 시각적 디자인 언어를 따릅니다.
CSS 속성
| 속성 | Details Compact 요소 | 세부정보 요소 | 사용 |
|---|---|---|---|
| 색상 (시스템) | |||
--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-popular-times-bar-color |
✔ | 현재 시간이 아닌 시간대의 인기 시간대 히스토그램 막대 | |
--gmp-popular-times-bar-current-hour-color |
✔ | 현재 시간의 인기 시간대 히스토그램 막대 | |
--gmp-popular-times-bar-current-hour-live-color |
✔ | 실시간 데이터를 사용할 수 있는 경우 현재 시간의 인기 시간대 히스토그램 막대 및 상태 텍스트 | |
| 서체 (시스템) | |||
--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) |
✔ | ✔ | 컨테이너 |
기본 색 구성표
기본적으로 장소 UI 키트 구성요소는 사용자의 선호 색 구성표에 자동으로 적응하여 사용자가 브라우저나 시스템을 밝은 모드 또는 어두운 모드로 설정했는지 감지합니다. 구성요소의 모양은 사용자의 환경설정에 맞게 자동으로 조정됩니다.
자체 맞춤 스타일을 적용할 때는 시각적 불일치를 방지하기 위해 밝은 모드와 어두운 모드 모두에서 변경사항을 테스트해야 합니다. 애플리케이션에서 단일 고정 테마를 사용하는 경우 자동 테마 전환으로 인해 사용자 환경이 저하될 수 있습니다. 예를 들어 어두운 테마의 구성요소가 밝은 테마의 앱에 표시될 수 있습니다. 이를 방지하려면 CSS에서 color-scheme를 설정하여 구성요소가 항상 특정 테마로 렌더링되도록 강제하면 됩니다.
Google 지도 브랜드 저작자 표시
| 속성 | Details Compact 요소 | 세부정보 요소 | 사용 |
|---|---|---|---|
| (black | white | gray) | ✔ | ✔ | Google 지도 브랜드 저작자 표시, Google 지도 공개 버튼 |
Google 지도 서비스 약관에 따라 Google 지도 저작자 표시에는 세 가지 브랜드 색상 중 하나를 사용해야 합니다. 이 저작자 표시는 맞춤설정이 변경된 경우 표시되고 액세스할 수 있어야 합니다. 자세한 내용은 저작자 표시 요구사항을 참고하세요.
밝은 테마와 어두운 테마에 각각 독립적으로 설정할 수 있는 세 가지 브랜드 색상을 제공합니다.
- 밝은 테마: 흰색, 회색, 검은색 속성이 있는
PlaceAttributionElement.lightSchemeColor - 어두운 테마: 흰색, 회색, 검은색 속성이 있는
PlaceAttributionElement.darkSchemeColor
<gmp-place-details-compact>
<gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<gmp-place-name></gmp-place-name>
<gmp-place-rating></gmp-place-rating>
<gmp-place-attribution
light-scheme-color="black"
dark-scheme-color="white"
></gmp-place-attribution>
</gmp-place-details-compact>