탭 구성 요소 tabs-component

핵심 구성 요소의 탭 구성 요소를 사용하여 콘텐츠를 여러 탭으로 구성할 수 있습니다.

사용량 usage

콘텐츠 작성자는 탭 구성 요소를 통해 여러 탭에서 페이지 콘텐츠를 구성할 수 있습니다.

콘텐츠 작성자는 편집 대화 상자를 통해 여러 탭을 정의하고 활성 탭을 설정할 수 있습니다. 템플릿 작성자는 디자인 대화 상자를 통해 탭에 추가될 수 있는 구성 요소를 정의하고 스타일을 맞춤화할 수 있습니다.

버전 및 호환성 version-and-compatibility

현재 버전의 탭 구성 요소는 2018년 10월 핵심 구성 요소 릴리스 2.2.0과 함께 도입된 v1입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.

다음 표에서 구성 요소의 모든 지원 버전, 구성 요소 버전과 호환되는 AEM 버전 및 이전 버전에 대한 설명서 링크에 대해 자세히 살펴볼 수 있습니다.

핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전을 참조하십시오.

샘플 구성 요소 출력 sample-component-output

탭 구성 요소를 경험하고 구성 옵션의 샘플뿐만 아니라 HTML 및 JSON 출력을 확인하려면 구성 요소 라이브러리를 참조하십시오.

기술 세부 사항 technical-details

탭 구성 요소에 대한 최신 기술 설명서는 GitHub에서 확인할 수 있습니다.

핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 참조하십시오.

패널로 딥 링크하기 deep-linking

탭, 캐러셀 및 아코디언 구성 요소는 구성 요소 내에서 패널로 직접 링크하는 기능을 지원합니다.

이를 위해 진행되는 작업:

패널 ID를 앵커로 사용하여 URL로 이동하면 브라우저는 특정 구성 요소로 바로 스크롤하고 지정 패널을 표시합니다. 패널 확장이 기본 구성되어 있지 않으면 패널은 자동으로 확장됩니다.

탭 및 반응형 디자인 responsive-design

모든 핵심 구성 요소는 완벽하게 반응하도록 설계되어 여러 장치에서 원활한 경험을 보장합니다.

탭 구성 요소와 같은 일부 고급 구성 요소는 모든 상태에서 응답성을 유지하기 위해 구현 프로젝트의 맥락 내에서 특별한 고려 사항이 필요할 수 있습니다. 자세한 내용은 핵심 구성 요소의 반응형 디자인 문서를 참조하십시오.

편집 대화 상자 edit-dialog

콘텐츠 작성자는 편집 대화 상자를 통해 탭을 만들고, 이름을 바꾸고 배열할 수 있을 뿐만 아니라 활성 탭을 정의할 수 있습니다.

항목 탭 items-tab

추가 버튼을 사용하여 탭으로 추가할 구성 요소를 선택하는 구성 요소 선택기를 엽니다. 추가되면 다음 열이 포함된 목록에 항목을 추가합니다.

속성 탭 properties-tab

접근성 탭 accessibility-tab

접근성 탭에서 구성 요소에 대한 ARIA 접근성 라벨 값을 설정할 수 있습니다.

패널 선택 select-panel

콘텐츠 작성자는 구성 요소 툴바의 패널 선택 옵션을 사용하여 다른 패널 편집을 변경하고 탭 순서를 간단히 재배열할 수 있습니다.

구성 요소 툴바에서 패널 선택 옵션을 선택하면 구성된 탭이 드롭다운으로 표시됩니다.

디자인 대화 상자 design-dialog

템플릿 작성자는 디자인 대화 상자를 통해 항목으로 탭 구성 요소에 추가 가능한 구성 요소뿐만 아니라 콘텐츠 작성자가 사용할 수 있는 맞춤형 스타일을 정의할 수 있습니다.

허용된 구성 요소 탭 allowed-components-tab

콘텐츠 작성자는 허용된 구성 요소 ​를 통해 항목으로 탭 구성 요소에 추가 가능한 구성 요소를 정의할 수 있습니다.

템플릿 편집기의 레이아웃 컨테이너 정책 및 속성을 정의하는 경우 허용된 구성 탭은 동일한 이름의 탭과 동일한 방식으로 작동합니다.

스타일 탭 styles-tab

탭 구성 요소는 AEM 스타일 시스템을 지원합니다.

Adobe 클라이언트 데이터 레이어 data-layer

탭 구성 요소는 Adobe 클라이언트 데이터 레이어지원합니다.