Skip to content

Instantly share code, notes, and snippets.

@AutoSponge

AutoSponge/index.html

Last active December 26, 2019 17:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AutoSponge/b410b51a0382a67f537f3c6c91943a78 to your computer and use it in GitHub Desktop.
Save AutoSponge/b410b51a0382a67f537f3c6c91943a78 to your computer and use it in GitHub Desktop.
Download ZIP
alpine-test
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css">
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.1.1/dist/alpine.min.js"
defer></script>
</head>
<body x-data="{ open: false }" x-on:keydown.escape="open = false">
<h1>Hi there!</h1>
<a href="#">home</a>
<div>
<button x-on:click="open = true">Open
Dropdown</button>
<ul x-show="open" x-on:click.away="open = false">
Dropdown Body
</ul>
</div>
</body>
</html>
Raw
playground.json
{
"libraries": []
}
Raw
script.js
// https://github.com/alpinejs/alpine
// doesn't have esc to close
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment