diff options
| author |  Nate Moore <natemoo-re@users.noreply.github.com>
| 2021-12-21 11:45:23 -0600 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-12-21 12:45:23 -0500 |
| commit | 5ab3fbb3b1ea9f9382699a5538f59c8d7c0c6e5f (patch) | |
| tree | 6ce49e2707a5255a149bf03548201b136b899710 /examples/framework-alpine/src | |
| parent | 1b418a6481c8c1477ca8d169481cb6b26129d171 (diff) | |
| download | astro-5ab3fbb3b1ea9f9382699a5538f59c8d7c0c6e5f.tar.gz astro-5ab3fbb3b1ea9f9382699a5538f59c8d7c0c6e5f.tar.zst astro-5ab3fbb3b1ea9f9382699a5538f59c8d7c0c6e5f.zip | |
chore(examples): add AlpineJS example (#2222)
Diffstat (limited to 'examples/framework-alpine/src')
| -rw-r--r-- | examples/framework-alpine/src/components/Counter.astro | 29 | ||||
| -rw-r--r-- | examples/framework-alpine/src/pages/index.astro | 40 |
2 files changed, 69 insertions, 0 deletions
diff --git a/examples/framework-alpine/src/components/Counter.astro b/examples/framework-alpine/src/components/Counter.astro new file mode 100644 index 000000000..24140ca16 --- /dev/null +++ b/examples/framework-alpine/src/components/Counter.astro @@ -0,0 +1,29 @@ +--- +// Full Astro Component Syntax: +// https://docs.astro.build/core-concepts/astro-components/ + +const { initialCount = 0 } = Astro.props; +--- + +<div class="counter" x-data=`{ count: ${initialCount} }`> + <button x-on:click="count--">-</button> + <pre x-text="count">{ initialCount }</pre> + <button x-on:click="count++">+</button> +</div> + +<div class="counter-message"> + <slot /> +</div> + +<style> +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; +} +.counter-message { + text-align: center; +} +</style> diff --git a/examples/framework-alpine/src/pages/index.astro b/examples/framework-alpine/src/pages/index.astro new file mode 100644 index 000000000..3046c0aa6 --- /dev/null +++ b/examples/framework-alpine/src/pages/index.astro @@ -0,0 +1,40 @@ +--- +// Component Imports +import Counter from '../components/Counter.astro' + +// Full Astro Component Syntax: +// https://docs.astro.build/core-concepts/astro-components/ +--- +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> + + <!-- Be sure to include AlpineJS --> + <script src="//unpkg.com/alpinejs" defer></script> + </head> + <body> + <main> + <!-- Note: no `client:load` necessary since AlpineJS is always included --> + <Counter> + <h1>Hello, AlpineJS!</h1> + </Counter> + + <!-- Note: pass props to Astro components to initialize Alpine with a certain state --> + <Counter initialCount={5}> + <h2>Use Astro to pass in server-side props</h2> + </Counter> + </main> + </body> +</html> |