Built-in Components

Related documents

• Component Overview
• Component Reference
• Template Markup Language (TML) Reference

Table of Contents

• Introduction
• Basic Components
• Page Components
  • Pages
  • Page Column and Card Components
  • Card row components
• Input/Output Components
• Navigation Components
• Framework Components

Introduction

MVCS has many built-in Components. Some components are part of state variable implementations and are not available for use seprately. The components listed here are published components available for use with a string tag. Some of these components are intended as subcomponents for other component implementations or in state variables.

Basic Components

These component are available to genreal page content.

• Button
  Renders a button with support for UI logging and testing.
• Caution
  Displays its contents with an amber caution color.
• Fragment
  Groups children into a single component. Not required in MVCS.
• HideWhen
  Hides its contents whenever any of a set of state variables have truthy values.
• NbSpan
  Renders its content within a non-breaking <span>.
• ShowWhen
  Displays its contents whenever any of a set of state variables have truthy values.
• Table
  Displays a table from an array.
• Warning
  Displays its contents with a red warning color.
• When
  Rerenders its contents dynamically whenever a set of state variables change.
• With
  Renders its children within a separate tag namespace.

Page Components

Page components specify the page layout and organize the content within the page.

Pages

• ListPage
ListPage components display a scrollable list on the left and an area for general page content on the right. The selection in the list controls what's displayed in the content area.
• OverlayPage
  Overlay pages are pages that completely overlay the underlying content, taking over the entire viewport. They overlay the standard navigation and must provide their own dismissal mechanism. Overlay pages are intended for use as the topmost popup.
• Page
  The Page component provides general page content. It may have one or more Card components or other content.

Page Column and Card Components

• Card
  A rectangular area for content.
• PageCol
  A container for Card components and other content within the same column. If the page is only wide enough for one column, the PageCol content will appear serially. If the page is wide enough for two columns, the PageCol content will appear side by side with a small gutter in between.
• RowCard
  A rectangular area for rows of content.

Card row components

• Cr
  A content row
• Cl
  A label for content within a row.
• Cm
  A message that is associated with a row.
• Ct
  A tip that is associated with a row label.
• Cv
  A content value within a row.

Input/Output Components

Most input/output is handled by state variables and the components built into them. These components are used by some state variable implementations and can be used to build more sophisticated components and state variable implementations. They are not intended for general use on pages.

• EditListSelector
  A selectable and user-editable list of options.
• IoSvComponent
  A component to be used as a superclass for all Input or Output SV type implementations.
• ListSelector
  A selectable list of options.
• NumInput
  Renders a numeric input with formatting and validation.
  Provides a choice of input mechanisms: keyboard, popup keypad, and popup thumbwheels
• NumOutput
  Renders a numeric output with formatting.
• Selector
  Renders a selector that chooses one of multiple options.
  Provides a choice of radio buttons or a dropdown selector.

Navigation Components

• Ref
  A reference link to another page. Clicking the link causes the target page to be displayed as a popup page.

Framework Components

The following components are built into TML or the component-building process. These are rarely used directly for page rendering:

• Html
  Creates normal HTML elements.
• CharEntity
  Custom HTML entities.
• StateVar
  Renders a state varable.
• svg
  A special component for handling SVG and SVG child tags. It bypasses creating child components and directly fills the SVG DOM element with the SVG contents as a string for the DOM to interpret.
• Text
  Displays text.