on-click - Body expands and collapses when click on Header area
on-mouse-enter - Header area is highlighted when mouse hovers over Header area
on-mouse-leave - Header area is de-highlighted when mouse leaves the Header area

It also responds to the System modes. You can try it out using the mode-switcher button on this page at the bottom-right corner.

Start with the part 1 now.

Resources

fastn installation instructions
Create a new fastn project using this Fastn Github Template

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.

Expander Crash Course

Welcome to the fastn Crash Course, my name is Ajit Garg.

In this crash course I will help you create an fastn project called expander from scratch.

We will see how to make the following UI component:

Test Box, Click Me!

Expander Package is running component box. This is a component element and we named it as box.

It handles three events:

on-click - Body expands and collapses when click on Header area
on-mouse-enter - Header area is highlighted when mouse hovers over Header area
on-mouse-leave - Header area is de-highlighted when mouse leaves the Header area

It also responds to the System modes. You can try it out using the mode-switcher button on this page at the bottom-right corner.

Start with the part 1 now.