スポンサーリンク

【FreeMaker】テンプレートサンプル

Javaのテンプレートエンジン「FreeMaker」 のテンプレート、Tailwind CSS仕様。

サンプル

<#import "_layout.ftl" as layout />
<@layout.header>
    <h1 class="text-2xl font-bold m-3">Data</h1>
    <input type="text" class="bg-slate-200 border rounded m-3 p-1" placeholder="DeviceId">
    <button class="bg-blue-800 hover:bg-blue-700 text-white rounded px-6 py-1"</button>Submit</button>
<hr>
<div class="m-3 p-1">
    <table class="table-auto">
      <thead class="color-300">
        <tr>
          <th class="border border-slate-300 px-4 py-2">Value1</th>
          <th class="border border-slate-300 px-4 py-2">Value2</th>
          <th class="border border-slate-300 px-4 py-2">Value3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="border border-slate-300 px-4 py-2">99999</td>
          <td class="border border-slate-300 px-4 py-2">99999</td>
          <td class="border border-slate-300 px-4 py-2">AAAAA</td>
        </tr>
        <tr>
          <td class="border border-slate-300 px-4 py-2">99999</td>
          <td class="border border-slate-300 px-4 py-2">99999</td>
          <td class="border border-slate-300 px-4 py-2">AAAAA</td>
        </tr>
        <tr>
          <td class="border border-slate-300 px-4 py-2">99999xxxx</td>
          <td class="border border-slate-300 px-4 py-2">99999</td>
          <td class="border border-slate-300 px-4 py-2">AAAAA</td>
        </tr>
      </tbody>
    </table>
</div>
</@layout.header>

 

タイトルとURLをコピーしました