mirror of
https://github.com/axzilla/templui.git
synced 2025-02-21 01:13:05 +00:00
change: some ui changes on showcase section
This commit is contained in:
“axzilla”
parent
2de27e0c8d
commit
b4076c0be0
@ -7,7 +7,8 @@
|
||||
- Changed: Theme switcher on landing page
|
||||
- Changed: Improve docs UI
|
||||
- Changed: Make Product Hunt Badge smaller on footer
|
||||
- Fixes: Width issue on tabs component
|
||||
- Changed: Some UI changes on showcase section
|
||||
- Fixed: Width issue on tabs component
|
||||
|
||||
## 2024-10-05
|
||||
|
||||
|
||||
@ -3,84 +3,94 @@ package showcase
|
||||
import "github.com/axzilla/goilerplate/internals/ui/components"
|
||||
|
||||
templ ButtonShowcase() {
|
||||
<div class="space-y-8 border rounded-md p-4">
|
||||
<h2 class="font-semibold mb-4">Variants</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Secondary", Variant: components.Secondary}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Destructive", Variant: components.Destructive}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Outline", Variant: components.Outline}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Ghost", Variant: components.Ghost}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Link", Variant: components.Link}, nil)
|
||||
</div>
|
||||
<h2 class="font-semibold mb-4">Sizes</h2>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Small", Size: components.Sm}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Large", Size: components.Lg}, nil)
|
||||
@components.Button(components.ButtonProps{Size: components.Icon}, nil) {
|
||||
<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="h-4 w-4"
|
||||
>
|
||||
<path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path>
|
||||
</svg>
|
||||
}
|
||||
</div>
|
||||
<h2 class="font-semibold mb-4">States</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"}, nil)
|
||||
// Alpine.js example
|
||||
@components.Button(components.ButtonProps{Text: "With Click"}, templ.Attributes{"@click": "alert('Hey Dude!')"})
|
||||
// Vanilla JS example
|
||||
// @components.Button(components.ButtonProps{Text: "With Click"}, templ.Attributes{"onclick": "alert('Hey Dude!')"})
|
||||
@components.Button(components.ButtonProps{Text: "Disabled"}, templ.Attributes{"disabled": "true"})
|
||||
@components.Button(components.ButtonProps{Text: "Full Width", Class: "w-full"}, nil)
|
||||
</div>
|
||||
<h2 class="font-semibold mb-4">With Icon</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{}, nil) {
|
||||
<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="mr-2 h-4 w-4"
|
||||
>
|
||||
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
|
||||
</svg>
|
||||
Icon Left
|
||||
}
|
||||
@components.Button(components.ButtonProps{}, nil) {
|
||||
Icon Right
|
||||
<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="ml-2 h-4 w-4"
|
||||
>
|
||||
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
|
||||
</svg>
|
||||
}
|
||||
<div class="flex justify-center items-center border rounded-md py-16 px-4">
|
||||
<div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Variants</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Secondary", Variant: components.Secondary}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Destructive", Variant: components.Destructive}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Outline", Variant: components.Outline}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Ghost", Variant: components.Ghost}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Link", Variant: components.Link}, nil)
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">Sizes</h2>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Small", Size: components.Sm}, nil)
|
||||
@components.Button(components.ButtonProps{Text: "Large", Size: components.Lg}, nil)
|
||||
@components.Button(components.ButtonProps{Size: components.Icon}, nil) {
|
||||
<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="h-4 w-4"
|
||||
>
|
||||
<path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path>
|
||||
</svg>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-22">States</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{Text: "Default"}, nil)
|
||||
// Alpine.js example
|
||||
@components.Button(components.ButtonProps{Text: "With Click"}, templ.Attributes{"@click": "alert('Hey Dude!')"})
|
||||
// Vanilla JS example
|
||||
// @components.Button(components.ButtonProps{Text: "With Click"}, templ.Attributes{"onclick": "alert('Hey Dude!')"})
|
||||
@components.Button(components.ButtonProps{Text: "Disabled"}, templ.Attributes{"disabled": "true"})
|
||||
@components.Button(components.ButtonProps{Text: "Full Width", Class: "w-full"}, nil)
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<h2 class="font-semibold mb-2">With Icon</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@components.Button(components.ButtonProps{}, nil) {
|
||||
<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="mr-2 h-4 w-4"
|
||||
>
|
||||
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
|
||||
</svg>
|
||||
Icon Left
|
||||
}
|
||||
@components.Button(components.ButtonProps{}, nil) {
|
||||
Icon Right
|
||||
<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="ml-2 h-4 w-4"
|
||||
>
|
||||
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
|
||||
</svg>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -4,13 +4,13 @@ import "github.com/axzilla/goilerplate/internals/ui/components"
|
||||
|
||||
var sides = []components.SheetSide{
|
||||
components.Left,
|
||||
components.Top,
|
||||
components.Right,
|
||||
components.Bottom,
|
||||
components.Top,
|
||||
}
|
||||
|
||||
templ SheetShowcase() {
|
||||
<div class="space-y-8 border rounded-md p-4">
|
||||
<div class="flex justify-center items-center border rounded-md py-16 px-4">
|
||||
<div class="flex gap-2">
|
||||
for _, side := range sides {
|
||||
@components.SheetRoot() {
|
||||
|
||||
@ -5,7 +5,7 @@ import (
|
||||
)
|
||||
|
||||
templ TabsShowcase() {
|
||||
<div class="space-y-8 border border-border rounded-md p-4">
|
||||
<div class="flex justify-center items-center border rounded-md py-16 px-4">
|
||||
@components.Tabs(components.TabsProps{
|
||||
Tabs: []components.Tab{
|
||||
{
|
||||
@ -20,7 +20,7 @@ templ TabsShowcase() {
|
||||
},
|
||||
},
|
||||
TabsContainerClass: "w-full max-w-xs",
|
||||
ContentContainerClass: "w-full",
|
||||
ContentContainerClass: "w-full max-w-xs",
|
||||
})
|
||||
</div>
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user