AHA Stack を試したい(5) Alpine.js編
kenpAlpine.jsについて
AlpineJSはAstroに簡単に統合出来る模様
ということでインストール
npx astro add alpinejs設定ファイルも書き換えてくれました
// @ts-check
import { defineConfig } from 'astro/config';
import alpinejs from '@astrojs/alpinejs';
// https://astro.build/config
export default defineConfig({
integrations: [alpinejs()]
});次に、AlpineJSを使ったデモ画面の作成。
例によって、チュートリアルのコードをそのままコンポーネントを作って貼り付け。
ただし、ライブラリの読み込みの必要性が不明でしたので、とりあえずコメントアウトしています。
---
---
<html>
<head>
<!-- ... -->
<!-- <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script> -->
</head>
<body>
<!-- ... -->
<div x-data="{ expanded: false }">
<button @click="expanded = ! expanded">Toggle Content</button>
<p id="foo" x-show="expanded" x-collapse>
Lorem ipsum
</p>
</div>
</body>
</html>index.astroはこのコンポーネントを利用する為に書き換えています。
---
import Alpinetest from '../components/Alpinetest.astro';
import Layout from '../layouts/Layout.astro';
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
---
<Layout>
<Alpinetest />
</Layout>
結果は、初期表示
ボタンをクリックした場合
これまでですと、jQuery を使って実装していたところを要素内への記述のみで対応出来ています。
ついでにjQueryバージョンも試してみました。
---
---
<html>
<head>
<!-- ... -->
<style>
#foo {
display: none;
}
</style>
</head>
<body>
<!-- ... -->
<div>
<button id="toggle">Toggle Content</button>
<p id="foo">
Lorem ipsum
</p>
</div>
<script defer src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$("#toggle").on("click", function() {
$("#foo").toggle();
});
</script>
</body>
</html>＼ 最新情報をチェック ／
