The components on this page were written with idris-web-components.

This includes the toolbar at the top and the tabbar and tabs at the bottom.

Click on a tab to change pages.

Try inspecting the tab of the current page in your browser dev tools.

Notice that it has the active attribute.

Now click on a different tab and notice active has been removed.

This is handled by parent-child communication between the tabbar and tabs components.

As well as attributes and listeners, other features that can be added to Custom Elements with idris-web-components include:

• Shadow DOM templates (Template)
• The ability to depend on the functionality of another Custom Element (Depend)
• Internal state for use in Idris, similar to the React State hook (State)
• Properties that do some side-effect when their value is changed (PropEffect)

For a full list of features, see the CustomElement data type in CustomElement/Types.idr.