58 lines
6.7 KiB
HTML
58 lines
6.7 KiB
HTML
<div class="not-prose">
|
|
<h2 class="pt-0 mb-2 text-3xl font-bold tracking-tight select-none not-prose custom-font">How To Use</h2>
|
|
</div>
|
|
<p class="text-gray-500">Pines, is super easy to use. If your application uses Alpine and Tailwind, you can copy and paste an element into your page and it will work flawlessly. If you want to test an element on a single HTML page, you can copy/paste this snippet below into any `.html` file:</p>
|
|
|
|
<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-yellow-500 text-white">
|
|
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /></svg>
|
|
<h5 class="mb-1 font-medium leading-none tracking-tight">Use in Production</h5>
|
|
<div class="text-sm [&;_p]:leading-relaxed">The snippet below uses the TailwindCDN which should not be used in your production apps, instead you should bundle Tailwind and Alpine with a <a href="https://tailwindcss.com/docs/guides/vite" target="_blank" class="underline">bundler like Vite</a>.</div>
|
|
</div>
|
|
|
|
<pre class="block w-full overflow-scroll text-sm border rounded-md hljs html border-neutral-200"><code class="hljs html"><!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pines UI</title>
|
|
<style>[x-cloak]{display:none}</style>
|
|
<!-- Include the Alpine library on your page -->
|
|
<script src="https://unpkg.com/alpinejs" defer></script>
|
|
<!-- Include the TailwindCSS library on your page -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="flex items-start justify-center h-full bg-gray-50">
|
|
<div class="flex items-center justify-center w-full max-w-full">
|
|
<!-- Element Here -->
|
|
</div>
|
|
</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">
|
|
<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>
|
|
|
|
<hr>
|
|
|
|
<h3>The Pines Playground</h3>
|
|
|
|
<p class="text-gray-500">You may also open up the <button class="text-blue-600 underline" onclick="window.dispatchEvent(new CustomEvent('open-playground', { detail: {}}));">Pines Playground</button> and edit any element or design your own. Keep in mind that the data entered into the playground will not be saved, so if you leave the page you may lose any changes. However, it may be the easiest way to make a few modifications to an element or create your own.</p>
|
|
|
|
<h3>Re-usability</h3>
|
|
|
|
<p class="text-gray-500">Pines isn't a standalone library, but rather a collection of elements for Alpine and Tailwind projects. This will make it a delight to integrate with your <a href="https://tallstack.dev" target="_blank">TALL stack applications</a>; however, some of these elements you may want to make re-usable. One such element is the tooltip element, which you may want to extract it into it's own Alpine plugin, allowing you to do something like this:</p>
|
|
|
|
<pre class="block w-full mb-0 overflow-scroll text-sm border rounded-b-none rounded-t-md border-neutral-900" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"><code class="hljs html"><div x-tooltip="Your tooltip text here">
|
|
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">
|
|
<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>
|
|
|
|
<p class="text-gray-500">In the next section you will learn how to extract an element into its own plugin.</p>
|