Custom Components
What's the need of a Component?
`Custom Components` let's the user to turn their creativity into action.
`Components` help users to build exciting features for their projects including
styles, features, color-schemes, templates, typography etc.
`Components` give scalability, efficiency as well as consistency to the design.
Once created can be used and reused as many times throughout the project as
well as can be used by others when published on GitHub.
In our `Expander project`, we have used the `component` and named it as `box`.
We moved our column code block that represents the box which we created in the
last part and re-used the `component` three times.
Documentation: [read more](https://fastn.com/components/)
How to create a Component?
Syntax for creating a component
-- component <component-name>:
;; content of component goes here
-- end: <component-name>
Lang:
ftd
How to call/refer the component?
`Component box` is created outside the root column, that represents the box.
Then, inside the root column we refer it.
Syntax for refering the component
-- <component-name>:
Lang:
ftd
How to give different content to each box?
To make Header and Body content user-dependent, we need to pass two arguments
to the **component** we created.
Arguments
-- component <component-name>:
caption <caption name>: <default value if any>
body <body name>: <default value if any>
-- end: <component-name>
Lang:
ftd
Now we can pass the arguments names for caption and body to Header and Body
respectively.
-- ftd.text: $box.<caption name>
-- ftd.text: $box.<body name>
Lang:
ftd
Ways to pass the Header and Body content:
For simplicity, I am assuming that **<component-name>** is **box**.
- **First Way**
-- box: Header is in caption area
Body is in body area
Lang:
ftd
- **Second Way**
-- box:
title: Header using title keyword
Body is in body area
Lang:
ftd
- **Third Way**
-- box:
-- box.title:
Header is in first child: box.title.
This is used to write multiline header
-- box.body:
Body is in second child: box.body.
Lang:
ftd
- **Fourth Way:** As an empty to take default values, if defined in arguments.
-- box:
Lang:
ftd
Continue with the [part 4 now](/expander/events/).
