Builtin-Components

In order to provide you with an arsenal of widgets to build your views, the backend-ui module comes with plenty of already built-in components. The main goal is to achieve more functionality by writing less code in recurring situations.

All builtin Components

• ActionButton

  Triggers a server-side action on click and handles the response's result.

  ActionButton Reference 🡕

• Button

  Simple button with support for icons and some styling quirks.

  Button Reference 🡕

• Calendar

  Calendar widget for displaying months and selecting dates.

  Calendar Reference 🡕

• CheckBox

  Controlled checkbox component with label support.

  IconButton reference 🡕

• CircularCountdown

  Displays a circular countdown animation.

  IconButton reference 🡕

• DateInput

  Date input with optional calendar button.

  IconButton reference 🡕

• Dialog

  Displays content in an elevated modal container. Is controlled by refering to it and using it's methods.

  IconButton reference 🡕

• Divider

  A simple horizontal or vertical line.

  IconButton reference 🡕

• FileDropZone

  Provides a div which handles file drop- or click selection. You have to manage the upload yourself.

  FileDropZone reference 🡕

• FileUploadControl

  Provides an upload button with automatic upload through the progressive-upload-client from the Chunked-Fileupload module.

  FileUploadControl reference 🡕

• HLayout

  Arranges child elements in a flexbox row.

  HLayout reference 🡕

• Icon

  Displays a pre-defined icon by name, or from custom SVG content. To see a list of all available icons, see the Icon reference.

  Icon reference 🡕

• IconButton

  Clickable version of the Icon component.

  IconButton reference 🡕

• LinearAnimation

  Displays a horizontal loading bar with animated duration.

  LinearAnimation reference 🡕

• ListView

  Renders given items as a vertical list.

  ListView reference 🡕

• LoadingAnimation

  Renders the CircularCountdown behind the given element.

  LoadingAnimation reference 🡕

• NumberInput

  Accepts numbers within the given range and has style helpers for up- and down arrows.

  NumberInput reference 🡕

• PinInput

  Offers a multi digit or character input for 2FA codes.

  PinInput reference 🡕

• PopUp

  Displays content in an elevated container.

  PopUpInput reference 🡕

• ProgressIndicator

  ProgressIndicator reference 🡕

• ScreenFormLayout ScreenFormLayout reference 🡕

• Section Section reference 🡕

• SelectWithDialog SelectWithDialog reference 🡕

• Switch

  Modern checkbox alike toggle component.

  Switch reference 🡕

• TableView

  Table view for rows with cell render callbacks, filter and search helpers and pagination support.

  TableView reference 🡕

• Text

  Component to display static, generated or Translation-dictionary based text.

  Text reference 🡕

• TextArea

  Simple wrapper for a textarea element to control it's value.

  TextArea reference 🡕

• TextInput

  Controlled text input wrapper component.

  TextInput reference 🡕

• TimeInput

  Input for HH:MM values.

  TimeInput reference 🡕

• Toggle

  Same as CheckBox but with a round icon for radio inputs.

  Toggle reference 🡕

• TopBar TopBar reference 🡕

• Translations Translations reference 🡕

• VLayout

  Arranges child elements in a flxbox column.

  VLayout reference 🡕

• ViewSlider

  Component to display a slideshow alike carussel.

  ViewSlider reference 🡕

Custom Components

You can always create your own components, when the builtin-components are not enough for your usecase. See the Custom Components section for more details.