[tailwind]スマホ向けのヘッダー・フッター固定レイアウト

Bootstrap以来

CSSのクラスを覚える（暗記する）なんてBootstrapが出てきて以来久々な気もしますが、世間的に何か流行ってるのかはよくわからんけど、どのコンポーネントフレームワークを使ってもよく耳に聞くtailwindを今更ながら使ってみた。

チートシートを作るわけじゃないよ

使い方などは公式を見ればわかるだろうし、pがpadding・mがmargin・xyが縦横・trblがtop/right/bommon/left位を抑えておけば、後は組み合わせぐらいの感じなのと、VSCodeには補完機能のプラグインなどが充実してるので、ここにチートシート的な記事を書いたところで二番煎じ・三番煎じ感がすごいので、とりあえずハイブリッドスマホアプリ向けなヘッダー・フッター固定でコンテンツ部分だけがスクロールするようなレイアウトを組んでみようという試みです。

そんなわけでソース

PageLayout.vueとかで使うことを想定しているので、普通にHTMLとかで使うのならばslotの部分をいい感じに書き換えてくれよな！

PageLayout.vue(template部分)

<template>
  <div class="flex flex-col h-screen overflow-hidden">
    <header class="w-full border-b-1 border-grey" v-if="$slots.header">
      <slot name="header" />
    </header>
    <main class="flex-1 overflow-y-scroll p-2">
      <slot />
    </main>
    <footer class="w-full border-t border-grey" v-if="$slots.footer">
      <slot name="footer" />
    </footer>
  </div>
</template>

画面によってはヘッダーやフッターがない画面などもあったりするかと思うので、
そこはslotがあるかどうかで判断して表示の制御をしています。
ヘッダー・フッターの表示がなかったとしてもflex flex-colでラッパーしてるので、デザインが崩れることは無いはず。

使い方

<template>
  <PageLayout>
    <!-- コンテンツ部分を実装 -->
    <h1>ココに実装するのじゃ</h1>

    
    <!-- ヘッダー部分を実装 -->
    <template #header>
    </template>
    
    <!-- フッター部分を実装 -->
    <template #footer>
    </template>
  </PageLayout>
</template>

PageLayoutタグでラッパーして、直下にコンテンツとなる内容を実装して、
ヘッダー・フッターが必要な場合はtemplateタグを使ってそれぞれの中に実装をしていくと良いよ!