Docs update

Fixes #247

@giffmex - I appreciate that I haven’t fixed everything you mentioned
This commit is contained in:
Jermolene 2013-12-12 18:16:16 +00:00
parent e537457d4b
commit 7e151a98da
2 changed files with 73 additions and 7 deletions

View File

@ -0,0 +1,13 @@
created: 20131212175656755
modified: 20131212180213909
tags: mechanism
title: PopupMechanism
type: text/vnd.tiddlywiki
The popup mechanism allows blocks of content to be selectively displayed and positioned with respect to an anchor. It has several parts:
* StateTiddlers to record whether a popup is currently displayed or not
* The RevealWidget to selectively display the popup content
* The ButtonWidget to trigger the display of the popup by setting the state tiddler appropriately

View File

@ -1,15 +1,16 @@
title: RevealWidget
created: 201310241419
modified: 201310300837
created: 20131024141900000
modified: 20131212181426191
tags: widget
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:
* ''match'': the content is displayed if the state tiddler matches a specified value
* ''nomatch'': the content is displayed if the state tiddler doesn't match a specified value
* ''popup'': the content is displayed as a popup as described in the PopupMechanism
* 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
! Content and Attributes
@ -19,5 +20,57 @@ The content of the `<$reveal>` widget is displayed according to the rules given
|state |The title of the tiddler containing the state |
|type |The type of matching performed: ''match'', ''nomatch'' or ''popup'' |
|text |The text to match when the type is ''match'' and ''nomatch'' |
|position |The position used for the popup when the type is ''popup''. Can be ''left'',''above'',''aboveright'',''right'',''belowleft'' or ''below'' |
|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 |
! Examples
!! Simple content reveal
Here's a simple example of showing and hiding content with buttons:
```
<$button set="$:/SampleRevealState" setTo="show">Show me</$button>
<$button set="$:/SampleRevealState" setTo="hide">Hide me</$button>
<$reveal type="match" state="$:/SampleRevealState" text="show">
! This is the revealed content
And this is some text
</$reveal>
```
It renders as:
<$button set="$:/SampleRevealState" setTo="show">Show me</$button>
<$button set="$:/SampleRevealState" setTo="hide">Hide me</$button>
<$reveal type="match" state="$:/SampleRevealState" text="show">
! This is the revealed content
And this is some text
</$reveal>
!! Popup
Here is a simple example of a popup built with the RevealWidget:
```
<$button popup="$:/SamplePopupState">Pop me up!</$button>
<$reveal type="popup" state="$:/SamplePopupState">
<div class="tw-drop-down">
! This is the popup
And this is some text
</div>
</$reveal>
```
It renders as:
<$button popup="$:/SamplePopupState">Pop me up!</$button>
<$reveal type="popup" state="$:/SamplePopupState">
<div class="tw-drop-down">
! This is the popup
And this is some text
</div>
</$reveal>