Tabs (Using HATEOAS)

이 예는 htmx를 사용하여 탭을 구현하는 것이 얼마나 쉬운지 보여줍니다.
애플리케이션 상태의 엔진으로서의 하이퍼텍스트의 원칙에 따라 선택한 탭은 애플리케이션 상태의 일부가 됩니다.
따라서 애플리케이션에서 탭을 표시하고 선택하려면 반환된 HTML에 탭 마크업을 포함하기만 하면 됩니다.
이 방법이 애플리케이션 서버 디자인에 적합하지 않은 경우 자바스크립트로 탭 선택하기를 사용할 수도 있습니다.

#Example Code (Main Page)

메인 페이지에는 초기 탭을 DOM에 로드하는 다음 HTML이 포함되어 있습니다.

<div id="tabs" hx-get="/tab1" hx-trigger="load delay:100ms" hx-target="#tabs" hx-swap="innerHTML"></div>

#Example Code (Each Tab)

이후 탭 페이지에는 모든 탭이 표시되고 선택한 탭이 그에 따라 강조 표시됩니다.

<div class="tab-list" role="tablist">
	<button hx-get="/tab1" class="selected" role="tab" aria-selected="true" aria-controls="tab-content">Tab 1</button>
	<button hx-get="/tab2" role="tab" aria-selected="false" aria-controls="tab-content">Tab 2</button>
	<button hx-get="/tab3" role="tab" aria-selected="false" aria-controls="tab-content">Tab 3</button>
</div>

<div id="tab-content" role="tabpanel" class="tab-content">
	Commodo normcore truffaut VHS duis gluten-free keffiyeh iPhone taxidermy godard ramps anim pour-over.
	Pitchfork vegan mollit umami quinoa aute aliquip kinfolk eiusmod live-edge cardigan ipsum locavore.
	Polaroid duis occaecat narwhal small batch food truck.
	PBR&B venmo shaman small batch you probably haven't heard of them hot chicken readymade.
	Enim tousled cliche woke, typewriter single-origin coffee hella culpa.
	Art party readymade 90's, asymmetrical hell of fingerstache ipsum.
</div>

🔗Demo