アルパインを使用したドロップダウンメニューの構築js

AlpineJS HTMLマークアップで直接動作を構成するための小さなJavaScriptフレームワークです.このチュートリアルでは、ドロップダウンメニューコンポーネントを構築するためにフレームワークを使用する方法を示します.あなたは、これはフレームワークへの簡単な導入として機能する前に、アルパインと協力したことがない場合.
このチュートリアルでは、CDN経由でフレームワークを読み込むことができます.

<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

アルパインロードでラッパーを作成する<div> 次の属性を指定します.

<div x-data="{ open: false }" x-on:click.outside="open = false">
  // ...
</div>

x-data HTMLのチャンクを定義し、そのコンポーネントのデータを参照します.x-on:click.outside Setは、コンポーネントの外部でクリックされたときにドロップダウンを非表示にするfalseに開いたデータです.
次はラッパ内部<div> ドロップダウンの可視性をトリガーするボタンを追加します.

<button x-on:click="open = !open">
  My Account
</button>

もう一つx-on:click 今回我々は、ボタン自体に直接クリックをクリックしています.
今すぐドロップダウンメニューのための順序なしのリストですx-show 属性

<ul x-show="open">
  <li><a href="#">Edit Profile</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Log Out</a></li>        
</ul>

時open 等しいtrue the x-show 属性は、<ul> 要素.チュートリアルのこの時点では、基本的な機能ドロップダウンを持って、ルックアンドフィールを改善するためにいくつかの最後の仕上げを追加しましょう.まず、ドロップダウンメニューの状態を表すアイコンを追加します.

<button x-on:click="open = !open">
  My Account 
  <span :class="{'rotated': open}">&raquo;</span>
</button>

ボタンをクリックした後にソースコードを表示すると、<span> 要素

メニューが開いていることを示すアイコンを回転させるには、いくつかのCSSを適用できます.

.rotated {
  transform: rotate(90deg);
  display: inline-block;
}

最後に、ドロップダウンの開始と終了がスムーズに見えるように遷移を追加します.

<ul x-show="open" x-transition.opacity>
 ...       
</ul>

これはすべてこのチュートリアルです.HTMLマークアップにいくつかの簡単なアルパイン属性を追加することによって見たように、それは比較的簡単に機能ドロップダウンメニューを作成することができます.あなたがこのチュートリアルで学んだことで、また、ショー/非表示機能とアルパインで他のUI要素を構築し始めることができました.js