Skip to content

Hover Group

A hover group shows one view and fades to a second view while the mouse pointer is over it, e.g. to reveal actions on a card. Both views are placed on top of each other, so give the group and both views the same explicit size. Touch devices have no hover, so do not hide anything essential in the second view.

Hover Group

The screenshot shows the hovered state; without hover the group shows “Hover me”.

HoverGroup(
	VStack(Text("Hover me")).Frame(Frame{}.Size(L200, L120)),
	VStack(
		Text("More details"),
		PrimaryButton(nil).Title("Open"),
	).Gap(L8).Frame(Frame{}.Size(L200, L120)),
).BackgroundColor(M2).
	Border(Border{}.Radius(L16)).
	Frame(Frame{}.Size(L200, L120))

Constructors

ConstructorDescription
func HoverGroup(content core.View, hoveredContent core.View) THoverGroupHoverGroup creates a new hover group with default and hovered content.

Methods

MethodDescription
BackgroundColor(color Color) THoverGroupBackgroundColor sets the background color of the hover group.
Border(border Border) THoverGroupBorder sets the border styling of the hover group.
Frame(frame Frame) THoverGroupFrame sets the layout frame of the hover group.
Padding(padding Padding) THoverGroupPadding sets the inner spacing around the hover group’s content.
Position(position Position) THoverGroupPosition sets the position of the hover group.

Related