Button Component Reference

Related documents

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

Table of Contents

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

Introduction

Syntax

tml`<Button text="Button text"/>`
tml`<Button>Button text</>`

The Button component creates a <button> with text. The if the text attribute is present it contains the string to be displayed. Otherwise the children are used for the button text.

The btnId attribute contains an ID string that's used to record user button presses. The event is recorded using ID button-${btnId}. A btnId also marks the button as user input: a press calls ctl.sync('user') before the onclick handler, so the synchronization that follows, or a ctl.doSync() in the handler, is user-triggered. A handler can then set inputs with val(). A button that isn't user input, such as one that restores saved state, has no btnId.

Attributes

• Standard properties
  The Button component accepts the standard attributes.
• Standard <button> properties
  The Button component accepts the standard <button> attributes.
• text (optional)
  A String to be displayed inside the button. It is processed by tml() so character entities are expanded; the text attribute is also passed through to the <button> element along with the other attributes.
• btnId (optional)
  A String used to identify the button to record button presses. A press is user input.

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

If a text attribute is present all children are ignored. If a text attribute is not present, then the children are used as the button text.

DOM element properties

• The Button Component will render a <button>.
• The DOM node's data-btnId attribute is always assigned from the btnId attribute; if btnId is not present the value is undefined.