Adding updates to the getting started guides
This commit is contained in:
Tony Lea
parent
7d5e8dfa0a
commit
da13765e46
@ -35,7 +35,7 @@
|
||||
|
||||
</div></code></pre>
|
||||
|
||||
<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-5 [&>svg+div]:translate-y-0 [&:has(svg)]:pl-11 flex items-center text-foreground">
|
||||
<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-5 [&>svg+div]:translate-y-0 [&:has(svg)]:pl-11 flex items-center text-foreground">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 -translate-y-px"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" /></svg>
|
||||
<div class="text-sm">First we will show you the final plugin code and then we will dissect it to show you how it works.</div>
|
||||
</div>
|
||||
@ -136,7 +136,7 @@ let tooltipPosition = 'top';
|
||||
let tooltipId = 'tooltip-' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
|
||||
// These are all the possible positions for the tooltip
|
||||
let positions = ['top', 'bottom', 'left', 'right'];
|
||||
// We need to check the position of the element that the tooltip is attached to, if it is not relative, absolute, or fixed, then we will set it to relative
|
||||
// We need to check the position of the element that the tooltip is attached to, we'll use this variable in a following step
|
||||
let elementPosition = getComputedStyle(el).position;</code></pre>
|
||||
|
||||
<p class="text-gray-500">Next we will loop through all the positions to see if the directive has any of the following modifiers `.top, .left, .bottom, .right`.</p>
|
||||
@ -157,7 +157,7 @@ let elementPosition = getComputedStyle(el).position;</code></pre>
|
||||
<li>x-tooltip.right="tooltip on the right"</li>
|
||||
</ul>
|
||||
|
||||
<p class="text-gray-500">Because our tooltip has an absolute position we need the parent element to have a position of relative, absolute, or fixed. If it is not we will set the position to relative:</p>
|
||||
<p class="text-gray-500">The reason that we stored the <strong>elementPosition</strong> above is because our tooltip has an <i class="text-black">absolute</i> value, in order for the <i class="text-black">absolute</i> position to work, the parent element position must be <i class="text-black">relative</i>, <i class="text-black">absolute</i>, or <i class="text-black">fixed</i>. If it is none of those we will set the position to <i class="text-black">relative</i>:</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript">if(!elementPosition.includes(['relative', 'absolute', 'fixed'])){
|
||||
el.style.position='relative';
|
||||
@ -193,7 +193,7 @@ let mouseLeave = function(event){
|
||||
el.addEventListener('mouseenter', mouseEnter);
|
||||
el.addEventListener('mouseleave', mouseLeave);</code></pre>
|
||||
|
||||
<p class="text-gray-500">Finally, the last peice of code is using a helper callback function called <strong>cleanup()</strong> that is provided by AlpineJS. It will allow us to perform any cleanup functionality, such as removing event listeners, whenever the parent element is removed from the DOM:</p>
|
||||
<p class="text-gray-500">Finally, the last piece of code is using a helper callback function called <strong>cleanup()</strong> that is provided by AlpineJS. It will allow us to perform any cleanup functionality, such as removing event listeners, whenever the parent element is removed from the DOM:</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript">cleanup(() => {
|
||||
el.removeEventListener('mouseenter', mouseEnter);
|
||||
@ -202,7 +202,7 @@ el.addEventListener('mouseleave', mouseLeave);</code></pre>
|
||||
|
||||
<p class="text-gray-500">And that's how you would go about creating a simple Alpine plugin that can be re-used throughout your application.</p>
|
||||
|
||||
<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-5 [&>svg+div]:translate-y-0 [&:has(svg)]:pl-11 flex items-start text-foreground">
|
||||
<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-5 [&>svg+div]:translate-y-0 [&:has(svg)]:pl-11 flex items-start text-foreground">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 -mt-px translate-y-1"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" /></svg>
|
||||
<div class="text-sm">Every element contains different functionality, so creating a plugin for each element will be different as well. But, hopefully this example will set you on the right path to abstracting plugins for future use.</div>
|
||||
</div>
|
||||
@ -211,6 +211,6 @@ el.addEventListener('mouseleave', mouseLeave);</code></pre>
|
||||
|
||||
<h3>Why not create Pines as a separate library</h3>
|
||||
|
||||
<p class="text-gray-500">We wanted to build a set of UI elements that are highly customizable and flexible. These elements will allow developers to easily integrate them with any <a href="https://tallstack.dev" target="_blank">Tallstack</a> application. This will let you to use these elements and possibly even build your own UI library 😉 If you only use a handful of these elements, you can use them separately and you won't end up including a ton of functionality you don't even use.</p>
|
||||
<p class="text-gray-500">We wanted to build a set of UI elements that are highly customizable and flexible. These elements will allow developers to easily integrate them with any <a href="https://tallstack.dev" target="_blank">Tallstack</a> application. If the demand is high enough, we may strongly consider converting Pines into it's own external library.</p>
|
||||
|
||||
<p class="text-gray-500">It's possible that this could change down the road or we might keep it the same and build a ton more copy-paste components. Be sure to give us a <a href="https://github.com/thedevdojo/pines" target="_blank">Star on Github</a> and <a href="/pines/docs/contribution" @click="activeMenuItem = 'contribution'; loadPage($event)">contribute</a> if you want to help steer the direction of this project.</p>
|
||||
<p class="text-gray-500">Be sure to let us know your thoughts, give us a <a href="https://github.com/thedevdojo/pines" target="_blank">Star on Github</a>, and consider <a href="/pines/docs/contribution" @click="activeMenuItem = 'contribution'; loadPage($event)">contributing</a> to help steer the direction of this project.</p>
|
||||
@ -23,10 +23,10 @@
|
||||
</body>
|
||||
</html></code></pre>
|
||||
|
||||
<div class="relative w-full rounded-lg border border-transparent p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 bg-blue-600 text-white">
|
||||
<div class="relative w-full rounded-lg border border-transparent p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 bg-blue-600 text-white">
|
||||
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6.28 5.22a.75.75 0 010 1.06L2.56 10l3.72 3.72a.75.75 0 01-1.06 1.06L.97 10.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0zm7.44 0a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 010-1.06zM11.377 2.011a.75.75 0 01.612.867l-2.5 14.5a.75.75 0 01-1.478-.255l2.5-14.5a.75.75 0 01.866-.612z" clip-rule="evenodd" /></svg>
|
||||
<h5 class="mb-1 font-medium leading-none tracking-tight">Paste in your element</h5>
|
||||
<div class="text-sm [&_p]:leading-relaxed opacity-80">Replace the `<!-- Element Here -->` line with the element snippet and you're ready to rock and roll.</div>
|
||||
<div class="text-sm [&_p]:leading-relaxed opacity-80">Replace the `<!-- Element Here -->` line with the element snippet and you're ready to rock and roll.</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
@ -43,9 +43,9 @@
|
||||
hover me
|
||||
</div></code></pre>
|
||||
|
||||
<div role="alert" class="relative w-full -translate-y-px rounded-b-lg border border-black p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&:has(svg)]:pl-11 bg-black text-white">
|
||||
<div role="alert" class="relative w-full -translate-y-px rounded-b-lg border border-black p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&:has(svg)]:pl-11 bg-black text-white">
|
||||
<svg class="w-4 h-4 translate-y-0.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M10.1893 8.12241C9.48048 8.50807 9.66948 9.5633 10.4691 9.68456L13.5119 10.0862C13.7557 10.1231 13.7595 10.6536 13.7968 10.8949L14.2545 13.5486C14.377 14.3395 15.4432 14.5267 15.8333 13.8259L17.1207 11.3647C17.309 11.0046 17.702 10.7956 18.1018 10.8845C18.8753 11.1023 19.6663 11.3643 20.3456 11.4084C21.0894 11.4567 21.529 10.5994 21.0501 10.0342C20.6005 9.50359 20.0352 8.75764 19.4669 8.06623C19.2213 7.76746 19.1292 7.3633 19.2863 7.00567L20.1779 4.92643C20.4794 4.23099 19.7551 3.52167 19.0523 3.82031L17.1037 4.83372C16.7404 4.99461 16.3154 4.92545 16.0217 4.65969C15.3919 4.08975 14.6059 3.39451 14.0737 2.95304C13.5028 2.47955 12.6367 2.91341 12.6845 3.64886C12.7276 4.31093 13.0055 5.20996 13.1773 5.98734C13.2677 6.3964 13.041 6.79542 12.658 6.97364L10.1893 8.12241Z" stroke="currentColor" stroke-width="1.5"></path><path d="M12.1575 9.90759L3.19359 18.8714C2.63313 19.3991 2.61799 20.2851 3.16011 20.8317C3.70733 21.3834 4.60355 21.3694 5.13325 20.8008L13.9787 11.9552" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 6.25V3.75M3.75 5H6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18 20.25V17.75M16.75 19H19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
|
||||
<div class="text-sm [&_p]:leading-relaxed">By doing this, you can include multiple tooltips in your application and modify the appearance and functionionality in one place.</div>
|
||||
<div class="text-sm [&_p]:leading-relaxed">By doing this, you can include multiple tooltips in your application and modify the appearance and functionionality in one place.</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500">In the next section you will learn how simple it can be to extract an element into its own plugin.</p>
|
||||
|
||||
@ -104,10 +104,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 bg-background text-foreground">
|
||||
<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 bg-background text-foreground">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg>
|
||||
<h5 class="mb-1 font-medium leading-none tracking-tight">Copy the Code. That's all you need!</h5>
|
||||
<div class="text-sm [&_p]:leading-relaxed">Simply add the <a href="https://alpinejs.dev" target="_blank" class="font-normal">Alpine</a> & <a href="https://tailwindcss.com" target="_blank" class="font-normal">Tailwind</a> library to your page, paste in the element, and boom 🔮</div>
|
||||
<div class="text-sm [&_p]:leading-relaxed">Simply add the <a href="https://alpinejs.dev" target="_blank" class="font-normal">Alpine</a> & <a href="https://tailwindcss.com" target="_blank" class="font-normal">Tailwind</a> library to your page, paste in the element, and boom 🔮</div>
|
||||
</div>
|
||||
|
||||
<h3>Inspiration</h3>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user