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

Widget Attributes

 31st July 2023 at 9:06pm

Attributes of HTML elements and widgets can be specified in several different ways:

attribute typesyntax
literalsingle, double or triple quotes or no quotes for values without spaces
transcludeddouble curly braces around a text reference
variabledouble angle brackets around a macro or variable invocation
filteredtriple curly braces around a filter expression
substitutedsingle or triple backticks around the text to be processed for substitutions

Literal Attribute Values

Literal attribute values can use several different styles of quoting:

  • Single quotes (eg attr='value')
  • Double quotes (eg attr="value")
  • Tripe double quotes (eg attr="""value""")
  • No quoting is necessary for values that do not contain spaces (eg attr=value)

Literal attribute values can include line breaks. For example:

<div data-address="Mouse House,
Mouse Lane,
Rodentville,
Ratland."/>

By using triple-double quotes you can specify attribute values that contain single double quotes. For example:

<div data-address="""Mouse House,
"Mouse" Lane,
Rodentville,
Ratland."""/>

Transcluded Attribute Values

Transcluded attribute values are indicated with double curly braces around a TextReference. For example:

attr={{tiddler}}
attr={{!!field}}
attr={{tiddler!!field}}

Warning
The value of the attribute value will be the exact text retrieved from the TextReference. Any wiki syntax in that text will be left as-is.

Variable Attribute Values

Variable attribute values are indicated with double angle brackets around a macro invocation. For example:

<div title=<<MyMacro "Brian">>>
...
</div>

The behaviour of variables invoked via widget attributes is not the same as when they are invoked via normal wikitext. In addition, the behaviour depends on how the variable is declared:

how declaredbehaviour
\defineTextual substitution of parameters is performed on the body text. No further processing takes place. The result after textual substitution is used as the attribute's value
$set, $let, $vars, \procedure, \widgetBody text is retrieved as-is and used as the attribute's value.
\functionWhen a function (e.g. .myfun) is invoked as <div class=<<.myfun>>/>, it is a synonym for <div class={{{[function[.myfun]]}}}/>. As with any filtered transclusion (i.e. triple curly braces), all results except the first are discarded. That first result is used as the attribute's value. Note that functions are recursively processed even when invoked in this form. In other words a filter expression in a function can invoke another function and the processing will continue

Filtered Attribute Values

Filtered attribute values are indicated with triple curly braces around a Filter Expression. The value will be the first item in the resulting list, or the empty string if the list is empty.

Introduced in v5.2.2 To improve readability, newlines can be included anywhere that whitespace is allowed within filtered attributes.

This example shows how to add a prefix to a value:

<$text text={{{ [<currentTiddler>addprefix[$:/myprefix/]] }}} />

Warning
The value of the attribute will be the exact text from the first item in the resulting list. Any wiki syntax in that text will be left as-is.

Substituted Attribute Values

New in v5.3.0

Substituted attribute values can use two different styles of quoting:

  • Single backticks
    attr=`value`
  • Triple backticks
    attr=```value```

The value of the attribute will be the text denoted by the backticks with any of the placeholders for filter expressions and variables substituted with their corresponding values. Filter expression placeholders are substituted before variable placeholders, allowing for further variable substitution in their returned value.

Warning
Any other wiki syntax in that text will be left as-is.

placeholder syntaxdescription
$(varname)$Text substitution of a variable. Undefined variables are replaced with an empty string.
${ filter expression }$Text substitution with the first result of evaluating the filter expression.

Examples

Substituting a variable value into a string

<$text text=`Hello there this is the tiddler "$(currentTiddler)$"`/>

That renders as:

Hello there this is the tiddler "Substituted Attribute Values"

Substituting a variable value and the result of evaluating a filter expression into a string

<$text text=`This tiddler is titled "$(currentTiddler)$" and was last modified on ${[{!!modified}format:date[DDth MMM YYYY]]}$`/>

That renders as:

This tiddler is titled "Substituted Attribute Values" and was last modified on 15th June 2023

Concatenating strings and variables to create a URL


<$let hash={{{ [<currentTiddler>encodeuricomponent[]] }}}>
<a href=`http://tiddlywiki.com/#$(hash)$`>this tiddler on tiddlywiki.com</a>
</$let>

That renders as:

this tiddler on tiddlywiki.com

Concatenating variables and a text reference to create a URL


<$let hash={{{ [<currentTiddler>encodeuricomponent[]] }}}>
<a href=`${ [{!!base-url}] }$#$(hash)$`>this tiddler on tiddlywiki.com</a>
</$let>

That renders as:

this tiddler on tiddlywiki.com