Components

bibui's components are plain functions in the Bibui.Core.Runtime namespace. Each one builds a few boxes and texts under the parent in scope and returns what happened to them this frame. None of them owns state, and none of them has a renderer of its own: the ordinary painter draws every one.

Inputs

ButtonA labelled button, solid or ghostBibuiWidget SwitchAn on/off switch whose knob travelsBibuiWidget CheckboxA square with a check or a dash, and a labelBibuiWidget RadioGroupA column of options, one chosenRadioGroupWidget Toggle and ToggleGroupA button that stays pressed, and a segmented controlBibuiWidget, ToggleGroupWidget SliderA value on a trackSliderWidget SelectA trigger that opens a listSelectScope → Box TextFieldSingle-line, ellipsis and multi-line text, and the input lookBibuiWidget

Structure

TabsA strip of tabs and the panel under itTabsWidget, Box ExpanderAn outlined frame whose header opens a bodyExpanderWidget SectionA caption over a groupBox SeparatorA line between thingsBox ScrollbarA bar beside a view that scrollsBibuiWidget

Overlays

DialogA modal panel on a scrim: centred, sheet or drawerDialogScope → DialogWidget MenuA dropdown or context menu of actionsMenuScope → BibuiWidget PopoverA raised panel under a triggerPopoverScope → BibuiWidget TooltipOne line of text over a triggerBox

Display

BadgeA pill with a short labelBox AvatarInitials on a circleBox KeyboardShortcutKeycaps for a keyboard shortcutBox ProgressA filled share of a trackBox MarkdownA read-only Markdown viewerMarkdownWidget Text, Icon and SpinnerThe runtime's own leavesText, Icon, Spinner

New to bibui? Start with Getting started. The ideas this page takes for granted, such as boxes, sizes, asks and retained boxes, are in Concepts. For colours and tokens, see Theming.

#How every component works

All the components follow the same rules. Once you know them, a signature tells you most of what a component does.

• You call it from your build function, every frame. runtime.Checkbox(…) links the checkbox under the parent in scope (the box you began with runtime.BeginParent), or you place the node it returns yourself.
• The id names its retained boxes. Any part that takes a press is a retained box (runtime.BoxFromId), so it keeps its hover and press state from frame to frame. Ids must be unique among the boxes built in a frame. Components that have rows name them {id}-{value}.
• Your state goes in by value, and what happened comes back. A checkbox is given on and reports Clicked. It never flips on itself; you do that. Nothing is a callback.
• Labels are ReadOnlySpan<char>. Pass a string, a slice, or text formatted into a stack buffer: the label is copied, so it may change as soon as the call returns. A BibuiStr is only for text the user edits.
• Disabled is a claim. A disabled control still takes the press but reports nothing, so the press does not fall through to whatever is beneath it.
• Ask order is z-order. A component asks about its boxes when you call it. The first box to ask for a point gets it. So build an overlay before the content under it, and a container after the controls inside it. Dropdown roots (Select, Menu, Popover, Dialog) are the exception: they win over everything, whenever they ask.
• Colours are tokens. A component never takes a ThemeTokens. It names tokens such as UiColor.Accent, which the painter resolves against the mounted theme. Each page lists the tokens its component reads.

#What comes back

Most controls return a BibuiWidget:

Components that pick one of several values return their own record with a Picked value, such as RadioGroupWidget and TabsWidget. Overlays that you fill between Begin and End return a scope, and End() gives the result.

#The examples

Each example on these pages is a whole C# file that compiles against the Bibui.Core package. The caller's state is in the fields of a small class, and its Build(runtime) method is meant to be called from your build function every frame. Each screenshot is the reference picture of a fixture in bibui's pixel verification suite, which checks every component against its pictures on each change. Each page names the fixture it shows.