README
¶
CountBadge
Notification bubble: a count riding the top-end corner of the button that
owns it. Out of the flow (OnEdge), so the host keeps its box whether the
bubble shows "1", "99" or nothing at all.
Import
"github.com/tinywasm/components/countbadge"
Usage
import "github.com/tinywasm/components/countbadge"
count := dom.NewString("0")
visible := dom.NewBool(false)
span := (&countbadge.CountBadge{Count: count, Visible: visible}).Render()
Properties
Count(*dom.SignalString): The number to show, as text. A signal because the count changes without re-rendering the host.Visible(*dom.SignalBool): Whether the bubble paints. Showing "0" is noise — wire something false at zero (e.g.n > 0).
Host contract
The host button must be an Anchor (style.Anchor() — position: relative, zero visual change) so the bubble resolves against the button,
not the page.
Documentation
¶
Index ¶
Constants ¶
const NameCountBadge = widget.Name("countbadge")
NameCountBadge is the widget name for countbadge.
const ( // PartBadge is the bubble itself. It straddles the host's top-end // corner (see css.go); the host must be an Anchor — position: relative — // so the bubble resolves against the button, not the page. PartBadge = widget.Part("badge") )
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type CountBadge ¶
type CountBadge struct {
Element
Count *SignalString
Visible *SignalBool
}
CountBadge is a notification bubble: a count riding the top-end corner of the button that owns it. Out of the flow by construction (OnEdge), so the host keeps its box whether the bubble shows "1", "99" or nothing at all.
Both signals are required:
- Count is the number to show, as text. It is a signal (not a string) because the count changes without re-rendering the host.
- Visible decides whether the bubble paints. Showing "0" is noise — a disabled commit button already says there is nothing to confirm — so wire something that is false at zero (e.g. n > 0), not the mode.
func (*CountBadge) Render ¶
func (b *CountBadge) Render() *Element
func (*CountBadge) RenderCSS ¶
func (b *CountBadge) RenderCSS() *css.Stylesheet
RenderCSS defines the countbadge visual contract using the style DSL.
The bubble is OnEdge(EdgeTop, SideEnd): centred on the host's top-end corner, half outside and half inside — the notification-bubble placement. OnEdge is absolute, so the host's box never depends on the count; that is the whole point of this component (an in-flow counter stretches its button the moment it appears).
As(AccentInverse): amber on a Primary button, the same language the toggle button speaks while open. No ChipBox: a bubble shrink-wraps its own figure — "7" is round, "128" is a pill — instead of lining up with a column that does not exist here.
func (*CountBadge) WidgetKind ¶
func (b *CountBadge) WidgetKind() widget.Kind
func (*CountBadge) WidgetName ¶
func (b *CountBadge) WidgetName() widget.Name
Source Files