Components
Larger parts built from the elements, called with the {component} tag.
A component is a larger or more specific part: several elements put together, or parts that work together, like tabs and the panel they load from a :block fragment. If it is simple and common enough that most sites need it, it is an element, even with several children, as a card has. Components may use elements, and elements never use components. Both come with the ui addon and share its preset, so there is nothing more to set up.
Calling a component
{component name} works like {ui}: it renders @ui/components/name.latte (a site override at site/views/@ui/components/ first) with only the args it is given, and a paired tag fills the component's {block default}. Every component takes class and attrs like an element does.
Components read the same tokens as the elements, so a theme restyles both.
Components
-
Tabs
Links that swap a panel loaded from the server.
-
Pagination
Links to the pages of a long list.
-
Modal
A dialog that opens over the page, loaded from the server.
-
Toast
A short message that appears in the corner and goes away on its own.