project components guide

기본 가이드

설계 단계의 특별한 UX 요청이나 개발 환경에 따른 제약으로 개발 요청 사항이 없다면 테스트 완료된 코드를 복사 붙여 넣기를 기본으로 합니다.
.accordion-content 진행 방향 조절(상하, 좌우) : data-orientation="vertical"

협의 할 점

가이드를 작성 합니다.

접근성 가이드

가이드를 작성 합니다.

Accordion ALL Item

컴포넌트 클래스 : .component-accordion
컴포넌트 자식 클래스 : .accordion-item, .accordion-tit, .accordion-content
모든 .accordion-item 활성화 : data-type="multiple"


  <div class="component-accordion" data-orientation="vertical">
    <div class="accordion-item" data-state="open" data-type="multiple">
      <button type="button" class="accordion-tit"> Q. accordion-item01 </button>
      <div class="accordion-content">accordion-content01</div>
    </div>
    <div class="accordion-item" data-state="close" data-type="multiple">
      <button type="button" class="accordion-tit"> Q. accordion-item02 </button>
      <div class="accordion-content">accordion-content02</div>
    </div>
    <div class="accordion-item" data-state="close" data-type="multiple">
      <button type="button" class="accordion-tit"> Q. accordion-item03 </button>
      <div class="accordion-content">accordion-content03</div>
    </div>
  </div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Accordion One Item

컴포넌트 클래스 : .component-accordion
컴포넌트 자식 클래스 : .accordion-item, .accordion-tit, .accordion-content
하나 .accordion-item 활성화 : data-type="single"


  <div class="component-accordion" data-orientation="vertical">
    <div class="accordion-item" data-state="close" data-type="single">
      <button type="button" class="accordion-tit"> Q. accordion-item01</button>
      <div class="accordion-content">accordion-content01</div>
    </div>
    <div class="accordion-item" data-state="close" data-type="single">
      <button type="button" class="accordion-tit"> Q. accordion-item02</button>
      <div class="accordion-content">accordion-content02</div>
    </div>
    <div class="accordion-item" data-state="close" data-type="single">
      <button type="button" class="accordion-tit"> Q. accordion-item03</button>
      <div class="accordion-content">accordion-content03</div>
    </div>
  </div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Accordion Custom

컴포넌트 클래스 : .component-accordion
컴포넌트 자식 클래스 : .accordion-item, .accordion-tit, .accordion-content
.accordion-item 커스텀 : data-setting="custom"


  <div class="component-accordion" data-orientation="vertical">
    <div class="accordion-item" data-state="close" data-type="multiple" data-setting="custom">
      <button type="button" class="accordion-tit"> Q. accordion-item01</button>
      <div class="accordion-content">accordion-content01</div>
    </div>
    <div class="accordion-item" data-state="close" data-type="multiple" data-setting="custom">
      <button type="button" class="accordion-tit"> Q. accordion-item02</button>
      <div class="accordion-content">accordion-content02</div>
    </div>
    <div class="accordion-item" data-state="close" data-type="multiple" data-setting="custom">
      <button type="button" class="accordion-tit"> Q. accordion-item03</button>
      <div class="accordion-content">accordion-content03</div>
    </div>
  </div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */