Container Attributes
These attributes are available to
ftd.row and ftd.column container components in ftd.wrap: optional boolean
This property is used to wrap flex elements. If the elements are not flex, this will have no effect.
Sample code using
wrapInput
-- ftd.row: width.fixed.px: 100 spacing.fixed.px: 10 border-color: $red-yellow border-width.px: 2 color: $inherited.colors.text wrap: true -- ftd.text: One -- ftd.text: Two -- ftd.text: Three -- ftd.text: Four -- ftd.text: Five -- ftd.text: Six -- end: ftd.row
Lang:
ftd
Output
One
Two
Three
Four
Five
Six
align-content: optional ftd.align
This property defines how elements are aligned inside a flex container like
ftd.row, ftd.column. It takes value of type ftd.align and is optional.Sample code using
align-contentInput
-- ftd.column: width.fixed.px: 300 align-content: top-center color: $inherited.colors.text border-color: $red-yellow border-width.px: 2 -- ftd.text: One -- ftd.text: Two -- ftd.text: Three -- end: ftd.column
Lang:
ftd
Output
One
Two
Three
spacing: optional ftd.spacing
This property defines the spacing between and around the container elements. It takes value of type
ftd.spacing and is optional.Sample code using
spacingInput
-- ftd.row: spacing: space-evenly border-color: $red-yellow border-width.px: 2 color: $inherited.colors.text width: fill-container -- ftd.text: One -- ftd.text: Two -- ftd.text: Three -- end: ftd.row
Lang:
ftd
Output
One
Two
Three
Getting Help
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!Found an issue?
If you find some issue, please visit our GitHub issues to tell us about it.
Quick links:
Join us
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.
Copyright © 2023 - FifthTry.com
