TiddlyWiki5/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid

caption: button
created: 20131024141900000
modified: 20150619111219516
tags: Widgets
title: ButtonWidget
type: text/vnd.tiddlywiki

! Introduction

The button widget displays an HTML `<button>` element that can perform a combination of optional actions when clicked:

* Executing any ActionWidgets that are immediate children of the button widget
* Execute any integrated actions:
** Navigate to a specified tiddler
** Dispatch a user defined [[widget message|Messages]]
** Trigger a user defined [[popup|PopupMechanism]]
** Assign new text to a specified tiddler

The integrated actions are provided as a shortcut for invoking common actions. The same functionality is available via ActionWidgets, with the exception of the support for highlighting selected popups.

! Content and Attributes

The content of the `<$button>` widget is displayed within the button.

|!Attribute |!Description |
|to |The title of the tiddler to navigate to |
|message |The name of the [[widget message|Messages]] to send when the button is clicked |
|param |The optional parameter to the message |
|set |A TextReference to which a new value will be assigned |
|setTo |The new value to assign to the TextReference identified in the `set` attribute |
|popup |Title of a state tiddler for a popup that is toggled when the button is clicked |
|aria-label |Optional [[Accessibility]] label |
|tooltip |Optional tooltip |
|class |An optional CSS class name to be assigned to the HTML element|
|style |An optional CSS style attribute to be assigned to the HTML element |
|selectedClass |An optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in `set` already has the value specified in `setTo`  |
|tag |An optional html tag to use instead of the default "button" |
|default |Default value if `set` tiddler is missing for testing against `setTo` to determine `selectedClass` |

''Tip:'' Set ''class'' to `tc-btn-invisible tc-tiddlylink` to have a button look like an internal link.
More mangling of reference docs 2014-09-10 23:06:19 +00:00			`caption: button`
Add support for action widgets This is part of the groundwork for fixing #336 2014-10-08 16:45:26 +00:00			`created: 20131024141900000`
Update button widget docs 2015-06-19 11:12:41 +00:00			`modified: 20150619111219516`
Add support for action widgets This is part of the groundwork for fixing #336 2014-10-08 16:45:26 +00:00			`tags: Widgets`
			`title: ButtonWidget`
			`type: text/vnd.tiddlywiki`
Lots and lots and lots of docs updates Now we've got up-to-date skeleton documentation for all the widgets 2013-10-31 22:03:40 +00:00
			`! Introduction`

Typo fix 2014-04-17 11:52:38 +00:00			The button widget displays an HTML `<button>` element that can perform a combination of optional actions when clicked:
Lots and lots and lots of docs updates Now we've got up-to-date skeleton documentation for all the widgets 2013-10-31 22:03:40 +00:00
Add support for action widgets This is part of the groundwork for fixing #336 2014-10-08 16:45:26 +00:00			`* Executing any ActionWidgets that are immediate children of the button widget`
			`* Execute any integrated actions:`
			`** Navigate to a specified tiddler`
			`** Dispatch a user defined [[widget message\|Messages]]`
			`** Trigger a user defined [[popup\|PopupMechanism]]`
			`** Assign new text to a specified tiddler`

			`The integrated actions are provided as a shortcut for invoking common actions. The same functionality is available via ActionWidgets, with the exception of the support for highlighting selected popups.`
Lots and lots and lots of docs updates Now we've got up-to-date skeleton documentation for all the widgets 2013-10-31 22:03:40 +00:00
			`! Content and Attributes`

			The content of the `<$button>` widget is displayed within the button.

			`\|!Attribute \|!Description \|`
Extend button widget to allow navigating to a tiddler Fixes #327 2014-02-22 16:13:16 +00:00			`\|to \|The title of the tiddler to navigate to \|`
More reference docs mangling 2014-09-11 14:52:47 +00:00			`\|message \|The name of the [[widget message\|Messages]] to send when the button is clicked \|`
Lots and lots and lots of docs updates Now we've got up-to-date skeleton documentation for all the widgets 2013-10-31 22:03:40 +00:00			`\|param \|The optional parameter to the message \|`
Extend button widget to set text references Previously the `set` attribute could only be used to identify a tiddler, not a full text reference. 2014-03-15 17:02:13 +00:00			`\|set \|A TextReference to which a new value will be assigned \|`
			\|setTo \|The new value to assign to the TextReference identified in the `set` attribute \|
Lots and lots and lots of docs updates Now we've got up-to-date skeleton documentation for all the widgets 2013-10-31 22:03:40 +00:00			`\|popup \|Title of a state tiddler for a popup that is toggled when the button is clicked \|`
Added aria-label attribute to link widget And document it for the button widget 2014-06-17 06:54:10 +00:00			`\|aria-label \|Optional [[Accessibility]] label \|`
Update button widget docs Fixes #927 2014-10-05 15:33:05 +00:00			`\|tooltip \|Optional tooltip \|`
updated documentation for link-button 2014-12-16 14:36:20 +00:00			`\|class \|An optional CSS class name to be assigned to the HTML element\|`
Lots and lots and lots of docs updates Now we've got up-to-date skeleton documentation for all the widgets 2013-10-31 22:03:40 +00:00			`\|style \|An optional CSS style attribute to be assigned to the HTML element \|`
			\|selectedClass \|An optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in `set` already has the value specified in `setTo` \|
Update button widget docs 2015-06-19 11:12:41 +00:00			`\|tag \|An optional html tag to use instead of the default "button" \|`
updated documentation for link-button 2014-12-16 14:36:20 +00:00			\|default \|Default value if `set` tiddler is missing for testing against `setTo` to determine `selectedClass` \|

Fix typo #1681 Thanks @Ishindri 2015-04-27 12:25:43 +00:00			''Tip:'' Set ''class'' to `tc-btn-invisible tc-tiddlylink` to have a button look like an internal link.