if
conditional expressions on component as well on the component attributes.if
condition on component-- 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
-- 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
ftd.responsive-length
which can be used with any attribute of type ftd .length
.ftd.responsive-length
-- 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
-- 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
-- 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)
Have a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!We welcome you to join our Discord community today.
We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.