탭 콘텐츠는 페이지 내에서 이동하지 않고 탭을 전환하여 다양한 보기 방식를 제공합니다. 탭으로 구분된 콘텐츠는 amp-selector를 사용하여 구현할 수 있습니다. 사용자가 선택할 수 있는 옵션의 목록을 표시하는 구성 요소입니다.
예를 들면 전자 상거래에서는 제품 개요, 사양 및 리뷰와 같은 다양한 정보를 제공하는 데 사용할 수 있습니다. 뉴스 사이트에서는 탭을 사용하여 가장 많이 읽은 기사 목록과 탭을 눌러 전환할 수 있는 기사 목록을 표시합니다.
다음을 페이지의 head 내에 포함합니다.
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
amp-selector에 탭을 만들기 위해 사용할 수 있는 두 가지 속성이 있습니다.
- option: 이 속성을 추가하면 하위 요소를 선택 가능하도록 설정할 수 있습니다.
- selected: 이 속성은 현재 선택되어 있는 요소를 지정합니다. 새로운 요소가 선택되면 선택이 취소됩니다.
이것이 탭을 구현하는 데 필요한 전부입니다. 빌드는 다음과 같이 합니다.
- 탭 버튼 및 탭의 컨테이너로 amp-selector를 사용합니다.
-
두 개의 탭 버튼에 각각 div를 사용합니다.
- div를 선택하여 각 탭에 option 속성을 추가합니다. 그러면 AMP는 선택한 div에 selected 속성을 추가합니다.
-
두 개의 탭 패널에 각각 div를 사용합니다.
- 각 탭 패널 div는 selected 속성이 관련 탭 선택 버튼에 적용될 때 CSS에 의해 쉽게 타겟팅 될 수 있습니다.
- 탭 패널은 형제 요소에 selected 속성이 있는지에 따라 표시되거나 숨겨집니다.
먼저 amp-selector 컨테이너 코드입니다. 탭 패널을 지정하는 데 사용할 CSS 클래스로 tab-container를 추가합니다.
<amp-selector layout="container" class="tab-container" role="tablist"> ... </amp-selector>
다음으로 탭을 추가하겠습니다.
<div class="tab-selector"
role="tab"
option="related-content"
selected>
<h2>관련 기사</h2>
</div>
<div class="tab-content"
role="tabpanel">
관련 기사 콘텐츠...
</div>
<div class="tab-selector"
role="tab"
option="most-read">
<h2>인기 기사</h2>
</div>
<div class="tab-content"role="tabpanel">
인기 기사 콘텐츠...
</div>
option 속성이 포함되어 있으므로 div를 선택할 수 있습니다. selected 속성을 related-content 탭에 적용했습니다. 이제 선택된 탭이 기본 탭으로 표시됩니다.
여기에 CSS를 추가합니다. amp-selector를 플렉스 컨테이너로 설정합니다.
.tab-container {
display: flex;
flex-wrap: wrap;
}
기본적으로 탭 안의 내용은 숨겨집니다. order 속성을 1로 설정합니다.
.tab-content {
display: none;
width: 100%;
order: 1;
}
그런 다음 tab-selector 탭이 선택되면 탭의 내용을 표시합니다.
.tab-selector[selected] +.tab-content {
display: block;
}
선택한 탭과 선택하지 않은 탭의 스타일을 다르게 지정하여 어떤 탭이 선택되었는지 확인할 수 있습니다.
.tab-selector {
list-style: none;
flex-grow: 1;
cursor: pointer;
background-color: #ddd;
}
.tab-selector[selected] {
outline: none;
background: #fff;
border-top: 1px solid #ddd;
}
이제 페이지에 이 탭 콘텐츠가 맞도록 레이아웃 스타일을 약간 조정하면 됩니다.