Skip to main content

Components Reference

Welcome to the Nuraly Components Reference. Here you'll find comprehensive documentation for all available components, including their input handlers, events, and usage patterns.

What are Components?​

Components are the building blocks of Nuraly applications. Each component is a reusable UI element with:

  • Input Handlers - Dynamic properties that can be evaluated at runtime
  • Events - User interactions that trigger handler code
  • Styles - Visual styling with dynamic style handlers
  • Instance Values - Component-scoped state management

Component Types​

Input Components​

Components designed for user input:

  • TextInput - Text field for capturing user text
  • Button - Clickable button for triggering actions
  • Select - Dropdown selection component
  • Checkbox - Boolean toggle component
  • DatePicker - Date selection component
  • Slider - Range slider component
  • Textarea - Multi-line text input
  • ColorPicker - Color selection component
  • And more...

Display Components​

Components for displaying information:

  • TextLabel - Text display component
  • Icon - Icon display component
  • Badge - Small badge with count/text
  • Image - Image display component
  • Video - Video player component
  • And more...

Layout Components​

Components for organizing content:

  • Container - Vertical layout container
  • Card - Card layout component
  • And more...

Components for navigation:

  • Link - Hyperlink component
  • Menu - Navigation menu
  • And more...

Advanced Components​

Special-purpose components:

  • MicroApp - Embed isolated microapp
  • Table - Data table component
  • Collection - Repeating collection component
  • And more...

Core Concepts​

Input Handlers vs Static Input​

Every component property can be either static or dynamic:

Static Input:

input: {
  value: { type: "string", value: "Hello" }
}

Dynamic Input (Handler):

input: {
  value: {
    type: "handler",
    value: `return Vars.username || 'Guest';`
  }
}

Handlers are evaluated in real-time based on runtime variables and context, allowing components to be fully dynamic and responsive.

Event System​

Events allow components to respond to user interactions:

event: {
  onChange: `
    Vars.username = EventData.value;
    Vars.formDirty = true;
  `
}

Each event provides EventData containing relevant information about the interaction. Handlers can access global variables, current component context, and trigger other operations.

Style Handlers​

Components can have dynamic styles through styleHandlers:

styleHandlers: {
  width: `return Vars.isCompact ? '200px' : '100%';`,
  backgroundColor: `return Vars.isDarkMode ? '#333' : '#fff';`
}

Instance Values​

Components maintain instance-specific state through Current.Instance:

// In event handler
Current.Instance.clickCount = (Current.Instance.clickCount || 0) + 1;

// Persists with the component throughout its lifecycle

Microapp Integration​

All components work seamlessly in microapps with variable scoping:

// Local scope (isolated to microapp instance)
Vars.username = 'John'

// Global scope (shared across all instances)
Vars['global.theme'] = 'dark'

See Variable Scopes for detailed information.

Quick Start Example​

Here's a simple form example using TextInput:

{
  uuid: "login-form",
  name: "LoginForm",
  component_type: ComponentType.Container,
  childrenIds: ["email-input", "password-input", "submit-button"],
  
  // Child: Email Input
  {
    uuid: "email-input",
    name: "EmailInput",
    component_type: ComponentType.TextInput,
    input: {
      type: { type: "string", value: "email" },
      placeholder: { type: "string", value: "Enter email" },
      required: { type: "boolean", value: true }
    },
    event: {
      onChange: `
        Vars.email = EventData.value;
        Vars.formValid = ValidateForm();
      `
    }
  },
  
  // Child: Password Input
  {
    uuid: "password-input",
    name: "PasswordInput",
    component_type: ComponentType.TextInput,
    input: {
      type: { type: "string", value: "password" },
      placeholder: { type: "string", value: "Enter password" },
      required: { type: "boolean", value: true }
    },
    event: {
      onChange: `
        Vars.password = EventData.value;
        Vars.formValid = ValidateForm();
      `
    }
  },
  
  // Child: Submit Button
  {
    uuid: "submit-button",
    name: "SubmitButton",
    component_type: ComponentType.Button,
    input: {
      label: { type: "string", value: "Login" },
      disabled: {
        type: "handler",
        value: `return !Vars.formValid || Vars.isLoading;`
      }
    },
    event: {
      onClick: `
        Vars.isLoading = true;
        const result = await Login(Vars.email, Vars.password);
        Vars.isLoading = false;
        Vars.loginSuccess = result.success;
      `
    }
  }
}

Documentation Structure​

Each component has dedicated pages:

  • Component Overview - Basic usage and examples
  • Input Handlers - Complete reference for all dynamic properties
  • Events - Complete reference for all interaction handlers

Example: TextInput, TextInput Inputs, TextInput Events

See Also​