Alpine.js をさわってみた（x-data編） - Qiita
Alpine.js は、Vue.jsによく似たコードの書き方で、より簡単にリアクティブなサイトが構築できるJSフレームワークです。 今回は、x-data ディレクティブについての記事です。 x-data ディレクティブ Alpine.js の x-data ディレクティブは、簡単にいうとVue.jsの dataプロパティ のようなものです。x-data デレクティブにオブジェクトリテラルを書き込むと、書き込んだ要素およびその子要素でオブジェクトデータが使えるようになります。 <!-- flowerプロパティの値を'yuri'とする --> <div x-data="{ flower: 'yuri' }"> <!-- x-data のオブジェクトデータを x-text="プロパティ名" で表示する --> <div x-text="flower"></div> </div> See the
Alpine.jsを使ってモーダルを作成する
<!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-2/5 p-6 text-center"> <div class="mt-6" x-data="{ open: false }"> <button c
TailwindCSS + Alpine.js でモーダルダイアログを作ろう
最近知ったのですが、 TailwindCSS と Alpine.js の組み合わせがなかなか使いやすかったので紹介します。 ソースコードhttps://codesandbox.io/s/fancy-bush-22qyf?file=/index.html 作った手順は次の通りです。 1. TailwindCSS をCDNから読み込む。 headタグ内に次のlinkタグを追加します。 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> 参考： https://tailwindcss.com/docs/installation#using-tailwind-via-cdn 2. Alpine.js をCDNから読み込む。 headタグ内に次のstyleタグを追加します。 <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
