🐕

AlpineJsを自作ライブラリで簡単に表記できるようにしてみた

2025/04/09に公開

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>独立型デザイン</title>
<link rel="stylesheet" href="ad_style.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>


</head>
<body class="gradient-ocean"style = "display:none;">
    <div class="replace">
        <div class="alp_drop" x-data="{ isOpen: false }">
            <div @click="isOpen = !isOpen">Toggle Dropdown</div>
            
            <div x-show="isOpen" @click.away="isOpen = false">
                <p class="in_text">Dropdown Content...</p>
            </div>
        </div>

    </div>
     
    <div class="ad-box m_center">

        <div class="p_temp alp_drop ">
            <div class="in_text">ドロップダウンの文字が変更されたよ</div>
        </div>
        <div class="p_temp alp_drop ">
            <div class="in_text">ドロップダウンの文字が変更されたよ222</div>
        </div>
        <div class="p_temp alp_drop ">
            <div class="in_text">ドロップダウンの文字が変更されたよ333</div>
        </div>
    </div>
    <script src="temp.js"></script>
</body>
</html>

クラスreplaceの中に入っているのが、もともとのコード。
それに、alp_dropというクラスを割り当て、紐づけてある。
引数として、in_textを設定してあり、これによって、内容を変化させている。

Discussion