diff options
Diffstat (limited to 'examples/framework-alpine/src/components/Counter.astro')
| -rw-r--r-- | examples/framework-alpine/src/components/Counter.astro | 34 |
1 files changed, 34 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..00182f006 --- /dev/null +++ b/examples/framework-alpine/src/components/Counter.astro @@ -0,0 +1,34 @@ +--- +// Full Astro Component Syntax: +// https://docs.astro.build/basics/astro-components/ + +interface Props { + initialCount?: number; +} + +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> |