🐙
TailwindCSSのtranslate-xでのサイドバー制御
tailadminデモサイトでは、サイドバーを表示・非表示の切り替えは、translate-x-*
で制御している。
サイドバーを表示する場合はtranslate-x-0
を指定、サイドバーを非表示とする場合は-translate-x-full
を指定している。
サンプルのHTMLと実行結果は下記の通り。
<div class="p-2">
<div class="translate-x-0">
translate-x-0
</div>
<div class="translate-x-10">
translate-x-10
</div>
<div class="-translate-x-10">
-translate-x-10
</div>
<div class="-translate-x-full"> # -x軸方向にズレるため、画面から非表示となる
translate-x-full
</div>
</div>
Discussion