We leverage Vue.js components as the primary building blocks for our UI. For general UI development work, this is the most common tool a developer will use. It would be prudent to read through the Vue.js guide thoroughly.
Components allow us to define new custom tags that encapsulate a piece of self-contained, re-usable UI functionality. When composed together, they form a tree structure of parents and children. Each component has a well-defined interface used by its parent component, made up of input properties, events and content slots. Components should never reference their parent.
Read through the Frontend code conventions for further guidelines on writing components.
Our design system contains reusable patterns and components that should be used whenever possible to maintain UI consistency and avoid duplication of effort.
Icons in Kolibri should be accessed through the
<KIcon> component. The icons available can be found and searched at Kolibri Design System.
Each icon is associated with a token, which is passed to
<KIcon> and other Kolibri Design System components which accept an
iconAfter prop such as
<!-- embed https://material.io/resources/icons/?search=add_circl&icon=add_circle_outline&style=baseline --> <KIcon :icon="add" />