RowCard Component Reference

Related documents

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

Table of Contents

• Introduction
• Attributes
  • Using colStyle and rowStyle attributes
• Children
• DOM element properties

Introduction

Syntax

tml`
	<RowCard>
		...
	</RowCard>
`

The RowCard component creates a <div> element for a rectangular area for related content within a <Page>. The content is organized as rows of information. Each row may be organized as zero or more pairs of labels and values. The labels and values will be horizontally aligned, if possible.

Typically, the RowCard children are Cr (row) components that, in turn, contain Cl (label) and Cv (value) components. For example:

tml`
	<RowCard title="My card">
		<Cr>
			<Cl>Label 1</>
			<Cv>Value 1</>
		</Cr>
		<Cr>
			<Cl>Label 2</>
			<Cv>Value 2</>
		</Cr>
	</RowCard>
`

Attributes

• Standard properties
  The Card 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.
• 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).
  • output
    A lower row height than input that provides higher information density.
• title (optional)
  A string (or array of strings/templates, as for Card) to be displayed above the Card as the card title. Required by convention, but not enforced.

Using colStyle and rowStyle attributes

The RowCard component uses create a RowCard object in contextProps. The RowCard object contains colStyle and rowStyle as properties. This makes the current colStyle and rowStyle available to any descendant of the RowCard as this.contextProps.RowCard.colStyle or this.contextProps.RowCard.rowStyle.

The RowCard adds two CSS class names to the card <div> (when the attributes are given): rowCard-${rowStyle} and rowCard-${colStyle}. Each Cr row then applies card_row-rowStyle-${rowStyle} and card_row-colStyle-${colStyle} to its own <div>, using its own rowStyle/colStyle if given, else the RowCard's. Applications can use their own CSS to modify the behavior of the built-in style strings, or add new strings. The default CSS behavior for colStyle and rowStyle is described in Cr Component Reference.

Children

Children are normally Cr Components; Crn Components (row notes) are also allowed. The child types are not enforced.

DOM element properties

• The Card Component will render a <div> with the card children as its children.
• The <div> will have a CSS class name with the string card and also rowCard-${rowStyle} and rowCard-${colStyle} when rowStyle/colStyle are given.