Components
Component File Structure
Read and edit the template, styles, imports, and script in a .calmui file.
Studio creates a .calmui file when you add a View or component. Keep one
component in each file.
<template>
<p class="greeting">Hello!</p>
</template>
<style scoped>
.greeting { color: #ffffff; font-size: 24px; }
</style>This component displays white text at 24 pixels. Save it, then double-click it in Components to show it in Preview.
| Section | When to use it |
|---|---|
<template> | Required once; contains the visible elements and components |
<style scoped> | Optional once; styles only this component's own elements |
<style> | Optional once; adds global styles |
<import component="MenuButton" from="./MenuButton.calmui" /> | Once per imported component |
<script lang="ts"> | Optional once; adds local behavior |
Imports go above the template. ./ means the current folder and ../ means
its parent. Match the real filename's capitalization. Studio writes imports
when you drag a component into the source or Hierarchy.
If Save fails, open Problems and click the reported file and line. Common causes include a missing import file, the same imported name used twice, or two components importing each other. See the .calmui reference for the supported syntax.