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 CardRow 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).
  • LV2
    A lower row height than input that provides higher information density.
• title (optional)
  A string to be displayed above the Card as the card title.

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.props.RowCard.colStyle or this.props.RowCard.rowStyle.

The colStyle and rowStyle are used to set two CSS class names in the enclosing <div>: card_row-rowStyle-${rowStyle} and card_row-colStyle-${colStyle}. 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

All children must be Cr Components.

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 card_row-rowStyle-${rowStyle} and card_row-colStyle-${colStyle}.