LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
<div class="lui-app_logo">
  <img class="lui-app_logo_image" src="/assets/app_logos/logo_core_expanded-a6a2e4d9.svg" />
</div>

AppLogo

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
<%= render LooposUi::AppLogo.new(**preview_params) %>

No notes provided.

Param Description Input

—

—

AppLogo Component

AppLogo is a component that displays application-specific logos for different LoopOS applications. It supports both standard and expanded logo variants and automatically selects the appropriate logo file based on the application type.

Arguments

Property Type Default Required Description
app Symbol - ✓ The application type to display logo for
expanded Boolean false ✗ Whether to show the expanded version of logo

App Types

The app argument accepts one of the following symbols:

  • :manager - Displays the main LoopOS logo
  • :core - Core application logo
  • :submission - Submission application logo
  • :validation - Validation application logo
  • :handling - Handling application logo
  • :hubs - Hubs application logo

Expanded Variant

When expanded is set to true, the component will display the expanded version of the logo (suffixed with _expanded.svg). When false (default), it displays the standard logo (suffixed with .svg).

Usage Examples

<!-- Standard LoopOS logo -->
<%= render LooposUi::AppLogo.new(app: :manager) %>
<!-- Expanded LoopOS logo -->
<%= render LooposUi::AppLogo.new(app: :manager, expanded: true) %>
<!-- Core application logo -->
<%= render LooposUi::AppLogo.new(app: :core) %>
<!-- Submission application expanded logo -->
<%= render LooposUi::AppLogo.new(app: :submission, expanded: true) %>

File Structure

The component expects logo files to be located in the app_logos/ directory with the following naming convention:

  • Standard logos: logo_{app_name}.svg
  • Expanded logos: logo_{app_name}_expanded.svg
  • Special case: :manager app uses logo_loopos.svg and logo_loopos_expanded.svg