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