-- import: ft
-- ftd.color grey: grey
dark: grey
-- ftd.color green: green
dark: green
-- ftd.color red: red
dark: red
-- ftd.color blue: blue
dark: blue
-- ft.h0: Conditional Attributes
`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.h4: Example 1:
-- ft.code: Conditional Attribute using variable
lang: ftd
\-- boolean present: false
\-- ftd.text foo:
caption name:
color: grey
color if $present: green
color if not $present: red
text: $name
\-- foo: hello
-- ftd.text:
color: $grey
Output:
-- container: ftd.main
-- ftd.row:
border-width: 1
border-color: $grey
padding: 10
width: fill
-- boolean present: false
-- ftd.text foo1:
caption name:
color: $grey
color if $present: $green
color if not $present: $red
text: $name
-- foo1: hello
-- container: ftd.main
-- 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.h4: Example 2:
-- ft.code: Conditional Attribute with default
lang: ftd
\-- boolean present: false
\-- ftd.text foo:
caption name:
color: grey
color if $present: green
text: $name
\-- foo: hello
-- ftd.text:
color: $grey
Output:
-- container: ftd.main
-- ftd.row:
border-width: 1
border-color: $grey
padding: 10
width: fill
-- ftd.text foo2:
caption name:
color: $grey
color if $present: $green
text: $name
-- foo2: hello
-- container: ftd.main
-- 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.h4: Example 3:
-- ft.code: Conditional Attribute using arguments
lang: ftd
\-- ftd.text foo:
caption name:
optional string yes:
color: grey
color if $yes is not null: blue
text: $name
\-- foo: hello
yes: world
-- ftd.text:
color: $grey
Output:
-- container: ftd.main
-- ftd.row:
border-width: 1
border-color: $grey
padding: 10
width: fill
-- ftd.text foo3:
caption name:
optional string yes:
color: $grey
color if $yes is not null: $blue
text: $name
-- foo3: hello
yes: world
-- container: ftd.main
-- 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.h4: Example 4:
-- ft.code: Conditional Attribute deciding priority
lang: ftd
\-- boolean present: false
\-- ftd.text foo:
caption name:
optional string yes:
color: grey
color if $present: blue
color if not $present: red
color if $yes is not null: green
text: $name
\-- foo: hello
yes: world
-- ftd.text:
color: $grey
Output:
-- container: ftd.main
-- ftd.row:
border-width: 1
border-color: $grey
padding: 10
width: fill
-- ftd.text foo4:
caption name:
optional string yes:
color: $grey
color if $present: $blue
color if not $present: $red
color if $yes is not null: $green
text: $name
-- foo4: hello
yes: world
-- container: ftd.main
-- 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`.