Orchestra 9/Documentation

Components

The Qmatic Canvas component library provides a set of UI elements that you can drag and drop onto your canvas to build interfaces.

Available Components

Button Component

Interactive button element with customizable styling.

Properties:

  • text: Button label text
  • backgroundColor: Background color
  • textColor: Text color
  • borderRadius: Corner rounding
  • padding: Internal spacing

Example Usage:

  • Drag from component library
  • Set text in properties panel
  • Customize colors and styling
  • Position on canvas

Text Component

Display text content with various styling options.

Properties:

  • text: Text content
  • fontSize: Text size
  • fontWeight: Text weight (normal, bold)
  • textColor: Text color
  • textAlign: Alignment (left, center, right)

Input Component

Form input field for user data entry.

Properties:

  • placeholder: Placeholder text
  • type: Input type (text, email, password)
  • borderColor: Border color
  • backgroundColor: Background color
  • borderRadius: Corner rounding

Image Component

Display images with various sizing and styling options.

Properties:

  • src: Image source URL
  • alt: Alternative text
  • width: Image width
  • height: Image height
  • borderRadius: Corner rounding
  • objectFit: How image fits container

Component Lifecycle

  1. Creation: Components are created when dragged from the library
  2. Positioning: Components can be moved around the canvas
  3. Selection: Click to select and view properties
  4. Editing: Modify properties in the properties panel
  5. Deletion: Remove components using delete key or context menu

Theme Integration

All components automatically adapt to the current theme:

  • Light Mode: Light backgrounds, dark text
  • Dark Mode: Dark backgrounds (#171717), light text
  • Custom Colors: Override with specific brand colors

Advanced Features

Component Hierarchy

Components maintain a z-index order that can be modified:

  • Bring to front
  • Send to back
  • Layer management

Responsive Design

Components can be configured for different screen sizes:

  • Desktop layouts
  • Tablet adaptations
  • Mobile optimizations

Component Templates

Save frequently used component configurations as templates for reuse across projects.