if-attr.ftd

/-- ft-core.concept:


-- ft.page-with-toc: Conditional Attributes
toc: $config.api-toc
sub-sections: $config.doc-header


-- ftd.column:
id: page


-- ft.markdown: 

`ftd` supports `if` expression to decide the value of attribute, based on the
arguments, or global variables.


-- ft.h2: Priority Order

The priority of conditional attributes is in increasing order (low -> high) i.e.
the condition at bottom has higher priority than the above conditions. The value of 
attribute with no condition is taken as default.


-- ft.h2: Examples

Lets understand it better with few examples


-- ft.h3: Example 1:


-- ft.code: Conditional Attribute using variable
lang: ftd

\-- boolean present: false

\-- ftd.text foo:
caption name:
color: $fpm.color.main.text
color if $present: $fpm.color.main.cta-primary.text
color if not $present: $fpm.color.main.cta-secondary.text
text: $name

\-- foo: hello


-- ftd.text:
color: $fpm.color.main.text
role: $fpm.type.body-large

Output:


-- container: page


-- ftd.row:
border-width: 1
border-color: $fpm.color.main.text
padding: 10
width: fill


-- boolean present: false


-- ftd.text foo1:
caption name:
color: $fpm.color.main.text
color if $present: $fpm.color.main.text
color if not $present: $fpm.color.main.text
text: $name


-- foo1: hello


-- container: page


-- ft.markdown:

Here, in above sample code, the attribute or style `color` has default value as 
`grey` and it follows the conditional statements. According to the value of the 
variable `present` (in this case, it is `false`), the value of the style `color` 
is set (in this case, it's `red`).


-- ft.h3: Example 2:


-- ft.code: Conditional Attribute with default
lang: ftd

\-- boolean present: false

\-- component foo:
caption name:
component: ftd.text
color: $fpm.color.main.text
color if $present: $fpm.color.main.text
text: $name

\-- foo: hello


-- ftd.text:
color: $fpm.color.main.text
role: $fpm.type.body-large

Output:


-- container: page


-- ftd.row:
border-width: 1
border-color: $fpm.color.main.text
padding: 10
width: fill


-- ftd.text foo2:
caption name:
color: $fpm.color.main.text
color if $present: $fpm.color.main.text
text: $name


-- foo2: hello


-- container: page


-- ft.markdown:

Here, in above sample code, no conditional statement is satisfied, so the value of 
style `color` is set to its default value (i.e. `grey`).


-- ft.h3: Example 3:


-- ft.code: Conditional Attribute using arguments
lang: ftd

\-- ftd.text foo:
caption name:
optional string yes:
color: $fpm.color.main.text
color if $yes is not null: $fpm.color.main.text
text: $name

\-- foo: hello
yes: world


-- ftd.text:
color: $fpm.color.main.text
role: $fpm.type.body-large

Output:


-- container: page


-- ftd.row:
border-width: 1
border-color: $fpm.color.main.text
padding: 10
width: fill


-- ftd.text foo3:
caption name:
optional string yes:
color: $fpm.color.main.text
color if $yes is not null: $fpm.color.main.text
text: $name


-- foo3: hello
yes: world


-- container: page


-- ft.markdown:

Here, in above sample code, we have defined the argument `yes` of optional string 
type. If `yes` is passed then `color if $yes is not null` condition would be 
satisfied and the `color` gets set to `blue`.


-- ft.h3: Example 4:


-- ft.code: Conditional Attribute deciding priority
lang: ftd

\-- var present: false

\-- ftd.text foo:
caption name:
optional string yes:
color: $fpm.color.main.text
color if $present: $fpm.color.main.cta-primary.text
color if not $present: $fpm.color.main.cta-secondary.text
color if $yes is not null: $fpm.color.main.success.text
text: $name

\-- foo: hello
yes: world


-- ftd.text:
color: $fpm.color.main.text
role: $fpm.type.body-large

Output:


-- container: page


-- ftd.row:
border-width: 1
border-color: $fpm.color.main.text
padding: 10
width: fill


-- ftd.text foo4:
caption name:
optional string yes:
color: $fpm.color.main.text
color if $present: $fpm.color.main.cta-primary.text
color if not $present: $fpm.color.main.cta-secondary.text
color if $yes is not null: $fpm.color.main.success.text
text: $name


-- foo4: hello
yes: world


-- container: page


-- ft.markdown:

Here, in above sample code, both `color if not present: red` and 
`color if $yes is not null: blue` are satisfied, so according to the precedence 
rule, the value of attribute/style is set to value in last satisfied condition, 
i.e., `color if $yes is not null: blue` has highest priority. So the `color` gets 
set to `blue`.


-- ft.h1: Note: Does not yet work well with event handling

Conditional attributes only work with the variables defined in the document, and
do not get updated when the value of the variable changes as a response to events.