Cr Component Reference

Related documents

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

Table of Contents

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

Introduction

Syntax

tml`
	<Cr>
		...
	</Cr>
`

The Cr component represents a row in RowCard Component. It can contain pairs of Cl (label) and Cv (value) components, but it can contain other components instead. It may also contain a Cm (message) component, which is rendered below the other content in the row.

The Cr component inherits the colStyle and rowStyle attributes from its parent RowCard component. However, the Cr component's colStyle and rowStyle attributes may override this.

The Cr component also supports show and hide attributes. When these are used, the Cr component will show or hide the entire row when conditions specified by the show or hide attributes are true. These attributes take the same values as the hasValue attribute for ShowWhen.

Attributes

• Standard properties
  The Cr component accepts the standard attributes.

• colStyle (optional)
  The default horizontal layout of row information. The built-in values may be:

  • LV1 (default)
    One pair of labels and values.
  • LV2
    Two pairs of labels and values.

• hide
hide is equivalent to wrapping the row in:

      <HideWhen hasValue=${this.props.hide}>row contents</>
  

  As with <HideWhen>, the hide attribute will hide the row if any of the state variables specified by the hide attribute has a truthy value. The hide attribute can accept the same values as the hasValue attribute for the HideWhen Component:

  • A string containing the comma-separated public state variable IDs.
  • A View or Model type StateVar object.
  • A RegExp to match against a state variable ID.
  • A function that takes a single state variable argument. The function returns true if the state variable should be monitored for change
  • An array of a mix of ID strings, View or Model type StateVar objects, and SvMonitor objects.

  The hide attribute will accept the output of SV.find(). Any argument acceptable to SV.find() is acceptable as a value of the hide attribute.

• rowStyle (optional)
  The default vertical height of row information. The built-in values may be:

  • input (default)
    A height that allows a user to select and change an input value on the row (typically 40px or more).
  • LV2
    A lower row height than input that provides higher information density.

• show
show is equivalent to wrapping the row in:

      <ShowWhen hasValue=${this.props.show}>row contents</>
  

  As with <ShowWhen>, the show attribute will show the row if any of the state variables specified by the hide attribute has a truthy value. The show attribute can accept the same values as the hasValue attribute for the ShowWhen Component. See the hide attribute.

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 Cr component accepts pairs of Cl (label) and Cv (value) components, or other children. It accepts a single Cm (message) component.

DOM element properties

The Cr Component renders differently depending on whether show or hide attributes prevent row rendering, or a Cm component is present in the children.

If the show or hide attributes prevent row rendering, then the component will render a marker <span>; see the When Component Reference.

If there is a Cm component in the children:

• The Cr Component will render a <div>.
• The <div> data-cid attribute will have the Cr component ID.
• The <div> will have a CSS class name with card_row, card_row-rowStyle-${rowStyle}, card_row-colStyle-${colStyle}, and any className attributes supplied with to the Cr component.
• The <div> will contain a <div> containing the Cl and Cv children, followed by the Cm component (also a div). See Cm (message).
• The first child <div> will have a CSS class name with card_row-main.

If there is no Cm component in the children, the row content is combined into a single div:

• The Cr Component will render a <div> that contains the component children.
• The <div> data-cid attribute will have the Cr component ID.
• The <div> will have a CSS class name with card_row, card_row-main, card_row-rowStyle-${rowStyle}, card_row-colStyle-${colStyle}, and any className attributes supplied with to the Cr component.

Styling

By default, each row within a Card is separated by a var(--main-fill-color) line.

By default, the card_row-main <div>, is styled using a flexbox. Each Cl and Cv element will grow and shrink to share the space equally. The app can change the width of the columns in a specific Card by adding a className for the card and adjusting the flexbox parameters for a specific child in the page's CSS file. For example:

Template returned by myPage's render() function in myPage.js:

<Page>
	<Card className=myCard>
		<Cr>
			<Cl>Label 1A</> <Cv>Value 1A</> 
			<Cl>Label 1B</> <Cv>Value 1B</>
		</Cr>
		<Cr>
			<Cl>Label 2A</> <Cv>Value 2A</> 
			<Cl>Label 2B</> <Cv>Value 2B</>
		</Cr>
	</Card>
</Page

Note: the container for myPage has class myPage. In myPage.css:

.myPage .myCard .card_label:first-child {
	/* fix the first column at 35% of the row width */
	flex: 0 0 35%;
}