UI Elements

The form controls plugins are made of, which an app passes to init and may replace.

Objects

elements

const elements: {
  Alert: (__namedParameters) => Element;
  AutoComplete: (__namedParameters) => Element;
  Button: (__namedParameters) => Element;
  ButtonGroup: (__namedParameters) => Element;
  Checkbox: (__namedParameters) => Element;
  Collapse: (__namedParameters) => Element;
  Dropdown: (__namedParameters) => Element;
  Group: (__namedParameters) => Element;
  Input: ForwardRefExoticComponent<InputProps & RefAttributes<InputRef>>;
  Label: IStyledComponentBase<"web", Merged<WithCSSVars<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
     bold?: boolean;
     ellipsis?: boolean;
     highlighted?: boolean;
  }>> & string;
  Mentions: MentionsT;
  Menu: (__namedParameters) => Element;
  MenuItem: (__namedParameters) => Element;
  Select: ForwardRefExoticComponent<{
     children?: any[];
  } & SelectProps<any, DefaultOptionType> & RefAttributes<BaseSelectRef>>;
  Selection: (__namedParameters) => Element;
  Slider: (__namedParameters) => Element;
  TabPane: (__namedParameters) => Element;
  Tabs: (__namedParameters) => Element;
  Tooltip: (props) => Element;
};

The form controls buerli's plugins are made of (buttons, inputs, selects, sliders, tabs, …), on antd.

Plugins, such as the feature dialogs of @buerli.io/react-cad, take their controls from init's elements option, so an app passes a set there: these, or elements from @buerli.io/react-cad in the app's own look, or controls of its own with the same props.

Type Declaration

Name	Type	Description
Alert()	(__namedParameters) => Element	A message box (antd Alert).
AutoComplete()	(__namedParameters) => Element	A text input with suggestions (antd AutoComplete).
Button()	(__namedParameters) => Element	A button (antd Button), full width, or small with an icon.
ButtonGroup()	(__namedParameters) => Element	Buttons side by side.
Checkbox()	(__namedParameters) => Element	A checkbox (antd Checkbox).
Collapse()	(__namedParameters) => Element	A section that opens and closes (antd Collapse).
Dropdown()	(__namedParameters) => Element	A dropdown menu (antd Dropdown).
Group()	(__namedParameters) => Element	A row (or, with format="Columns", a column) of controls.
Input	ForwardRefExoticComponent<InputProps & RefAttributes<InputRef>>	A text or number input (antd Input).
Label	IStyledComponentBase<"web", Merged<WithCSSVars<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, { bold?: boolean; ellipsis?: boolean; highlighted?: boolean; }>> & string	A label in front of a control.
Mentions	MentionsT	A text input with suggestions after a prefix such as @ (antd Mentions), for expressions.
Menu()	(__namedParameters) => Element	A menu (antd Menu).
MenuItem()	(__namedParameters) => Element	An entry of elements.Menu.
Select	ForwardRefExoticComponent<{ children?: any[]; } & SelectProps<any, DefaultOptionType> & RefAttributes<BaseSelectRef>>	A dropdown to choose from (antd Select); its children are the options, as strings.
Selection()	(__namedParameters) => Element	A field that shows what a selector has selected, and activates the selector when clicked.
Slider()	(__namedParameters) => Element	A slider (antd Slider).
TabPane()	(__namedParameters) => Element	A tab of elements.Tabs.
Tabs()	(__namedParameters) => Element	Tabs (antd Tabs).
Tooltip()	(props) => Element	A tooltip (antd Tooltip).

Example

import { init, WASMClient } from '@buerli.io/classcad'
import { elements } from '@buerli.io/react'

init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }), { elements })

Advanced

Most apps do not need these directly: types they meet through the exports above, and what is there for special cases or for building on buerli itself.

ReactElements

type ReactElements = typeof elements;

The shape of a set of form controls for init's elements option: the components of elements.

Example

The stock controls with the app's own button in place of antd's:

import { init, WASMClient } from '@buerli.io/classcad'
import { elements, type ReactElements } from '@buerli.io/react'

declare const AppButton: ReactElements['Button']

const appElements: ReactElements = { ...elements, Button: AppButton }
init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }), { elements: appElements })