mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-02-04 13:19:11 +00:00
Docs update
Fixes #247 @giffmex - I appreciate that I haven’t fixed everything you mentioned
This commit is contained in:
parent
e537457d4b
commit
7e151a98da
13
editions/clientserver/tiddlers/PopupMechanism.tid
Normal file
13
editions/clientserver/tiddlers/PopupMechanism.tid
Normal 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
|
||||
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user