分頁 (使用 HATEOAS)

這個範例展示了使用 htmx 實作分頁有多容易。遵循 超媒體作為應用程式狀態引擎 的原則，選中的分頁是應用程式狀態的一部分。因此，要在你的應用程式中顯示和選擇分頁，只需將分頁標記包含在返回的 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>

🔗演示