Common Properties

Many components share a set of common properties that control layout, style, behavior, actions, and validations. Instead of repeating these settings in each component, this page provides a centralized explanation.

1. Layout

Defines how the component is displayed and positioned in responsive layouts.

• Breakpoints → Controls how many grid columns the component spans at different screen sizes (e.g., 12 12 12 12).
• Spacing → Defines spacing around the component, inherited from the parent layout or set explicitly.

📘 Components reference: Layout

2. Style

Allows customizing the visual appearance of components.

• Apply custom CSS properties.
• Override colors, padding, margins, and typography.
• Use it to adapt components to branding or UI guidelines.

📘 Components reference: Style

3. Actions

Actions define what happens when a component triggers an event (e.g., click, change, blur).

• Supported events vary per component, such as onChange, onClick, or onBlur.
• Actions can:
  • Update variables
  • Call APIs
  • Navigate between pages
  • Show notifications or dialogs

📘 Components reference: Actions

4. Validations

Validations enforce rules on input components, ensuring that user data matches the required conditions.

Available Validation Types:

• required → Field cannot be empty
• email / url / emoji → Format checks
• min / max → Numeric or string limits
• includes / startsWith / endsWith → String checks
• custom → Write custom logic (e.g., {{ currentUser.name == "veli" }})

Each validation supports a custom error message.

📘 Components reference: Validations

5. Tooltip

Some components support tooltips for contextual hints.

• Title → Text shown in the tooltip
• Placement → Defines where the tooltip appears (top, bottom, left, right)

📘 Components reference: Tooltip

✅ Summary

• Layout → Controls placement & responsiveness
• Style → Custom visual adjustments
• Actions → Event-driven behavior
• Validations → Enforce data integrity
• Tooltip → Add helpful hints

These properties are reusable across all components, ensuring consistency and reducing duplication in configuration.