component
component
in ftd
is similar to “react component”, components
have “arguments”, this the data that must be passed to them, and using component
s we construct the user interface.component
keyword:-- ftd.text heading: caption title: text: $title role: $inherited.types.heading-large color: $$inherited.colors.text
heading
.component
. In this case, our heading
component is using ftd.text
. We are creating a custom-component with shows given text with the font size of 18 pixels.
ftd.text
implemented? ftd
comes with some “kernel components”, these are the lowest level components that every other component uses directly or indirectly. Read about our kernel components guide to learn about these components.
$
, in our component we have one such argument, $title
. The type of our $title
argument is caption
. You can read more about caption
in the ftd
types guide.
-- ftd.text foo: caption name: integer size: 10 text: $name -- foo: hello (uses default value of $size) -- foo: this is nice size: 20
foo
defines $size
with a default value, it is used in the first instance, and in second we overwrite the default value.Component “local variables” starts with @
:
-- ftd.text foo: caption name: boolean open: true text: $name if: @open $on-click$: toggle @open
@open
. We are using if
to only show the component if @open
is true
, which will be the case by default as we have added with default true
clause to @open
declaration. We have also set click
event handler to toggle @open
, so the effect would be if someone clicks on the message it will go away.
We can also refer to global variables or component arguments (eg $name
here) as the default value of a local variable.
ftd
comes with two kernel container components, ftd.row
and ftd.column
.-- ftd.row label: caption name: body value: spacing: 5 \--- ftd.text: text: $name \--- ftd.text: width: fill text: $value
$name
and $value
. The label
component uses an ftd.row
and has two ftd.text
children. ftd.row
shows its children in a single row.
Note that we have used ---
to indicate that the two ftd.text
are sub-sections of the ftd.row
section (review ftd.p1 grammar).
We have passed the component arguments to each ftd.text
.
A container component can use other container components and create an heirarchy of such components, read more about it in “container management guide”.
-- ftd.column: spacing: 20 border-width: 1 border-radius: 5 padding: 10 -- heading: hello there! This is my heading -- label: Name value: Amit Upadhyay -- label: Location value: Banglore, India -- container: ftd.main
We have placed the heading
and label
s inside an ftd.column
to put some spacing between them.
We have also used the container
keyword, part of the ftd container management
facility, to reset the current container to ftd.main
so the rest of this document is not made part of the ftd.column
.
This is how it looks like:
ftd
document is rendered with a top-level container initialized. This top-level container is an ftd.column
, it places its children on top of each other. ftd
also has a concept of current container
. When the document starts, the top level container is set as the current container.
When a “container component” is initialized, with no children specified as sub-sections, it becomes the current container, and all future components are placed in it.
We can set the current container to any container using that container’s id
property. The default top-level container can be set using ftd.main
alias.
Read more about it in the container management guide.
ftd
supports a if
to decide if the component should be visible or not, based on the arguments, or global variables.-- boolean dark-mode: true -- ftd.text: we are in dark mode if: $ftd.dark-mode -- ftd.text: light mode rules if: not $ftd.dark-mode
ftd.text
components, but only one of them would be visible, based on the value of the dark-mode
variable. Read more about it in conditional components guide.