NEW ARTICLE
Oracle Database ユーザーにロールを付与する
  1. HOME
  2. Alpine.js
  3. Alpine.jsでDropdownを実装する

Alpine.jsでDropdownを実装する

Alpine.jsでDropdownを実装する

JavaScriptフレームワークの1つであるAlpine.jsを導入して、Dropdownを実装するサンプルコードを記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105
  • Alpine.js 2.7.3
windows10にApacheのインストール

Alpine.js導入

CDNから読み込んで利用します。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>

Dropdownを実装

「x-data・x-show・x-transition」ディレクティブを使用して、Dropdownを実装してます。
CSSにtailwindを使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>mebeeサンプル</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
</head>

<body>

    <div class="container mx-auto my-56 w-56 px-4" x-data="{open:false}">
        <button @click="open = true"
            class="bg-red-700 hover:bg-red-500 text-white font-bold py-2 px-4 bg-opacity-75 mt-4">
            Open Dropdown
        </button>
        <div class="flex flex-col bg-yellow-200 mt-2" x-show="open" @click.away="open=false"
            x-transition:enter-start="transition ease-in duration-3000">
            <div class="text-yellow-700 text-center bg-yellow-400 px-2 py-2 m-2">1</div>
            <div class="text-yellow-700 text-center bg-yellow-400 px-2 py-2 m-2">2</div>
        </div>
    </div>

</body>

</html>

実行結果を確認すると「Dropdown」が実装されていることが確認できます。