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

How to create a Component?

Syntax for creating a component

-- component <component-name>:

;; content of component goes here

-- end: <component-name>

-- component <component-name>:

;; content of component goes here

-- end: <component-name>

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>:

-- <component-name>:

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>

-- component <component-name>:
caption <caption name>: <default value if any>
body <body name>: <default value if any>

-- end: <component-name>

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>

-- ftd.text: $box.<caption name>

-- ftd.text: $box.<body name>

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

-- box: Header is in caption area

Body is in body area

Second Way

-- box:
title: Header using title keyword

Body is in body area

-- box:
title: Header using title keyword

Body is in body area

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.

-- 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.

Fourth Way: As an empty to take default values, if defined in arguments.

-- box:

-- box:

Continue with the part 4 now.

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.

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.

Custom Components

What’s the need of a Component?

Documentation: read more

How to create a Component?

Syntax for creating a component

-- component <component-name>:

;; content of component goes here

-- end: <component-name>

-- component <component-name>:

;; content of component goes here

-- end: <component-name>

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>:

-- <component-name>:

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>

-- component <component-name>:
caption <caption name>: <default value if any>
body <body name>: <default value if any>

-- end: <component-name>

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>

-- ftd.text: $box.<caption name>

-- ftd.text: $box.<body name>

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

-- box: Header is in caption area

Body is in body area

Second Way

-- box:
title: Header using title keyword

Body is in body area

-- box:
title: Header using title keyword

Body is in body area

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.

-- 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.

Fourth Way: As an empty to take default values, if defined in arguments.

-- box:

-- box:

Continue with the part 4 now.

Custom Components

What’s the need of a Component?

How to create a Component?

How to call/refer the component?

How to give different content to each box?

Ways to pass the Header and Body content:

Support fastn!

Getting Help

Found an issue?

Quick links:

Join us

Custom Components

What’s the need of a Component?

How to create a Component?

How to call/refer the component?

How to give different content to each box?

Ways to pass the Header and Body content:

Support fastn!

Getting Help

Found an issue?

Quick links:

Join us

Support `fastn`!

Support `fastn`!