@axadrn starred 3 repositories
package showcase
import "github.com/templui/templui/components/collapsible"
import "github.com/templui/templui/components/button"
import "github.com/templui/templui/components/icon"
templ CollapsibleDefault() {
@collapsible.Collapsible(collapsible.Props{
Class: "w-[350px] space-y-2",
}) {
<div class="flex items-center justify-between space-x-4 px-4">
<h4 class="text-sm font-semibold">
{ "@axadrn" } starred 3 repositories
</h4>
@collapsible.Trigger() {
@button.Button(button.Props{
Variant: button.VariantGhost,
Size: button.SizeIcon,
Class: "size-8",
}) {
@icon.ChevronsUpDown(icon.Props{Class: "size-4"})
<span class="sr-only">Toggle</span>
}
}
</div>
<div class="rounded-md border px-4 py-2 font-mono text-sm">
github.com/a-h/templ
</div>
@collapsible.Content(collapsible.ContentProps{
Class: "space-y-2",
}) {
<div class="rounded-md border px-4 py-2 font-mono text-sm">
github.com/charmbracelet/bubbletea
</div>
<div class="rounded-md border px-4 py-2 font-mono text-sm">
github.com/labstack/echo
</div>
}
}
}
Installation
templui add collapsibleLoad the script once in your layout:
<head>
@collapsible.Script()
</head>import "github.com/templui/templui/components/collapsible"Load the script once in your layout:
<head>
@collapsible.Script()
</head>API Reference
Collapsible
Root container for collapsible content. Controls the open/closed state.
| Name | Type | Default |
|---|---|---|
Unique identifier for the collapsible. Auto-generated if not provided. | | |
Additional CSS classes to apply to the collapsible. | | - |
Additional HTML attributes to apply to the collapsible element. | | - |
Whether the collapsible is initially open. | | |
Trigger
Button that toggles the collapsible content. Automatically handles click events and keyboard navigation.
| Name | Type | Default |
|---|---|---|
Unique identifier for the trigger button. | | - |
Additional CSS classes to apply to the trigger button. | | - |
Additional HTML attributes to apply to the trigger button. | | - |
Content
Content that expands and collapses. Uses smooth height transitions for animations.
| Name | Type | Default |
|---|---|---|
Unique identifier for the content element. | | - |
Additional CSS classes to apply to the content container. | | - |
Additional HTML attributes to apply to the content element. | | - |
