mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-27 02:20:28 +00:00
96 lines
4.1 KiB
Plaintext
96 lines
4.1 KiB
Plaintext
caption: reveal
|
|
created: 20131024141900000
|
|
jeremy: tiddlywiki
|
|
modified: 20181007231748909
|
|
tags: Widgets
|
|
title: RevealWidget
|
|
type: text/vnd.tiddlywiki
|
|
|
|
! Introduction
|
|
|
|
The reveal widget hides or shows its content depending upon the value of a [[state tiddler|StateTiddlers]]. The type of the widget determines the condition for the content being displayed:
|
|
|
|
* type=''match'': the content is displayed if the state tiddler matches a specified value
|
|
* type=''nomatch'': the content is displayed if the state tiddler doesn't match a specified 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'' a specified value
|
|
* type=''gt'': the content is displayed if the state tiddler contains an integer with a value ''greater than'' a specified value
|
|
* type=''lteq'': the content is displayed if the state tiddler contains an integer with a value ''less than or equal to'' a specified value
|
|
* type=''gteq'': the content is displayed if the state tiddler contains an integer with a value ''greater than or equal to'' a specified value
|
|
|
|
|
|
! 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 |
|
|
|tag |Overrides the default HTML element tag (`<div>` in block mode or `<span>` in inline mode) |
|
|
|type |The type of matching performed: ''match'', ''nomatch'', ''popup'', ''lt'', ''gt'', ''lteq'' or ''gteq'' |
|
|
|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<br/>» Set to `tc-popup-keep` to make a popup "sticky", so it won't close when you click inside of it|
|
|
|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'', ''aboveright'', ''right'', ''belowleft'' or ''below'' |
|
|
|default |Default value to use when the state tiddler is missing |
|
|
|animate |Set to "yes" to animate opening and closure (defaults to "no") |
|
|
|retain |Set to "yes" to force the content to be retained even when hidden (defaults to "no")|
|
|
|
|
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 force ''retain="yes"''.
|
|
|
|
! Examples
|
|
|
|
!! Simple content reveal
|
|
|
|
Here's a simple example of showing and hiding content with buttons:
|
|
|
|
<<wikitext-example-without-html '<$button set="$:/state/SampleReveal1" setTo="show">Show me</$button>
|
|
<$button set="$:/state/SampleReveal1" setTo="hide">Hide me</$button>
|
|
|
|
<$reveal type="match" state="$:/state/SampleReveal1" text="show">
|
|
|
|
! This is the revealed content
|
|
And this is some text
|
|
|
|
</$reveal>'>>
|
|
|
|
!! Accordion or Slider
|
|
|
|
An "accordion" or "slider" is a button that can be used to toggle the display of associated content.
|
|
|
|
<<wikitext-example-without-html '<$reveal type="nomatch" state="$:/state/SampleReveal2" text="show">
|
|
|
|
<$button set="$:/state/SampleReveal2" setTo="show">Show me</$button>
|
|
|
|
</$reveal>
|
|
<$reveal type="match" state="$:/state/SampleReveal2" text="show">
|
|
|
|
<$button set="$:/state/SampleReveal2" setTo="hide">Hide me</$button>
|
|
|
|
! This is the revealed content
|
|
And this is some text
|
|
|
|
</$reveal>'>>
|
|
|
|
!! Popup
|
|
|
|
Here is a simple example of a popup built with the RevealWidget:
|
|
|
|
<<wikitext-example-without-html '<$button popup="$:/SamplePopupState">Pop me up!</$button>
|
|
|
|
<$reveal type="popup" state="$:/SamplePopupState">
|
|
<div class="tc-drop-down">
|
|
|
|
! This is the popup
|
|
And this is some text
|
|
|
|
</div>
|
|
</$reveal>'>>
|
|
|
|
!! How to use text references with field content
|
|
|
|
Here is a simple example how to use text references with field content to control the RevealWidget. If the field ``jeremy`` is populated with text ``tiddlywiki``, a message will be displayed.
|
|
|
|
<<wikitext-example-without-html '<$reveal type="match" state="!!jeremy" text="tiddlywiki">
|
|
~TiddlyWiki!
|
|
</$reveal>'>>
|