Components - Conditional Display

comment

기본 기능: data-conditional-name과 data-conditional-value 속성을 가진 요소의 활성화 상태에 따라 특정 영역을 표시/숨김 또는 활성화/비활성화 처리
조건부 표시 속성: data-show-when 속성으로 특정 조건에 따라 요소 표시, data-hide-when 속성으로 특정 조건에 따라 요소 숨김 처리
조건부 활성화 속성: data-disable-when 속성으로 특정 조건에 따라 요소 비활성화, data-enable-when 속성으로 특정 조건에 따라 요소 활성화 처리
조건 확인 속성: data-conditional-name과 data-conditional-value 속성으로 조건 확인 요소 지정
단일 조건: data-show-when="targetType=dmp" 형식으로 단일 조건 지정
여러 값 중 하나: data-show-when="targetType=dmp,adid" 형식으로 쉼표로 구분하여 여러 값 중 하나와 일치하면 표시
AND 조건: data-show-when="targetType=dmp userType=userId" 형식으로 공백으로 구분하여 모든 조건 만족 시 표시
OR 조건: data-show-when="targetType=dmp|userType=adid" 형식으로 파이프(|)로 구분하여 하나라도 만족하면 표시
활성화 상태 확인: 라디오/체크박스는 checked 속성, 버튼/기타 요소는 data-active="true" 속성 또는 .is-active 클래스로 활성화 상태 확인
JavaScript 초기화: conditional-display 모듈의 initAllConditionalDisplays() 함수가 자동으로 호출되어 조건부 표시 기능 초기화

Conditional Display - 기본

HTML 구조

<div class="custom-target">
  <!-- 타겟 유형 -->
  <div class="ui-form-group">
    <div class="custom-target__title">타겟 유형</div>
    <div class="custom-target__options">
      <div class="custom-target__options-item">
        <label class="ui-radio">
          <input
            type="radio"
            name="targetType"
            class="ui-radio__input"
            value="dmp"
            data-conditional-name="targetType"
            data-conditional-value="dmp"
            checked
          />
          <span class="ui-radio__icon"></span>
          <span class="ui-radio__label">DMP</span>
        </label>
      </div>
      <!-- 다른 옵션들... -->
    </div>
  </div>

  <!-- 사용자 유형 (조건부 표시) -->
  <div class="ui-form-group" data-show-when="targetType=interest,industryRetargeting" hidden>
    <div class="custom-target__title">사용자 유형</div>
    <div class="custom-target__options">
      <div class="custom-target__options-item">
        <label class="ui-radio">
          <input type="radio" name="userType" class="ui-radio__input" value="userId" checked />
          <span class="ui-radio__icon"></span>
          <span class="ui-radio__label">User ID</span>
        </label>
      </div>
      <!-- 다른 옵션들... -->
    </div>
  </div>

  <!-- 타겟팅 기준 -->
  <div class="ui-form-group">
    <div class="custom-target__title">타겟팅 기준</div>
    <div class="custom-target__options">
      <!-- 옵션들... -->
    </div>
  </div>

  <!-- 맞춤 타겟 항목 -->
  <div class="custom-target__table">
    <div class="custom-target__title">맞춤 타겟 항목</div>
    <div class="custom-target__table-wrapper">
      <table class="target-table">
        <!-- 테이블 내용... -->
      </table>
      <div class="ui-pagination">
        <!-- 페이지네이션... -->
      </div>
    </div>
  </div>
</div>

Conditional Display - 활성화/비활성화

HTML 구조

<div class="ui-form-group">
  <label class="ui-checkbox">
    <input
      type="checkbox"
      class="ui-checkbox__input"
      data-conditional-name="noEndDate"
      data-conditional-value="checked"
    />
    <span class="ui-checkbox__box"></span>
    <span class="ui-checkbox__label">종료일 없음</span>
  </label>
</div>

<div class="ui-form-group">
  <label for="endDate">종료일</label>
  <input
    type="text"
    id="endDate"
    class="ui-input"
    placeholder="날짜를 입력하세요"
    data-disable-when="noEndDate=checked"
  />
</div>

<div class="ui-form-group">
  <label for="endTime">종료 시간</label>
  <input
    type="text"
    id="endTime"
    class="ui-input"
    placeholder="시간을 입력하세요"
    data-disable-when="noEndDate=checked"
  />
</div>

설명

data-disable-when: 조건이 true일 때 요소를 비활성화합니다.
data-enable-when: 조건이 true일 때 요소를 활성화합니다.
체크박스가 체크되면 종료일과 종료 시간 입력 필드가 자동으로 비활성화됩니다.
date-input-container 내부의 입력 필드는 자동으로 is-disabled 클래스가 추가됩니다.