Skip to main content

Text Component in CargoXplorer TMS

Introduction​

The Text Component is a fundamental element in CargoXplorer TMS used for rendering various types of text content. It provides flexibility in displaying text with different styles and formats, making it essential for creating informative and well-structured user interfaces.

YAML Structure​

component: text
props:
  type: "p"
  value: "Your text here"
  options:
    className: "custom-class"

Attribute Description​

  • component: (string) Must be set to "text" to use this component type.
  • props: (object) Contains the configuration properties for the text component.
    • type: (string) Specifies the HTML element type for the text. Options include:
      • h1, h2, h3, h4, h5, h6 for headings
      • p for paragraphs (default)
      • span for inline text
      • div for block-level text
    • value: (string or object) The content to be displayed. Supports localization.
    • options: (object) Additional configuration options.
      • className: (string) CSS class names to apply to the text element.

Examples​

Basic Text​

component: text
props:
  value: "This is a simple paragraph."

Heading with Custom Class​

component: text
props:
  type: "h2"
  value: "Important Section Title"
  options:
    className: "section-title highlight-text"

Localized Text​

component: text
props:
  type: "p"
  value:
    en-US: "Welcome to CargoXplorer TMS"
    es-ES: "Bienvenido a CargoXplorer TMS"
    fr-FR: "Bienvenue sur CargoXplorer TMS"

Dynamic Text with Variables​

component: text
props:
  type: "span"
  value: "Current shipment status: {{ shipment.status }}"

Advanced Usage​

Conditional Styling​

component: text
props:
  type: "p"
  value: "Shipment #{{ shipment.id }} is {{ shipment.status }}"
  options:
    className: "{{ eval shipment.status === 'delayed' ? 'text-warning' : 'text-success' }}"

Rich Text Formatting​

When more complex formatting is needed, you can use HTML within the text value:

component: text
props:
  type: "div"
  value: "This text has <strong>bold</strong> and <em>italic</em> parts."

Note: Be cautious with HTML in text to avoid security risks. Ensure proper sanitization is in place.

Best Practices​

  1. Use appropriate heading levels (h1 through h6) to maintain a logical document structure.
  2. Leverage the className option for consistent styling across your application.
  3. Utilize localization features for multi-language support.
  4. Keep text concise and clear, especially for labels and headings.
  5. Use variables and conditional rendering to create dynamic, context-aware text.
  6. Avoid overusing custom styling options; maintain consistency with your application's design system.

Accessibility Considerations​

  • Ensure proper heading hierarchy for screen readers.
  • Use sufficient color contrast for text visibility.
  • Avoid relying solely on color to convey information.