Reaproche/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

petal init

Browse source
This commit is contained in:
Rodolphe Marbot 2022-06-03 14:50:06 +02:00
parent 81a9f68a22
commit 978de52a09
11 changed files with 103 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

53
lib/reaproche_web/templates/page/index.html.heex
View file

@ -40,12 +40,53 @@
</li>
</ul>
</article>
<section>
<h2>Alpine JS Installed</h2>
<div x-data="{name:''}">
<label for="name">Name:</label>
<input id="name" type="text" x-model="name" />
<p><br><b><em>Output:</em></b> <span x-text="name"/></p>
<section class="grid grid-cols-1 gap-4">
<!-- tailwind text -->
<div>
<h2 class="text-red-500 text-5xl font-bold text-center">Tailwind CSS with Alpine JS Dropdown</h2>
</div>
<!-- alpinejs dropdown test -->
<div x-data="{ open: false }" class="relative text-left">
<button
@click="open = !open"
@keydown.escape.window="open = false"
@click.away="open = false"
class="flex items-center h-8 pl-3 pr-2 border border-black focus:outline-none">
<span class="text-sm leading-none">
Options
</span>
<svg class="w-4 h-4 mt-px ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div
x-cloak
x-show="open"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute flex flex-col w-40 mt-1 border border-black shadow-xs">
<a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Settings</a>
<a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Support</a>
<a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Sign Out</a>
</div>
</div>
<!-- alpinejs counter test -->
<div>
<p class="mt-5 font-bold text-center">Counter with Component Buttons</p>
</div>
<!--
If you want a box around the counter use:
<div class="flex items-center justify-center h-screen bg-gray-200">
-->
<div class="mt-10 flex justify-center" x-data="{ count: 0 }">
<button class="btn-redish" x-on:click="count--">Decrement</button>
<code>count: </code><code x-text="count"></code>
<button class="btn-greenish" x-on:click="count++">Increment</button>
</div>
</section>
</section>