Container Root Attributes

These attributes are available to all container components in ftd.

children: ftd.ui list

This property is used to provide child elements for container. It takes value as a list of ftd.ui components.
Sample code using children
Input
-- ftd.ui list child-components:

-- ftd.text: This is first child text
-- ftd.text: This is another child text

-- end: child-components

-- ftd.column:
color: $inherited.colors.text
children: $child-components

-- end: ftd.column
Lang:
ftd
Output
This is first child text
This is another child text

colors: optional ftd.color-scheme

This property will allow users to specify any color scheme for any container which can be used on any of its child components. It takes value of type ftd.color-scheme and is optional.
Sample code using colors
Input
-- import: fastn-community.github.io/saturated-sunset-cs as cs

-- ftd.column:
colors: $cs.main
spacing.fixed.px: 10

-- ftd.text: Hello World
color: $inherited.colors.background.step-2

-- ftd.text: We have used forest cs here
color: $inherited.colors.background.step-2

-- end: ftd.column
Lang:
ftd
Output
Hello World
We have used forest cs here

types: optional ftd.type-data

This property will allow users to specify any typography scheme which can be used on any of its child components. It takes value of type ftd.type-data and is optional.
Sample code using types
Input
-- import: fifthtry.github.io/virgil-font-typography as typo

-- ftd.column:
types: $typo.types
spacing.fixed.px: 10

-- ftd.text: Hello World
role: $inherited.types.heading-medium
color: $inherited.colors.text

-- ftd.text: We have used virgil typography here
role: $inherited.types.heading-medium
color: $inherited.colors.text

-- end: ftd.column
Lang:
ftd
Output
Hello World
We have used virgil typography here

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

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.

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