This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

RevealWidget

 21st July 2024 at 5:57pm

Introduction

The reveal widget hides or shows its content depending upon the value of a state tiddler. The type of the widget determines the condition for the content being displayed:

  • type=match: the content is displayed if the state tiddler matches the text attribute value
  • type=nomatch: the content is displayed if the state tiddler doesn't match the text attribute value
  • type=popup: the content is displayed as a popup as described in the PopupMechanism
  • type=lt: the content is displayed if the state tiddler contains an integer with a value less than the text attribute value
  • type=gt: the content is displayed if the state tiddler contains an integer with a value greater than the text attribute value
  • type=lteq: the content is displayed if the state tiddler contains an integer with a value less than or equal to the text attribute value
  • type=gteq: the content is displayed if the state tiddler contains an integer with a value greater than or equal to the text attribute value

Content and Attributes

The content of the <$reveal> widget is displayed according to the rules given above.

AttributeDescription
stateA TextReference containing the state
stateTitleA title containing the state, without TextReference. Gets preferred over the state attribute
stateFieldA field name which is used to look for the state, if the attribute stateTitle is present
stateIndexAn index which is used to look for the state, if the attribute stateTitle is present
tagOverrides the default HTML element tag (<div> in block mode or <span> in inline mode)
typeThe type of matching performed: match, nomatch, popup, lt, gt, lteq or gteq
textThe text to match when the type is match, nomatch, lt, gt, lteq or gteq
classAn optional CSS class name to be assigned to the HTML element
» Set to tc-popup-keep to make a popup "sticky", so it won't close when you click inside of it
styleAn optional CSS style attribute to be assigned to the HTML element
positionThe position used for the popup when the type is popup. Can be left, above, aboveleft, aboveright, right, belowleft, belowright or below
positionAllowNegativeSet to "yes" to prevent computed popup positions from being clamped to be above zero
defaultDefault value to use when the state tiddler is missing
animateSet to "yes" to animate opening and closure (defaults to "no"; requires "retain" to be set to "yes")
retainSet to "yes" to force the content to be retained even when hidden (defaults to "no")
updatePopupPositionIntroduced in v5.1.23Set to "yes" to update the popup position when the state tiddler is updated (defaults to "no")

Tip
Introduced in v5.1.18 stateTitle, stateField and stateIndex attributes allow specifying Tiddler states directly, without interpreting them as TextReferences. This is useful for edge-cases where titles may contain characters that are used to denote Tiddler fields or indices (!!, ##)

Tip
Retaining the content when hidden can give poor performance since the hidden content requires refresh processing even though it is not displayed. On the other hand, the content can be revealed much more quickly. Note that setting animate="yes" will also require retain="yes"

Examples

Two distinct buttons toggle the state of the tiddler value. The reveal widget displays its content for one of the two states.
titleOutput

Two distinct buttons toggle the state of the tiddler value. Two reveal widgets. The first displays the button to show the content. The second displays both the content and the button to hide the content.
titleOutput

When the button is clicked, the tiddler specified by the popup attribute is filled with the click coordinates. The reveal widget uses these coordinates to position the popup content.
titleOutput

The state attribute of the reveal widget can use the text reference syntax to refer to a specific field. In this example if the field jeremy contains the text tiddlywiki, then the reveal widget's content will be displayed.
titleOutput
jeremytiddlywiki

TiddlyWiki!