Avatar
Visual representation of a user through images or initials.
TailwindCSS
Vanilla JS
package showcase
import "github.com/axzilla/templui/internal/components/avatar"
templ AvatarDefault() {
@avatar.Avatar() {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
})
}
}
Installation
Install the component
templui add avatarAdd the JavaScript to your layout
@avatar.Script()Call this template in your base layout file (e.g., in the <head> section).
Examples
Fallback
JDpackage showcase
import "github.com/axzilla/templui/internal/components/avatar"
templ AvatarFallback() {
@avatar.Avatar() {
@avatar.Image(avatar.ImageProps{
// simulate a broken image
Src: "broken-image.jpg",
})
@avatar.Fallback() {
{ avatar.Initials("John Doe") }
}
}
}
Sizes
package showcase
import "github.com/axzilla/templui/internal/components/avatar"
templ AvatarSizes() {
<div class="flex flex-wrap gap-2">
@avatar.Avatar(avatar.Props{
Size: avatar.SizeSm,
}) {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
})
}
@avatar.Avatar() {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
})
}
@avatar.Avatar(avatar.Props{
Size: avatar.SizeLg,
}) {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
})
}
</div>
}
With Icon
package showcase
import (
"github.com/axzilla/templui/internal/components/avatar"
"github.com/axzilla/templui/internal/components/icon"
)
templ AvatarWithIcon() {
@avatar.Avatar(avatar.Props{
Class: "bg-purple-300",
}) {
@icon.Camera(icon.Props{
Size: 22,
Color: "white",
})
}
}
Group
+2
package showcase
import "github.com/axzilla/templui/internal/components/avatar"
templ AvatarGroup() {
@avatar.Group(avatar.GroupProps{
Spacing: avatar.GroupSpacingLg,
}) {
@avatar.Avatar(avatar.Props{
InGroup: true,
}) {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
})
}
@avatar.Avatar(avatar.Props{
InGroup: true,
}) {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
})
}
@avatar.Avatar(avatar.Props{
InGroup: true,
}) {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
})
}
@avatar.GroupOverflow(2, avatar.Props{
InGroup: true,
}) {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
})
}
}
}