Thymeleaf fragmentについて

fragmentの設定

HTMLの属性に th: fragment="fragment name" という形式で記述する。
右辺には任意の fragment name を記述する。

下記は、fragment name を header にとして記述した例である。

header.html

<div th:fragment="header">
  <nav class="navbar" role="navigation" aria-label="main navigation">
     <h1 class="navbar-brand">
      さんぷろ
    </h1>
  </nav>
</div>

flagmentの呼び出し

flagmentの呼び出し方法は主に下記の２種類がある。

• th: include を利用する方法
• th: replace を利用する方法

どちらもHTMLの属性に th: include="htmlのpath::fragment name" という形式で 記述する。

下記は、２種類の方法で上記の header というflagmentを呼び出している例である。

• th: includeを利用する場合

form.html

<div th: include="fragments/header::header"></div>

↓

結果として下記のように th: include 属性を記述したHTMLの中の要素に含まれるようになる。

form.html

<div>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <h1 class="navbar-brand">
      さんぷろ
    </h1>
  </nav>
</div>

• th: replace を利用する場合

form.html

<div th: replace="fragments/header::header"></div>

↓

結果として下記のように th: replace 属性を記述したHTMLの要素は消え、th:fragment 属性を記述したHTML要素と置き換えられる。

form.html

<header>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <h1 class="navbar-brand">
      さんぷろ
    </h1>
  </nav>
</header>

関数のように fragment を利用する

fragment nameに th: fragment=fragment name(仮引数)という形式のように () と 仮引数 を追加する事により関数のようにfragmentを利用できる。

下記は、上述の header の fragment を関数のように利用している例である。

fragment 定義する箇所

header.html

<header th:fragment="header(title)">
  <nav class="navbar" role="navigation" aria-label="main navigation">

    <div class="navbar-brand">
      さんぷろ
    </div>

    <div class="navbar-menu">
      <div class="navbar-start">
        <h1 class="navbar-item" th:text="${title}"></h1>
      </div>
    </div>

  </nav>
</header>

fragment を呼び出す箇所

呼び出し側で仮引数に実引数を代入して flagment を呼び出す事ができる。

form.html

  <header th:replace="fragments/header::header('販売品登録')"></header>

参考

www.thymeleaf.org