タブ（HATEOAS の使用）

この使用例では、htmx を使用してタブを実装する方法の容易さを示します。Hypertext As The Engine Of Application State の原則に従って、選択したタブがアプリケーション状態の一部です。したがって、アプリケーション内のタブを表示および選択するには、単純に返された HTML にタブのマークアップを含めます。これがアプリケーションサーバーの設計に適合しない場合は、JavaScript を少し使用して代わりにタブを選択することもできます。

#使用例コード（メインページ）

メインページには以下の HTML が単純に含まれ、最初のタブを DOM に読み込みます。

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

#使用例コード（各タブ）

後続のタブページにはすべてのタブが表示され、選択したタブがそれに応じて強調表示されます。

<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>

🔗デモ