Cm Component Reference

Related documents

• Component Overview
• Component Reference
• Built-in Components
• Template Markup Language (TML) Reference
• Cr Component Reference

Table of Contents

• Introduction
• Attributes
• Instance methods
  • Inherited methods
• Children
• DOM element properties

Introduction

Syntax

tml`
	<Cm>message content</Cm>
	<Cm hasMsg=stateVarName>message content</>
	<Cm hasMsg=stateVarName />
`

The Cm component represents a message within a Cr Component (a row within a Card). It displays a message that spans the row under the row content but within the row boundaries. By default, the message is indented by the width of the first label in the row to visually align the message with the computed values.

The Cm component can have a hasMsg attribute, which must have a single state variable
ID as the value. If the state variable specified by hasMsg has a truthy value, then the message is displayed. Otherwise, the message is hidden and the message area within the row disappears. If a Cm component has a hasMsg attribute but no children, then the value of the state variable specified by hasMsg is used as the message when not null. So:

<Cm hasMsg=stateVarName />

is equivalent to:

<Cm hasMsg=stateVarName>{{|stateVarName|}}</Cm>

Attributes

• Standard properties
  The Cm component accepts the standard attributes.
• hasMsg (optional)
  The hasMsg attribute, must be the ID os an existing state variable. If the state variable has value, the message is displayed. If the Cm component has no content then the value of the hasMsg state variable is used as then content.
• fullSpan (optional)
  If the fullSpan attribute is present or truthy, then the message will span the entire row. Otherwise, the message will be indented by the width of the first Cl (label) element in the row.

Instance methods

These methods are intended to be used by parent components to dynamically change the properties of the rendered components without re-rendering.

Inherited methods

• Component methods

Children

The Cm component accepts any content. However, the Cm component is intended for short messaged within a row. Large messages will likely make the row appear odd.

DOM element properties

If the hasMsg attribute is present and prevents row rendering, then the component will render a marker <span>; see the When Component Reference. If the hasMsg attribute is not present and the component has no children, then nothing is rendered.

If there is a message:

• The Cm component will render a <div> that follows the <div> that contains the row label and value content within the Cr component.
• The <div> will have a CSS class name with card_row-msg.
• If the fullSpan attribute is present and truthy, then the card_row-msg <div> will contain two other <div> elements: a <div> with a class name of card_label, followed by a <div> with a class name of card_message and any className attributes supplied with to the Cm component.
• If the fullSpan attribute is not present or falsey, then the card_row-msg <div> will contain a <div> with a class name of card_message and any className attributes supplied with to the Cm component.