DOCSEARCHbyAlgolia
Submit Docs

Orion UI Documentation

website·Indexed 31 days ago

https://orion-ui.org/

A UI framework featuring a comprehensive library of components such as OrionModal, OrionList, and OrionTour, alongside specialized services for validation, overlays, and prompts. It includes developer tooling for logging, event bus communication, and data validation, as well as guides for installation and CSS variable customization.

Tokens
47.4K
Snippets
281
Records
348
Agent score
49%

What's inside Orion UI

  1. Overview of OrionCard component

    The <o-card> component is used to display information in a standard card format. It can be customized using props such as title and size, or via slots for flexible content placement. It is particularly useful as a list item when paired with a grid layout.

  2. Overview of OrionLayout component

    The <o-layout> component is used to quickly prototype application ideas by providing a standard default layout. It manages the positioning of top navigation, main navigation, and the primary content area based on provided props and slots.

  3. Overview of the Orion UI Framework

    Orion is a simple yet powerful UI framework built for Vue 3 and Vite. It is written in TypeScript to provide a fully typed developer experience. The framework supports customization through CSS variables, typed configuration objects, and customizable component prefixes.

  4. Use the OrionAlert component

    The <o-alert> component displays an element to show information or catch the user's attention. It supports custom titles, centering, and various color themes based on the Orion.Color type. All colors are defined via CSS variables and can be overridden.
    <template>
  <o-alert
    color="info"
    title="Alert Title"
    :center="true">
    This is the alert content.
  </o-alert>
</template>

  5. Use the OrionRate component for ratings

    The <o-rate> component is used to evaluate or display a rating. It supports custom colors from Orion.Color, custom icons, and the ability to display the total number of ratings received.

  6. Implement the Orion component architecture

    Orion components follow a strict separation of concerns across three files to maintain clean code and improve customizability:

    1. Template (.vue): Contains the HTML structure and minimal script setup to instantiate the logic class.
    2. Style (.less): Separate LESS files are used instead of scoped styles to make CSS overriding easier for end-users.
    3. Logic (.ts): All component logic is encapsulated in a TypeScript class (SetupService). This allows the use of inheritance and access modifiers (private, protected) to hide internal logic from the Vue template, resulting in cleaner Intellisense.

  7. Use the OrionLoader component

    The <o-loader> component displays an animated loader. It can be configured to appear within its parent element or as a fullscreen overlay using the global prop. Visibility is controlled via the visible prop.
    <template>
  <o-loader
    visible
    size="md"
    color="brand"
    message="Loading..."
  />
</template>

  9. Use the OrionSection component

    The <o-section> component is used to display content within a predefined styled section. It supports a title, a subtitle, and a dedicated slot for action elements (like buttons).
    <o-section title="Section Title" subtitle="Section Subtitle">
  <template #actions>
    <o-button color="inverse">Action</o-button>
  </template>
  <p>Main section content goes here.</p>
</o-section>

  10. Manage multiple overlapping popables

    OrionAside is part of the 'Popables' family (along with OrionNotif and OrionModal). If a new aside is opened while another is already active, the first one is placed in a queue and will automatically reappear once the second one is closed.

  11. Use the OrionButton component

    The <o-button> component displays a customizable button. It supports various colors from Orion.Color, different visual styles (classic, outline, nude), and various sizes from Orion.Size.
    <template>
  <o-button color="brand" outline>Click Me</o-button>
</template>

  12. Use the useMonkey service for non-destructive prototype extensions

    The useMonkey service allows developers to access Orion's extended methods for native prototypes (Array, Number, Date, and String) without actually patching the native prototypes. This is ideal for projects that want to avoid modifying global prototypes. The service automatically infers the parameter type to provide the correct available methods.
    // Array extension
useMonkey(['a', 'b', 'c']).delete('b');
// returns -> "['a', 'c']"

// Date extension
useMonkey(new Date(2022, 8, 5)).toReadable('$dddd, $YYYY-$MM-$DD');
// returns -> "Wednesday, 2022-09-05"

// Number extension
useMonkey(1.5).toHoursMinutes();
// returns -> "01:30"

// String extension
useMonkey('Hello world').insert(' tiny', 5);
// returns -> "Hello tiny world"