mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-25 23:03:15 +00:00
3c20f2396e
This is quite a big change: a new way to invoke action widgets. The advantage is that it solves #2217 and #1564, a long running problem that prevented us from adding action widgets to widgets that modify the store. This commit adds the new technique for the button and keyboard widgets, but also extends the select widget to trigger action widgets for the first time
53 lines
2.7 KiB
Plaintext
53 lines
2.7 KiB
Plaintext
caption: button
|
|
created: 20131024141900000
|
|
modified: 20160429175044822
|
|
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 passed in the `actions` attribute
|
|
* 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 |
|
|
|actions |A string containing ActionWidgets to be triggered when the key combination is detected |
|
|
|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` |
|
|
|
|
''Note:'' In almost all other cases where a TextReference is used as a widget attribute, it will be placed between curly brackets, to [[transclude|Transclusion in WikiText]] the value currently stored there. However, when we use a TextReference as the value of a button widget's `set` attribute, we are referencing //the storage location itself//, rather than the value stored there, so we do ''not'' use curly brackets there. //Example:// we could code a button widget that sets the `caption` field of TiddlerA to be the same as that of TiddlerB as:
|
|
|
|
```
|
|
<$button set="TiddlerA!!caption" setTo={{TiddlerB!!caption}} >
|
|
|
|
Press me!
|
|
|
|
</$button>
|
|
```
|
|
|
|
''Tip:'' Set ''class'' to `tc-btn-invisible tc-tiddlylink` to have a button look like an internal link.
|