PageSourceSearch
Opt out API access

https://www.kg-mobility.com/assets/accordion-D7qC7QU2.js

js kg-mobility.com collected 2026-10-02 16:39:30 UTC 63,823 bytes, 1 lines download raw bytes 

1import{a as s,_ as n}from"./CompAccordion-D5ED-qBh.js";import{D as a,a as l,c as o,e as p,w as e,F as c,h as t,H as r,f as E,b as y,g as F,I as D,T as C,b6 as i}from"./index-Dg0AKBzW.js";/* empty css                                                      */const A={class:"prose prose-sm text-left"},d=y("div",{class:"md-section"},[y("h1",null,"Accordion"),y("h2",null,[y("em",null,"1. Accordion Component")]),y("h3",null,[y("em",null,"1-1. Accordion Onece (Contents Data Type)")]),y("ul",null,[y("li",null,[y("em",null,"noStyle:"),F(" 스타일 제외 ex) < CompAccordionWrap "),y("strong",null,"noStyle"),F(" >")])])],-1),B=y("br",null,null,-1),m=["innerHTML"],u=["innerHTML"],g=D('<div class="md-section"><h3><em>Script(1-1)</em></h3><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">script setup</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#88C0D0;">import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">CompAccordionWrap</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">~/components/common/CompAccordionWrap.vue</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#88C0D0;">import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">CompAccordion</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">~/components/common/CompAccordion.vue</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#88C0D0;">import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">{</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">useBasicAccordion</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">}</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">~/composable/ui/useCmUI</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#88C0D0;">const</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">state</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">=</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">reactive</span><span style="color:#ECEFF4;">(</span><span style="color:#D8DEE9FF;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">accordion1:</span><span style="color:#D8DEE9FF;"> [</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">1</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">headerTitle:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 제목 영역 1</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">bodyContents:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 본문 영역1 &lt;br&gt; 아코디언 본문 영역1 </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">true</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">2</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">headerTitle:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 제목 영역 2</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">bodyContents:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">

1아코디언 본문 영역2</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">false</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">headerTitle:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 제목 영역 3</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">bodyContents:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 본문 영역3</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">false</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  ],</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">accordion2:</span><span style="color:#D8DEE9FF;"> [</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">1</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">headerTitle:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 제목 영역 4</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">bodyContents:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 본문 영역4</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">true</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">2</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">headerTitle:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 제목 영역 5</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">bodyContents:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 본문 영역5</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">

1false</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">headerTitle:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 제목 영역 6</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">bodyContents:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 본문 영역6</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">false</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  ],</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">});</span></span>\n<span class="line"><span style="color:#88C0D0;">const</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">{</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">setAccInit,</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">onAccToggle</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">}</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">=</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">useBasicAccordion</span><span style="color:#ECEFF4;">(</span><span style="color:#88C0D0;">state</span><span style="color:#ECEFF4;">)</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"></span>\n<span class="line"></span>\n<span class="line"><span style="color:#88C0D0;">//콜백함수가</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">필요한</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">경우만</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">사용합니다.</span></span>\n<span class="line"><span style="color:#88C0D0;">const</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">_onCallback</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">=</span><span style="color:#D8DEE9FF;"> ({idx, target}) =&gt; {</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">console.log(idx</span><span style="color:#ECEFF4;">)</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">console.log(target</span><span style="color:#D8DEE9FF;">)</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">console.log(state.accordion1</span><span style="color:#D8DEE9FF;">)</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#88C0D0;">/##</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">콜백함수가</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">아닌</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">외부에서</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">사용하는</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">

1경우</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">-</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">.my-selector-1</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">아코디언에</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#A3BE8C;">번째</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">아코디언</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">헤더에</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">스크롤</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">이동하고</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">싶을</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">경우</span></span>\n<span class="line"><span style="color:#D8DEE9FF;"> </span><span style="color:#88C0D0;">window.accordionScrollTo(</span><span style="color:#D8DEE9FF;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">el:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">.my-selector-1</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span><span style="color:#D8DEE9FF;"> </span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">targetIdx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">offsetTop:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">-50</span></span>\n<span class="line"><span style="color:#D8DEE9FF;"> })</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#88C0D0;">//##</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">콜백함수에</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">사용하는</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">경우</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">-</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">.my-selector-1</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">아코디언에</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#A3BE8C;">번째</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">아코디언</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">헤더에</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">스크롤을</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">이동하고</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">싶을</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">경우</span></span>\n<span class="line"><span style="color:#88C0D0;">const</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">_onCallback</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">=</span><span style="color:#D8DEE9FF;"> ({idx, target}) =&gt; {</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  i</span><span style="color:#88C0D0;">f(target.idx</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">==</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#D8DEE9FF;">) </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">window.accordionScrollTo(</span><span style="color:#D8DEE9FF;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">el:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">.my-selector-1</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span><span style="color:#D8DEE9FF;"> </span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">target.idx,</span><span style="color:#D8DEE9FF;"> </span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">isOpend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">!target.opend,</span><span style="color:#D8DEE9FF;"> </span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">targetIdx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">offsetTop:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">-50</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">)</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  }</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">}</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">//##</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">

1전체</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">아코디언</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">헤더에만</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">스크롤</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">이동</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">적용하고</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">싶을</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">경우</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">//</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">window.accordionScrollTo</span><span style="color:#ECEFF4;">(</span><span style="color:#D8DEE9FF;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">//</span><span style="color:#D8DEE9FF;">   </span><span style="color:#A3BE8C;">el:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">.my-selector-1</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span><span style="color:#D8DEE9FF;"> </span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">//</span><span style="color:#D8DEE9FF;">   </span><span style="color:#A3BE8C;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">target.idx,</span><span style="color:#D8DEE9FF;"> </span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">//</span><span style="color:#D8DEE9FF;">   </span><span style="color:#A3BE8C;">isOpend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">!target.opend,</span><span style="color:#D8DEE9FF;"> </span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">//</span><span style="color:#D8DEE9FF;">   </span><span style="color:#A3BE8C;">offsetTop:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">-20</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">//</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">}</span><span style="color:#ECEFF4;">)</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">}</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/script&gt;</span></span>\n<span class="line"></span></code></pre><h3><em>Template(1-1)</em></h3><ul><li><em><strong>onece:</strong></em> 아코디언이 한 개만 열려야 할 경우</li><li>정적 컨텐츠일 경우에는 <strong>(검색 호환)을 위해서 is-vshow 속성을 작성</strong> 바랍니다.</li></ul><br><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#616E88;"># @onCallback : 콜백이 함수를 호출해야하는 경우만 적용해주세요.</span></span>\n<span class="line"><span style="color:#616E88;"># class=&quot;has-animation&quot; : 클래스를 추가하면 펼침, 닫힘 모션 추가 및 스크롤 위치 변경 됨. (has-animation의 경우 기본 v-show로 적용됨.)</span></span>\n<span class="line"><span style="color:#616E88;"># is-vshow : 속성을 추가하면 v-show로 적용됨.</span></span>\n<span class="line"><span style="color:#616E88;"># &lt;CompAccordion&gt;에 class 속성에 &quot;step&quot; 및 &quot;completed&quot; : 1. 기본 스텝이 필요한 경우 전체 &quot;step&quot; 추가, 2. 앞 스텝이 완료 되었을 경우 &quot;completed&quot; 추가.</span></span>\n<span class="line"></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;!</span><span style="color:#88C0D0;">--</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">CompAccordionWrap</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">type-line white</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">--</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;!</span><span style="color:#88C0D0;">--</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">CompAccordionWrap</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">type-line dark</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">--</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;!</span><span style="color:#88C0D0;">--</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">CompAccordionWrap</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">type-line gray</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">--</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;!</span><span style="color:#88C0D0;">--</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">CompAccordionWrap</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">type-radius white</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">--</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;!</span><span style="color:#88C0D0;">--</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">CompAccordionWrap</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">type-radius dark</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">--</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#616E88;"># 아코디언 스크롤 이동 필요할 경우 고유 클래스 추가합니다.</span></span>\n<span class="line"><span style="color:#616E88;"># &lt;CompAccordionWrap class=&quot;type-radius gray my-selector-1&quot;&gt;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">CompAccordionWrap class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">type-radius gray</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">CompAccordion</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#D8DEE9;">v-for</span><span style="color:#81A1C1;">=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">item in state.accordion1</span><span style="color:#ECEFF4;">&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">is-vshow</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">:key</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;item.idx&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">onece</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">:accState</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;

1setAccInit(item, &#39;accordion1&#39;)&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">@onAccToggle</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;onAccToggle&quot;</span><span style="color:#D8DEE9FF;">  </span><span style="color:#A3BE8C;">@onCallback=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">_onCallback</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">        </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-header&gt;&lt;div v-html=&quot;item.headerTitle&quot; /&gt;&lt;/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">        </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-body&gt;&lt;div v-html=&quot;item.bodyContents&quot; /&gt;&lt;/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/CompAccordion&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/CompAccordionWrap</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre></div><div class="md-section"><h3><em>1-2. Multiple Accordion (Contents Data Type)</em></h3></div><br><br>',4),b=["innerHTML"],h=["innerHTML"],q=D('<div class="md-section"><h3><em>Script(1-2)</em></h3><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">script setup</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#88C0D0;">import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">CompAccordionWrap</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">~/components/common/CompAccordionWrap.vue</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#88C0D0;">import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">CompAccordion</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">~/components/common/CompAccordion.vue</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#88C0D0;">import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">{</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">useBasicAccordion</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">}</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">~/composable/ui/useCmUI</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#88C0D0;">const</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">state</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">=</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">reactive</span><span style="color:#ECEFF4;">(</span><span style="color:#D8DEE9FF;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#ECEFF4;">(</span><span style="color:#88C0D0;">~</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">생략</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">~</span><span style="color:#ECEFF4;">)</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">accordion2:</span><span style="color:#D8DEE9FF;"> [</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">1</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">headerTitle:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 제목 영역 4</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">bodyContents:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 본문 영역4</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">true</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">2</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">headerTitle:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 제목 영역 5</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">bodyContents:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 본문 영역5</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">

1false</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">headerTitle:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 제목 영역 6</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">bodyContents:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">아코디언 본문 영역6</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">false</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  ],</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">});</span></span>\n<span class="line"><span style="color:#88C0D0;">const</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">{</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">setAccInit,</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">onAccToggle</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">}</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">=</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">useBasicAccordion</span><span style="color:#ECEFF4;">(</span><span style="color:#88C0D0;">state</span><span style="color:#ECEFF4;">)</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/script</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre><h3><em>Template(1-2)</em></h3><ul><li>멀티로 열릴 경우: <em><strong>onece</strong></em> 를 삭제합니다.</li></ul><br><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">CompAccordionWrap class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">type-line dark</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">CompAccordion</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#D8DEE9;">v-for</span><span style="color:#81A1C1;">=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">item in state.accordion2</span><span style="color:#ECEFF4;">&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">:key</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;item.idx&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">:accState</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;setAccInit(item, &#39;accordion2&#39;)&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">@onAccToggle</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;onAccToggle&quot;</span><span style="color:#88C0D0;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-header&gt;&lt;div v-html=&quot;item.headerTitle&quot; /&gt;&lt;/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-body&gt;&lt;div v-html=&quot;item.bodyContents&quot; /&gt;&lt;/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/CompAccordion&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/CompAccordionWrap</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre></div><p><br><br></p><div class="md-section"><h3><em>1-3. Accordion Onece (Contents None Data Type)</em></h3><ul><li><strong>※ 주의: 아코디언 내용 중 직접 하드코딩된 태그는 렌더링 가능합니다. 하지만 데이터성 태그는 주입 X (순수 데이터만 주입 가능)</strong></li></ul></div><br><br>',5),x=y("p",null,"아코디언 내용1",-1),T=y("h1",null,"아코디언 제목2",-1),v=y("p",null,"아코디언 내용2",-1),f=y("h1",null,"아코디언 제목3",-1),k=y("p",null,"아코디언 내용3",-1),S=D('<br><br><div class="md-section"><h3><em>Script(3-1)</em></h3><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#88C0D0;">

1import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">CompAccordionWrap</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">~/components/common/CompAccordionWrap.vue</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#88C0D0;">import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">CompAccordion</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">~/components/common/CompAccordion.vue</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#88C0D0;">import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">{</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">useBasicAccordion</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">}</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">~/composable/ui/useCmUI</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"><span style="color:#88C0D0;">const</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">state</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">=</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">reactive</span><span style="color:#ECEFF4;">(</span><span style="color:#D8DEE9FF;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#ECEFF4;">(</span><span style="color:#88C0D0;">~</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">생략</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">~</span><span style="color:#ECEFF4;">)</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">accordion3:</span><span style="color:#D8DEE9FF;"> [</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">1</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">true</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">2</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">false</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">{</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">idx:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#88C0D0;">opend:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#81A1C1;">

1false</span><span style="color:#A3BE8C;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#ECEFF4;">}</span><span style="color:#D8DEE9FF;">,</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  ],</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">});</span></span>\n<span class="line"><span style="color:#88C0D0;">const</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">{</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">setAccInit,</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">onAccToggle</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">}</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">=</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">useBasicAccordion</span><span style="color:#ECEFF4;">(</span><span style="color:#88C0D0;">state</span><span style="color:#ECEFF4;">)</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"></span></code></pre><h3><em>Template(3-2)</em></h3><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">CompAccordionWrap class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">type-radius dark</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">CompAccordion</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">onece</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">:accState=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">setAccInit(state.accordion3[0], &#39;accordion3&#39;)</span><span style="color:#ECEFF4;">&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">@onAccToggle</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;onAccToggle&quot;</span><span style="color:#88C0D0;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-before-contents&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">        </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">CompCheckboxGroup</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">v-model=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">state100.checkbox01.value</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">          </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">v-for=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">(item, index) in state100.checkbox01.items</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">:key=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">index</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">            </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">CompCheckbox</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">              </span><span style="color:#D8DEE9;">v-model</span><span style="color:#81A1C1;">=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">state100.checkbox01.value</span><span style="color:#ECEFF4;">&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">              </span><span style="color:#88C0D0;">:itemInfos</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;{</span></span>\n<span class="line"><span style="color:#88C0D0;">                idx: item.idx,</span></span>\n<span class="line"><span style="color:#88C0D0;">                label: item.label,</span></span>\n<span class="line"><span style="color:#88C0D0;">                disabled: item.disabled,</span></span>\n<span class="line"><span style="color:#88C0D0;">                value: item.value,</span></span>\n<span class="line"><span style="color:#88C0D0;">              }&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">              </span><span style="color:#88C0D0;">:groupLabel</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;state100.checkbox01.groupLabel&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">              </span><span style="color:#88C0D0;">@onCheckboxCallback</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;onCheckboxCallbackHandler&quot;</span><span style="color:#D8DEE9FF;"> /</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">          </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">        </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/CompCheckboxGroup&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-header&gt;&lt;/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-body&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">          </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">p&gt;아코디언</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">내용1</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/</span><span style="color:#D8DEE9FF;">p</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/CompAccordion&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">CompAccordion</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">onece</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">:accState=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">setAccInit(state.accordion3[1], &#39;accordion3&#39;)</span><span style="color:#ECEFF4;">&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">@onAccToggle</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;onAccToggle&quot;</span><span style="color:#88C0D0;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-header&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">          </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">h1&gt;아코디언</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">제목2</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/h</span><span style="color:#81A1C1;">1&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-body&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">          </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">p&gt;아코디언</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">내용2</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/</span><span style="color:#D8DEE9FF;">p</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/CompAccordion&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">CompAccordion</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">onece</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">:accState=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">setAccInit(state.accordion3[2], &#39;accordion3&#39;)</span><span style="color:#ECEFF4;">&quot;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#88C0D0;">@onAccToggle</span><span style="color:#D8DEE9FF;">=</span><span style="color:#88C0D0;">&quot;onAccToggle&quot;</span><span style="color:#88C0D0;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-header&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">          </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">h1&gt;아코디언</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">제목3</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/h</span><span style="color:#81A1C1;">1&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">template</span><span style="color:#D8DEE9FF;"> </span><span style="color:#616E88;">#accordion-slot-body&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">          </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">p&gt;아코디언</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">내용3</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/</span><span style="color:#D8DEE9FF;">p</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/template&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/CompAccordion&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/CompAccordionWrap</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre></div><br><br><p><br><br><br><br></p>',6),_={__name:"md1",setup(F,{expose:D}){D({frontmatter:{}});const _=a({accordion1:[{idx:1,headerTitle:"아코디언 제목 영역 1",bodyContents:"아코디언 본문 영역1 <br> 아코디언 본문 영역1 <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  <br> 아코디언 본문 영역1  ",opend:!0},{idx:2,headerTitle:"아코디언 제목 영역 2",bodyContents:"아코디언 본문 영역2",opend:!1},{idx:3,headerTitle:"아코디언 제목 영역 3",bodyContents:"아코디언 본문 영역3",opend:!1}],accordion2:[{idx:1,headerTitle:"아코디언 제목 영역 4",bodyContents:"아코디언 본문 영역4",opend:!0},{idx:2,headerTitle:"아코디언 제목 영역 5",bodyContents:"아코디언 본문 영역5",opend:!1},{idx:3,headerTitle:"아코디언 제목 영역 6",bodyContents:"아코디언 본문 영역6",o

1pend:!1}],accordion3:[{idx:1,opend:!0},{idx:2,opend:!1},{idx:3,opend:!1}]}),{setAccInit:I,onAccToggle:W}=C(_),w=({idx:s,target:n})=>{3==n.idx&&window.accordionScrollTo({el:".my-selector-1",idx:n.idx,isOpend:!n.opend,targetIdx:3,offsetTop:-50})},O=a({checkbox01:{groupLabel:"checkbox01",items:[{idx:1,label:"과목1",disabled:!1,value:"과목1"}],value:["과목3"]}}),{CompCheckbox:L,CompCheckboxGroup:H}=i(O),M=s=>{};return(a,F)=>(l(),o("div",A,[d,B,p(n,{class:"type-radius gray my-selector-1"},{default:e((()=>[(l(!0),o(c,null,t(_.accordion1,(n=>(l(),r(s,{key:n.idx,"is-vshow":"",onece:"",accState:E(I)(n,"accordion1"),onOnAccToggle:E(W),onOnCallback:w},{"accordion-slot-header":e((()=>[y("div",{innerHTML:n.headerTitle},null,8,m)])),"accordion-slot-body":e((()=>[y("div",{innerHTML:n.bodyContents},null,8,u)])),_:2},1032,["accState","onOnAccToggle"])))),128))])),_:1}),g,p(n,{class:"type-line dark"},{default:e((()=>[(l(!0),o(c,null,t(_.accordion2,(n=>(l(),r(s,{key:n.idx,accState:E(I)(n,"accordion2"),onOnAccToggle:E(W)},{"accordion-slot-header":e((()=>[y("div",{innerHTML:n.headerTitle},null,8,b)])),"accordion-slot-body":e((()=>[y("div",{innerHTML:n.bodyContents},null,8,h)])),_:2},1032,["accState","onOnAccToggle"])))),128))])),_:1}),q,p(n,{class:"type-radius dark"},{default:e((()=>[p(s,{onece:"",accState:E(I)(_.accordion3[0],"accordion3"),onOnAccToggle:E(W)},{"accordion-before-contents":e((()=>[p(E(H),{modelValue:O.checkbox01.value,"onUpdate:modelValue":F[1]||(F[1]=s=>O.checkbox01.value=s)},{default:e((()=>[(l(!0),o(c,null,t(O.checkbox01.items,((s,n)=>(l(),r(E(L),{key:n,modelValue:O.checkbox01.value,"onUpdate:modelValue":F[0]||(F[0]=s=>O.checkbox01.value=s),itemInfos:{idx:s.idx,label:s.label,disabled:s.disabled,value:s.value},groupLabel:O.checkbox01.groupLabel,onOnCheckboxCallback:M},null,8,["modelValue","itemInfos","groupLabel"])))),128))])),_:1},8,["modelValue"])])),"accordion-slot-header":e((()=>[])),"accordion-slot-body":e((()=>[x])),_:1},8,["accState","onOnAccToggle"]),p(s,{onece:"",accState:E(I)(_.accordion3[1],"accordion3"),onOnAccToggle:E(W)},{"accordion-slot-header":e((()=>[T])),"accordion-slot-body":e((()=>[v])),_:1},8,["accState","onOnAccToggle"]),p(s,{onece:"",accState:E(I)(_.accordion3[2],"accordion3"),onOnAccToggle:E(W)},{"accordion-slot-header":e((()=>[f])),"accordion-slot-body":e((()=>[k])),_:1},8,["accState","onOnAccToggle"])])),_:1}),S]))}},I=y("h1",{class:"container-title"},"Accordion Guide",-1),W={__name:"accordion",setup:s=>(s,n)=>(l(),o("div",null,[I,p(E(_))]))};export{W as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.