Separator
Visual divider that separates content with an optional label.
TailwindCSS
Top
Bottom
package showcase
import "github.com/axzilla/templui/components"
templ SeparatorDefault() {
<div class="flex flex-col gap-4 items-center w-full max-w-md">
<p>Top</p>
@components.Separator()
<p>Bottom</p>
</div>
}
package components
import "github.com/axzilla/templui/utils"
type SeparatorOrientation string
type SeparatorDecoration string
const (
SeparatorOrientationHorizontal SeparatorOrientation = "horizontal"
SeparatorOrientationVertical SeparatorOrientation = "vertical"
)
const (
SeparatorDecorationNone SeparatorDecoration = "none"
SeparatorDecorationDashed SeparatorDecoration = "dashed"
SeparatorDecorationDotted SeparatorDecoration = "dotted"
)
type SeparatorProps struct {
ID string
Class string
Attributes templ.Attributes
Orientation SeparatorOrientation
Decoration SeparatorDecoration
Label string
}
templ Separator(props ...SeparatorProps) {
{{ var p SeparatorProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.Orientation == "" {
{{ p.Orientation = SeparatorOrientationHorizontal }}
}
<div
if p.ID != "" {
id={ p.ID }
}
role="separator"
aria-orientation={ string(p.Orientation) }
class={
utils.TwMerge(
"shrink-0",
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
getOrientationClasses(p.Orientation),
),
),
utils.If(p.Orientation == SeparatorOrientationHorizontal, "h-[1px] w-full"),
utils.If(p.Orientation == SeparatorOrientationVertical, "h-full w-[1px]"),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
getDecorationClasses(p.Decoration),
),
),
p.Class,
),
}
{ p.Attributes... }
>
if p.Label != "" && p.Orientation == SeparatorOrientationHorizontal {
<div class="relative flex items-center w-full">
<span
class={
utils.TwMerge(
"absolute w-full border-t",
getDecorationClasses(p.Decoration),
),
}
aria-hidden="true"
></span>
<span class="relative mx-auto bg-background px-2 text-xs text-muted-foreground">
{ p.Label }
</span>
</div>
} else if p.Label != "" && p.Orientation == SeparatorOrientationVertical {
<div class="relative flex flex-col items-center h-full">
<span
class={
utils.TwMerge(
"absolute h-full border-l",
getDecorationClasses(p.Decoration),
),
}
aria-hidden="true"
></span>
<span class="relative my-auto bg-background px-2 text-xs text-muted-foreground">
{ p.Label }
</span>
</div>
}
</div>
}
func getOrientationClasses(orientation SeparatorOrientation) string {
if orientation == SeparatorOrientationVertical {
return "border-l"
}
return "border-t"
}
func getDecorationClasses(decoration SeparatorDecoration) string {
switch decoration {
case SeparatorDecorationDashed:
return "border-dashed"
case SeparatorDecorationDotted:
return "border-dotted"
default:
return ""
}
}
Usage
@components.Separator(components.SeparatorProps{...})Examples
Vertical
Left
Right
package showcase
import (
"github.com/axzilla/templui/components"
)
templ SeparatorVertical() {
<div class="w-full max-w-md">
<div class="flex h-24 items-center">
<div class="w-1/2 text-center">Left</div>
@components.Separator(components.SeparatorProps{
Orientation: components.SeparatorOrientationVertical,
Class: "mx-4",
})
<div class="w-1/2 text-center">Right</div>
</div>
</div>
}
package components
import "github.com/axzilla/templui/utils"
type SeparatorOrientation string
type SeparatorDecoration string
const (
SeparatorOrientationHorizontal SeparatorOrientation = "horizontal"
SeparatorOrientationVertical SeparatorOrientation = "vertical"
)
const (
SeparatorDecorationNone SeparatorDecoration = "none"
SeparatorDecorationDashed SeparatorDecoration = "dashed"
SeparatorDecorationDotted SeparatorDecoration = "dotted"
)
type SeparatorProps struct {
ID string
Class string
Attributes templ.Attributes
Orientation SeparatorOrientation
Decoration SeparatorDecoration
Label string
}
templ Separator(props ...SeparatorProps) {
{{ var p SeparatorProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.Orientation == "" {
{{ p.Orientation = SeparatorOrientationHorizontal }}
}
<div
if p.ID != "" {
id={ p.ID }
}
role="separator"
aria-orientation={ string(p.Orientation) }
class={
utils.TwMerge(
"shrink-0",
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
getOrientationClasses(p.Orientation),
),
),
utils.If(p.Orientation == SeparatorOrientationHorizontal, "h-[1px] w-full"),
utils.If(p.Orientation == SeparatorOrientationVertical, "h-full w-[1px]"),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
getDecorationClasses(p.Decoration),
),
),
p.Class,
),
}
{ p.Attributes... }
>
if p.Label != "" && p.Orientation == SeparatorOrientationHorizontal {
<div class="relative flex items-center w-full">
<span
class={
utils.TwMerge(
"absolute w-full border-t",
getDecorationClasses(p.Decoration),
),
}
aria-hidden="true"
></span>
<span class="relative mx-auto bg-background px-2 text-xs text-muted-foreground">
{ p.Label }
</span>
</div>
} else if p.Label != "" && p.Orientation == SeparatorOrientationVertical {
<div class="relative flex flex-col items-center h-full">
<span
class={
utils.TwMerge(
"absolute h-full border-l",
getDecorationClasses(p.Decoration),
),
}
aria-hidden="true"
></span>
<span class="relative my-auto bg-background px-2 text-xs text-muted-foreground">
{ p.Label }
</span>
</div>
}
</div>
}
func getOrientationClasses(orientation SeparatorOrientation) string {
if orientation == SeparatorOrientationVertical {
return "border-l"
}
return "border-t"
}
func getDecorationClasses(decoration SeparatorDecoration) string {
switch decoration {
case SeparatorDecorationDashed:
return "border-dashed"
case SeparatorDecorationDotted:
return "border-dotted"
default:
return ""
}
}
Label
OR
OR
package showcase
import "github.com/axzilla/templui/components"
templ SeparatorLabel() {
<div class="flex flex-col gap-16 w-full max-w-md items-center">
@components.Separator(components.SeparatorProps{
Label: "OR",
})
@components.Separator(components.SeparatorProps{
Class: "h-24",
Orientation: components.SeparatorOrientationVertical,
Label: "OR",
})
</div>
}
package components
import "github.com/axzilla/templui/utils"
type SeparatorOrientation string
type SeparatorDecoration string
const (
SeparatorOrientationHorizontal SeparatorOrientation = "horizontal"
SeparatorOrientationVertical SeparatorOrientation = "vertical"
)
const (
SeparatorDecorationNone SeparatorDecoration = "none"
SeparatorDecorationDashed SeparatorDecoration = "dashed"
SeparatorDecorationDotted SeparatorDecoration = "dotted"
)
type SeparatorProps struct {
ID string
Class string
Attributes templ.Attributes
Orientation SeparatorOrientation
Decoration SeparatorDecoration
Label string
}
templ Separator(props ...SeparatorProps) {
{{ var p SeparatorProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.Orientation == "" {
{{ p.Orientation = SeparatorOrientationHorizontal }}
}
<div
if p.ID != "" {
id={ p.ID }
}
role="separator"
aria-orientation={ string(p.Orientation) }
class={
utils.TwMerge(
"shrink-0",
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
getOrientationClasses(p.Orientation),
),
),
utils.If(p.Orientation == SeparatorOrientationHorizontal, "h-[1px] w-full"),
utils.If(p.Orientation == SeparatorOrientationVertical, "h-full w-[1px]"),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
getDecorationClasses(p.Decoration),
),
),
p.Class,
),
}
{ p.Attributes... }
>
if p.Label != "" && p.Orientation == SeparatorOrientationHorizontal {
<div class="relative flex items-center w-full">
<span
class={
utils.TwMerge(
"absolute w-full border-t",
getDecorationClasses(p.Decoration),
),
}
aria-hidden="true"
></span>
<span class="relative mx-auto bg-background px-2 text-xs text-muted-foreground">
{ p.Label }
</span>
</div>
} else if p.Label != "" && p.Orientation == SeparatorOrientationVertical {
<div class="relative flex flex-col items-center h-full">
<span
class={
utils.TwMerge(
"absolute h-full border-l",
getDecorationClasses(p.Decoration),
),
}
aria-hidden="true"
></span>
<span class="relative my-auto bg-background px-2 text-xs text-muted-foreground">
{ p.Label }
</span>
</div>
}
</div>
}
func getOrientationClasses(orientation SeparatorOrientation) string {
if orientation == SeparatorOrientationVertical {
return "border-l"
}
return "border-t"
}
func getDecorationClasses(decoration SeparatorDecoration) string {
switch decoration {
case SeparatorDecorationDashed:
return "border-dashed"
case SeparatorDecorationDotted:
return "border-dotted"
default:
return ""
}
}
Decorated
DASHED
DOTTED
package showcase
import "github.com/axzilla/templui/components"
templ SeparatorDecorated() {
<div class="flex flex-col gap-16 w-full max-w-md">
@components.Separator(components.SeparatorProps{
Decoration: components.SeparatorDecorationDashed,
Label: "DASHED",
})
@components.Separator(components.SeparatorProps{
Decoration: components.SeparatorDecorationDotted,
Label: "DOTTED",
})
</div>
}
package components
import "github.com/axzilla/templui/utils"
type SeparatorOrientation string
type SeparatorDecoration string
const (
SeparatorOrientationHorizontal SeparatorOrientation = "horizontal"
SeparatorOrientationVertical SeparatorOrientation = "vertical"
)
const (
SeparatorDecorationNone SeparatorDecoration = "none"
SeparatorDecorationDashed SeparatorDecoration = "dashed"
SeparatorDecorationDotted SeparatorDecoration = "dotted"
)
type SeparatorProps struct {
ID string
Class string
Attributes templ.Attributes
Orientation SeparatorOrientation
Decoration SeparatorDecoration
Label string
}
templ Separator(props ...SeparatorProps) {
{{ var p SeparatorProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.Orientation == "" {
{{ p.Orientation = SeparatorOrientationHorizontal }}
}
<div
if p.ID != "" {
id={ p.ID }
}
role="separator"
aria-orientation={ string(p.Orientation) }
class={
utils.TwMerge(
"shrink-0",
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
getOrientationClasses(p.Orientation),
),
),
utils.If(p.Orientation == SeparatorOrientationHorizontal, "h-[1px] w-full"),
utils.If(p.Orientation == SeparatorOrientationVertical, "h-full w-[1px]"),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
getDecorationClasses(p.Decoration),
),
),
p.Class,
),
}
{ p.Attributes... }
>
if p.Label != "" && p.Orientation == SeparatorOrientationHorizontal {
<div class="relative flex items-center w-full">
<span
class={
utils.TwMerge(
"absolute w-full border-t",
getDecorationClasses(p.Decoration),
),
}
aria-hidden="true"
></span>
<span class="relative mx-auto bg-background px-2 text-xs text-muted-foreground">
{ p.Label }
</span>
</div>
} else if p.Label != "" && p.Orientation == SeparatorOrientationVertical {
<div class="relative flex flex-col items-center h-full">
<span
class={
utils.TwMerge(
"absolute h-full border-l",
getDecorationClasses(p.Decoration),
),
}
aria-hidden="true"
></span>
<span class="relative my-auto bg-background px-2 text-xs text-muted-foreground">
{ p.Label }
</span>
</div>
}
</div>
}
func getOrientationClasses(orientation SeparatorOrientation) string {
if orientation == SeparatorOrientationVertical {
return "border-l"
}
return "border-t"
}
func getDecorationClasses(decoration SeparatorDecoration) string {
switch decoration {
case SeparatorDecorationDashed:
return "border-dashed"
case SeparatorDecorationDotted:
return "border-dotted"
default:
return ""
}
}