Introduction
The reveal widget hides or shows its content depending upon the value of a state tiddler.
Content and Attributes
The content of the <$reveal> widget is displayed according to the rules given above.
| Attribute | Description |
|---|---|
state | A TextReference containing the state |
stateTitle | A title containing the state, without TextReference. Gets preferred over the state attribute if both are set |
stateField | A field name which is used to look for the state, if the attribute stateTitle is present |
stateIndex | An index which is used to look for the state, if the attribute stateTitle is present |
default | Default value to use when the state tiddler is missing |
tag | Overrides the default HTML tag (<div> in block mode or <span> in inline mode) |
type | The type of matching performed, see below |
text | The text to match when the type is match, nomatch, lt, gt, lteq or gteq |
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 |
position | The position used for the popup when the type is popup.Can be left, above, aboveleft, aboveright, right, belowleft, belowright or below. Also see Popup Clamping Example |
positionAllowNegative | Set to yes to allow computed popup positions to be negative relative to their container or the document window (for absolutely positioned popups). Defaults to no |
clamp | Set to right, bottom or both to prevent a popup to overflow its container, see below |
animate | Set to yes to animate opening and closing. Defaults to no |
retain | Set to yes to force the content to be retained even when hidden. Defaults to no |
updatePopupPosition | Introduced in v5.1.23Set to yes to update the popup position when the state tiddler is updated. Defaults to no |
type Attribute
The type of the widget determines the condition for the content being displayed:
match: the content is displayed if the state tiddler matches the text attribute valuenomatch: the content is displayed if the state tiddler doesn't match the text attribute valuepopup: the content is displayed as a popup as described in the PopupMechanismlt: the content is displayed if the state tiddler contains an integer with a value less than the text attribute valuegt: the content is displayed if the state tiddler contains an integer with a value greater than the text attribute valuelteq: the content is displayed if the state tiddler contains an integer with a value less than or equal to the text attribute valuegteq: the content is displayed if the state tiddler contains an integer with a value greater than or equal to the text attribute value
Popup Clamping
Popups can be forced not to overflow their container (when relatively positioned) or the document window (when absolutely positioned). The popup's container is the nearest ancestor element with CSS positioning (position: relative, absolute, fixed, or sticky).
Overflow to the left or top is prevented by setting positionAllowNegative to no (the default). Clamping to the right and bottom is achieved by setting clamp to right, bottom or both.
Examples
Two distinct buttons toggle the state of the tiddler value. The reveal widget displays its content for one of the two states.
| title | Output |
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.
| title | Output |
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.
| title | Output |
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.
| title | Output |
| jeremy | tiddlywiki |
TiddlyWiki!