본문으로 건너뛰기

스타일링

CSS 커스텀 속성을 통해 Booking 위젯을 커스터마이즈합니다. 위젯은 --wx-booking-* 네임스페이스 아래에 Booking 전용 레이아웃 토큰을 노출하며, --wx-* 네임스페이스 아래에 일반 디자인 토큰(색상, 테두리, 타이포그래피)을 공유합니다.

기본 스타일​

Booking 위젯은 레이아웃 치수와 공유 테마 토큰에 CSS 커스텀 속성을 사용합니다. 이러한 변수를 자신의 CSS에서 재정의하여 외관을 커스터마이즈할 수 있습니다.

다음 코드 스니펫은 위젯이 노출하는 Booking 전용 변수의 일부를 보여줍니다(데스크톱 값으로 표시되며, 위젯은 내부적으로 화면 크기에 따라 일부 값을 재정의합니다 — 데스크톱, 태블릿, 모바일):

.wx-booking {
    --wx-booking-content-min-width: 984px;
    --wx-booking-content-max-width: 1132px;
    --wx-booking-content-padding: 0 var(--wx-booking-content-h-padding) 28px;
    --wx-booking-slots-width: 602px;
    --wx-booking-slots-padding: 0 30px 0 50px;
    --wx-booking-separator: var(--wx-border);
}
참고

Booking의 이후 버전에서는 변수 이름이 변경될 수 있습니다. 최신 버전으로 업데이트한 후 이름을 확인하고, 표시 문제가 발생하지 않도록 코드를 조정하세요.

기본 제공 테마 적용​

위젯은 Material 테마라는 하나의 기본 제공 테마를 제공합니다.

위젯 컨테이너에 해당 CSS 클래스를 추가하여 테마를 적용합니다.

다음 코드 스니펫은 Booking 컨테이너에 Material 테마를 적용합니다:

<!-- Booking 컨테이너 -->
<div id="root" class="wx-material-theme"></div>

skins 폴더에서 테마 스타일시트를 불러오려면, 페이지에 link 태그를 추가합니다.

다음 코드 스니펫은 Material 테마 스타일시트를 포함합니다:

<link rel="stylesheet" href="path/to/booking/skins/material.css"/>

기본 제공 테마 커스터마이즈​

.wx-material-theme 선택자 아래에서 Material 테마 변수를 재정의합니다.

다음 코드 스니펫은 어두운 레이아웃을 위해 Material 테마의 색상을 변경합니다:

<style>
    .wx-material-theme {
        color-scheme: dark;
        --wx-color-font: rgba(255, 255, 255, 0.9);
        --wx-color-secondary-font: rgba(255, 255, 255, 0.5);
        --wx-icon-color: rgba(255, 255, 255, 0.7);
        --wx-icon-color-hover: rgba(255, 255, 255, 0.2);
        --wx-background: #949393;
        --wx-booking-background: #c0bbbb;
        --wx-background-alt: #a5a3a3;
        --wx-booking-content-background: #a3a1a1;
        --wx-border: 1px solid #818080;
        --wx-border-medium: 1px solid #9e9e9e;
        --wx-input-background: #d6d3d3;
    }
</style>

커스텀 스타일 적용​

프로젝트 디자인에 맞추려면, Booking 컨테이너의 커스텀 클래스 아래에 CSS 변수를 범위 지정합니다.

다음 코드 스니펫은 .demo 컨테이너에 대한 커스텀 팔레트를 정의합니다:

<div id="root" class="demo"></div>
<style>
    .demo {
        --wx-background: #c4c7e0;
        --wx-color-font: rgba(12, 12, 116, 0.9);
        --wx-color-secondary-font: rgba(34, 33, 33, 0.904);
        --wx-icon-color: rgba(149, 179, 223, 0.7);
        --wx-booking-primary-hover: #194e9e;
        --wx-booking-border-color: 1px solid #818080;
        --wx-border: 1px dashed #818080;
    }
</style>

다음 코드 스니펫은 카드와 날짜 항목의 배경색을 변경합니다:

<style>
    .demo {
        .wx-booking .wx-list > .wx-card,
        .wx-booking .wx-slot-dates > .wx-date-item {
            background-color: #e8f3f7;
        }

        .wx-booking .wx-slot-dates > .wx-date-item.wx-selected {
            background-color: #bfdde7;
        }
    }
</style>

예제​

아래 스니펫은 커스텀 Booking 스타일을 보여줍니다:

Need more help?Contact Support