Using conditions
To make your page responsive,
we can use `if` conditional expressions on component as well on the component
attributes.
Control visibility of a component using if conditions
Using if conditions on component lets you control when the component
needs to be visible and under which conditions.
Sample code using `if` condition on component
Input
-- ftd.column:
width: fill-container
color: $inherited.colors.text
-- ftd.text: This text will only show on mobile
if: { ftd.device == "mobile" }
-- ftd.text: This text will only show on desktop
if: { ftd.device != "mobile" }
-- end: ftd.column
Output
This text will only show on desktop
Control attribute values using if conditions
We can control attribute values of a component using
conditional if expressions.
Sample code to show conditional attributes
Input
-- ftd.text: This text will be visible on desktop.
text if { ftd.device == "mobile" }: This text will be visible on mobile.
color: $inherited.colors.text
border-color if { ftd.device != "mobile" }: green
border-color if { ftd.device == "mobile" }: coral
Output
This text will be visible on desktop.
Using responsive types
In ftd, there are several attributes which support responsive type such as
`ftd.responsive-length` which can be used with any attribute of type `ftd
.length`.
Sample code using `ftd.responsive-length`
Input
-- ftd.responsive-length responsive-padding-length:
desktop.px: 15
mobile.px: 5
-- ftd.column:
color: $inherited.colors.text
width: fill-container
-- ftd.text: This text has responsive padding for desktop and mobile
padding.responsive: $responsive-padding-length
border-color: $red-yellow
border-width.px: 2
-- ftd.text: This is another piece of text having same responsive padding
padding.responsive: $responsive-padding-length
border-color: $red-yellow
border-width.px: 2
-- end: ftd.column
Output
This text has responsive padding for desktop and mobile
This is another piece of text having same responsive padding
Using event handling
We can use event-handling to control how and when components are displayed.
Control visibility of a component using event-handling
Using event-handling on component lets you control when the component
needs to be visible and under which conditions.
Sample code using event-handling to control component visibility
Input
-- integer $component-number: 1
-- ftd.column:
width: fill-container
color: $inherited.colors.text
-- ftd.text: This is coral component, click to show blue component
if: { component-number == 1 }
border-color: coral
border-width.px: 2
padding.px: 10
$on-click$: $ftd.set-integer($a = $component-number, v = 2)
-- ftd.text: This is blue component, click to show coral component
if: { component-number == 2 }
border-color: deepskyblue
border-width.px: 2
padding.px: 10
$on-click$: $ftd.set-integer($a = $component-number, v = 1)
-- end: ftd.column
Output
This is coral component, click to show blue component
Control attribute values using event-handling
We can use event-handling with conditional expressions to control the behaviour
of components.
Sample code using event-handling to control attribute values
Input
-- boolean $is-hovered: false
-- ftd.shadow hover-shadow:
color: $yellow-red
x-offset.px: 10
y-offset.px: 10
blur.px: 1
-- ftd.text: A quick brown fox jumps over the lazy dog
color: $inherited.colors.text
padding.px: 10
shadow if { is-hovered }: $hover-shadow
$on-mouse-enter$: $ftd.set-bool($a = $is-hovered, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $is-hovered, v = false)
Output
A quick brown fox jumps over the lazy dog