Accordion
Accordion
아코디언은 콘텐츠를 보이거나 숨길 수 있는 모든 곳에 사용할 수 있는 컴포넌트예요. 예를 들어 선택적인 폼 필드를 표시할 때 유용해요. 제목을 클릭하면 내용이 펼쳐지고 접히는 구조예요.
출처: 문서
본문
Types
Accordion
표준 아코디언이에요.
What is a dog?
What kinds of dogs are there?
How do you acquire a dog?
Styled
스타일이 적용된 아코디언은 기본적인 서식을 추가해요.
What is a dog?
What kinds of dogs are there?
How do you acquire a dog?
Basic Styled
basic 스타일 아코디언은 서식을 헤더에만 한정해요.
What is a dog?
What kinds of dogs are there?
How do you acquire a dog?
Tree
중첩된 아코디언을 사용하는 트리 아코디언이에요.
Level 1
Level 1A
Level 1A-A
Level 1A-A Contents
Level 1A-B
Level 1A-B Contents
Level 1B
Level 1B Contents
Level 1C
Level 1C Contents
Level 2
Level 2A
Level 2A-A
Level 2A-A Contents
Level 2A-B
Level 2A-B Contents
Level 2B
Level 2B Contents
Level 2C
Level 2C Contents
Variations
Fluid
아코디언은 컨테이너의 너비를 가득 채울 수 있어요.
What is a dog?
What kinds of dogs are there?
How do you acquire a dog?
Inverted
아코디언은 어두운 배경에 나타나도록 서식화할 수 있어요.
What is a dog?
What kinds of dogs are there?
How do you acquire a dog?
Compact
아코디언은 패딩을 줄여 컴팩트하게 보일 수 있어요.
What is a dog?
What kinds of dogs are there?
How do you acquire a dog?
다음 아코디언은 아주 컴팩트하게 보여요.
What is a dog?
What kinds of dogs are there?
How do you acquire a dog?
Examples
Nested Accordions
아코디언은 여러 단계의 중첩된 콘텐츠를 가질 수 있어요. 이 콘텐츠는 중첩된 아코디언에 있거나 단순히 또 다른 수준의 제목과 콘텐츠로 있을 수 있어요.
For nested accordions you only need to initialize the parent accordion.
Level 1
Welcome to level 1
Level 1A
Level 1A-A
Level 1A-A Contents
Level 1A-B
Level 1A-B Contents
Level 1B
Level 1B Contents
Level 1C
Level 1C Contents
Level 2
Level 2A
Level 2A-A
Level 2A-A Contents
Level 2A-B
Level 2A-B Contents
Level 2B
Level 2B Contents
Level 2C
Level 2C Contents
중첩된 아코디언은 부모 아코디언만 초기화하면 돼요.
Changing Trigger
아코디언은 보통 제목을 클릭할 때 트리거돼요. 하지만 트리거 선택자를 변경해서 제목 안의 어떤 요소를 활성화 요소로 지정할 수 있어요.
$('.trigger.example .accordion')
.accordion({
selector: {
trigger: '.title .icon'
}
})
;
What is a dog?
What kinds of dogs are there?
How do you acquire a dog?
Form Fields
아코디언은 콘텐츠를 표시하거나 숨길 수 있는 어디든 사용할 수 있어요. 예를 들어 선택적인 폼 필드를 표시할 때요.
First Name
Last Name
Optional Details
Maiden Name
Sign Up
Accordion Menu
아코디언은 메뉴 안에 콘텐츠 서랍을 만드는 데 사용할 수 있어요.
Size
Small
Medium
Large
X-Large
Colors
Red
Orange
Green
Blue
Right Icon
드롭다운 아이콘을 오른쪽에 배치할 수 있어요.
What is a dog?
Initializing
Initializing an accordion
아코디언은 기존 마크업 위에서 초기화돼요.
$('.ui.accordion')
.accordion()
;
Without Javascript
details/summary HTML 요소에 아코디언 클래스를 사용하면 순수 CSS로 만들어진 아코디언 요소가 돼요.
What is a dog?
AJAX Content
아코디언은 DOM Mutation Observers와 위임된 이벤트를 사용해 AJAX 콘텐츠나 초기화 후에 추가된 콘텐츠와 쉽게 호환되도록 해줘요.
If you change other attributes of the module without DOM insertion and need to update the cache you can do so by calling this module's refresh behavior.
$('.ui.accordion').accordion('refresh');
DOM 삽입 없이 모듈의 다른 속성을 변경했고 캐시를 갱신해야 한다면 이 모듈의 refresh 동작을 호출해서 할 수 있어요.
Behaviors
행동(Behaviors)은 모듈에서 특정 기능에 접근하기 위해 사용하는 짧은 영어 구문이에요.
행동들은 Javascript에서 다음 구문을 사용해 접근할 수 있어요:
.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);
- refresh — 캐시된 모든 선택자와 데이터를 새로고침해요.
- open (index) —
index위치의 아코디언 콘텐츠를 엽니다. - close others — 활성 상태가 아닌 아코디언 콘텐츠를 닫아요.
- close (index) —
index위치의 아코디언 콘텐츠를 닫아요. - toggle (index) —
index위치의 아코디언 콘텐츠를 토글해요. - destroy — 인스턴스를 파괴하고 모든 이벤트를 제거해요.
Accordion
Behavior
| 이름 | 기본값 | 설명 |
|---|---|---|
exclusive |
true |
한 번에 하나의 섹션만 열리도록 허용해요. |
on |
click |
아코디언을 열게 하는 title의 이벤트예요. |
animateChildren |
true |
자식 콘텐츠의 투명도를 애니메이션할지 여부 (자식 요소가 많으면 성능 문제가 생길 수 있어요). |
closeNested |
false |
요소가 닫힐 때 열려 있는 중첩 아코디언 콘텐츠를 닫아요. |
collapsible |
true |
활성 섹션이 접힐 수 있도록 허용해요. |
duration |
350 |
열림 애니메이션의 ms 단위 시간이에요. |
easing |
easeOutQuad |
열림 애니메이션의 이징이에요. EaseOutQuad는 아코디언에 포함되어 있고, 추가 옵션을 원하면 이징 방정식을 포함해야 해요. |
Callbacks
| 콜백 | 컨텍스트 | 설명 |
|---|---|---|
onOpening |
active content | 요소가 열리기 전의 콜백이에요. |
onOpen |
active content | 요소가 열린 후의 콜백이에요. |
onClosing |
active content | 요소가 닫히기 전의 콜백이에요. |
onClose |
active content | 요소가 닫힌 후의 콜백이에요. |
onChanging |
active content | 요소가 열리거나 닫히기 전의 콜백이에요. |
onChange |
active content | 요소가 열리거나 닫힐 때의 콜백이에요. |
Module
이 설정들은 모든 모듈에 공통이며, 컴포넌트가 콘텐츠를 DOM 속성에 연결하는 방식과 모듈의 디버깅 설정을 정의해요.
| 이름 | 기본값 | 설명 |
|---|---|---|
name |
Accordion |
로그 문장에 사용되는 이름이에요. |
namespace |
accordion |
이벤트 네임스페이스예요. 모듈 제거가 요소에 연결된 다른 이벤트에 영향을 주지 않도록 보장해요. |
selector |
{ accordion : '.accordion', title : '.title', trigger : '.title', ignore : '.ui.dropdown', content : '.content' } |
모듈의 부분을 찾는 데 사용되는 선택자예요. |
className |
{ active : 'active', animating : 'animating', transition: 'transition' } |
요소 상태를 결정하는 데 사용되는 클래스 이름이에요. |
silent |
false |
다른 디버그 설정과 무관하게 오류 메시지를 포함한 모든 콘솔 출력을 조용히 만들어요. |
debug |
false |
콘솔에 디버그 출력을 보여줘요. |
performance |
true |
성능 메트릭과 함께 console.table 출력을 보여줘요. |
verbose |
false |
디버그 출력에 모든 내부 행동을 포함해요. |
errors |
{ method : 'The method you called is not defined.' } |
오류 메시지 설정이에요. |
더 알아보기 (Learn more)
아코디언으로 접고 펼치는 UI를 쉽게 만들 수 있어요. 다른 콘텐츠 표시 모듈도 궁금하다면 Dropdown이나 Modal 문서도 함께 살펴보세요.