Documentation
¶
Overview ¶
Package skeleton provides loading placeholder components.
Available variants:
- New() creates a skeleton line (template: "lvt:skeleton:default:v1")
- NewAvatar() creates avatar placeholder (template: "lvt:skeleton:avatar:v1")
- NewCard() creates card placeholder (template: "lvt:skeleton:card:v1")
Example usage:
// In your controller/state
Loading: skeleton.New("line-1",
skeleton.WithWidth("100%"),
skeleton.WithHeight("16px"),
)
// In your template
{{template "lvt:skeleton:default:v1" .Loading}}
Index ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func Templates ¶
func Templates() *base.TemplateSet
Templates returns the skeleton component's template set for registration with the LiveTemplate framework.
Example usage in main.go:
import "github.com/livetemplate/lvt/components/skeleton"
tmpl, err := livetemplate.New("app",
livetemplate.WithComponentTemplates(skeleton.Templates()),
)
Available templates:
- "lvt:skeleton:default:v1" - Basic skeleton line
- "lvt:skeleton:avatar:v1" - Circular avatar placeholder
- "lvt:skeleton:card:v1" - Card placeholder
Types ¶
type AvatarOption ¶
type AvatarOption func(*AvatarSkeleton)
AvatarOption is a functional option for avatar skeletons.
func WithAvatarBadge ¶
func WithAvatarBadge(show bool) AvatarOption
WithAvatarBadge shows or hides the status badge.
func WithAvatarSize ¶
func WithAvatarSize(size string) AvatarOption
WithAvatarSize sets the avatar size.
func WithAvatarStyled ¶
func WithAvatarStyled(styled bool) AvatarOption
WithAvatarStyled enables Tailwind CSS styling.
type AvatarSkeleton ¶
type AvatarSkeleton struct {
base.Base
// Size of the avatar (sm, md, lg, xl)
Size string
// ShowBadge shows a small circle for status
ShowBadge bool
}
AvatarSkeleton is a circular avatar placeholder.
func NewAvatar ¶
func NewAvatar(id string, opts ...AvatarOption) *AvatarSkeleton
NewAvatar creates an avatar skeleton.
Example:
a := skeleton.NewAvatar("user-avatar",
skeleton.WithAvatarSize("lg"),
)
func (*AvatarSkeleton) SizeClass ¶
func (a *AvatarSkeleton) SizeClass() string
SizeClass returns the CSS class for avatar size.
func (*AvatarSkeleton) Styles ¶
func (a *AvatarSkeleton) Styles() styles.AvatarSkeletonStyles
Styles returns the resolved AvatarSkeletonStyles for this component.
type CardOption ¶
type CardOption func(*CardSkeleton)
CardOption is a functional option for card skeletons.
func WithCardDescription ¶
func WithCardDescription(show bool, lines int) CardOption
WithCardDescription shows or hides description lines.
func WithCardFooter ¶
func WithCardFooter(show bool) CardOption
WithCardFooter shows or hides the footer area.
func WithCardImage ¶
func WithCardImage(show bool) CardOption
WithCardImage shows or hides the image placeholder.
func WithCardImageHeight ¶
func WithCardImageHeight(height string) CardOption
WithCardImageHeight sets the image height.
func WithCardStyled ¶
func WithCardStyled(styled bool) CardOption
WithCardStyled enables Tailwind CSS styling.
func WithCardTitle ¶
func WithCardTitle(show bool) CardOption
WithCardTitle shows or hides the title placeholder.
type CardSkeleton ¶
type CardSkeleton struct {
base.Base
// ShowImage shows image placeholder
ShowImage bool
// ImageHeight for image area
ImageHeight string
// ShowTitle shows title placeholder
ShowTitle bool
// ShowDescription shows description lines
ShowDescription bool
// DescriptionLines number of description lines
DescriptionLines int
ShowFooter bool
}
CardSkeleton is a card-shaped placeholder.
func NewCard ¶
func NewCard(id string, opts ...CardOption) *CardSkeleton
NewCard creates a card skeleton.
Example:
c := skeleton.NewCard("card-loading",
skeleton.WithCardImage(true),
skeleton.WithCardDescription(true, 3),
)
func (*CardSkeleton) DescLineIndices ¶
func (c *CardSkeleton) DescLineIndices() []int
DescLineIndices returns indices for description line rendering.
func (*CardSkeleton) IsLastDescLine ¶
func (c *CardSkeleton) IsLastDescLine(i int) bool
IsLastDescLine returns true if this is the last description line.
func (*CardSkeleton) Styles ¶
func (c *CardSkeleton) Styles() styles.CardSkeletonStyles
Styles returns the resolved CardSkeletonStyles for this component.
type Option ¶
type Option func(*Skeleton)
Option is a functional option for configuring skeletons.
func WithAnimation ¶
WithAnimation sets the animation type.
func WithLineHeight ¶
WithLineHeight sets the line height for multi-line spacing.
type Skeleton ¶
type Skeleton struct {
base.Base
// Width of the skeleton
Width string
// Height of the skeleton
Height string
// Shape of the skeleton
Shape Shape
// Animation type
Animation Animation
// Lines for multi-line skeletons
Lines int
// LineHeight for multi-line spacing
LineHeight string
}
Skeleton is a loading placeholder component. Use template "lvt:skeleton:default:v1" to render.
func New ¶
New creates a skeleton placeholder.
Example:
s := skeleton.New("loading",
skeleton.WithWidth("200px"),
skeleton.WithHeight("20px"),
)
func (*Skeleton) AnimationClass ¶
AnimationClass returns CSS class for animation.
func (*Skeleton) IsMultiLine ¶
IsMultiLine returns true if Lines > 1.
func (*Skeleton) LineIndices ¶
LineIndices returns indices for multi-line rendering.
func (*Skeleton) ShapeClass ¶
ShapeClass returns CSS class for the shape.
func (*Skeleton) Styles ¶
func (s *Skeleton) Styles() styles.SkeletonStyles
Styles returns the resolved SkeletonStyles for this component.
Source Files