H0llyW00dzZ/templui
H0llyW00dzZ/templui
1
0
Fork 0
mirror of https://github.com/axzilla/templui.git synced 2025-02-21 00:32:58 +00:00
Code

change: improve how to

Browse Source
This commit is contained in:
“axzilla” 2024-10-09 11:41:16 +02:00
parent abfb645eec
commit 11b1f9457f
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
internals/ui/pages/howto.templ
View File

@ -66,13 +66,36 @@ templ HowToUse() {
</li>
<li>
<strong>Using Goilerplate components:</strong>
<p>
Create a components folder in your project. Copy Goilerplate component code from our
<a href="/docs/components" class="text-primary underline underline-offset-4 hover:text-primary/80">
components documentation
</a>
into .templ files in this folder.
</p>
<p>You have two options for integrating Goilerplate components:</p>
<ol type="a" class="pl-4 mt-2 space-y-2">
<li>
<p class="mb-4"><strong>Option A: Install as a package (Quick and Easy)</strong></p>
<pre class="mb-4">
<code>go get github.com/axzilla/goilerplate</code>
</pre>
<p class="mb-4">Then import and use in your Templ files:</p>
<pre class="mb-4">
<code>
{ `import "github.com/axzilla/goilerplate/pkg/components"
// In your Templ files
@components.Button(components.ButtonProps{...})
@components.Icon(components.IconProps{...})` }
</code>
</pre>
</li>
<li>
<strong>Option B: Copy-Paste Method (For full customization)</strong>
<p>
Create a components folder in your project. Copy desired component code from our
<a href="/docs/components" class="text-primary underline underline-offset-4 hover:text-primary/80">
components documentation
</a>
into .templ files in this folder. For icons, create a separate icons folder and copy the necessary icon files.
</p>
</li>
</ol>
<p class="mt-2">Choose the option that best fits your project needs and customization requirements.</p>
</li>
<li>
<strong>Start development:</strong>