DOCSEARCHbyAlgolia
Submit Docs

Orion UI Documentation

website·Indexed 32 days ago

https://orion.myenso.fr/

A UI framework providing a comprehensive set of components (such as OrionLayout, OrionChat, and OrionTour), services for validation, overlays, and prompts, and developer tooling for logging and event bus communication.

Tokens
41.9K
Snippets
228
Records
350
Agent score
48%

What's inside Orion UI

  1. Overview of OrionDateTable component

    The <o-date-table> component is a calendar display used to pick dates. While it is a sub-component of <o-datepicker>, it can be used as a standalone component to display calendar data and manage date periods, including the ability to exclude specific dates.

  2. 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 (DX). Key features include out-of-the-box rich functionality, easy customization through CSS variables and typed configurations, and support for customizable component prefixes.

  3. Use the OrionInput component

    The <o-input> component displays a customizable input field. It supports two-way data binding via v-model and provides extensive configuration for masking, validation, and visual styling.
    <o-input v-model="myValue" label="Username" placeholder="Enter your name" />

  4. Use the OrionPhone component for phone number inputs

    The <o-phone> component provides a specialized input field for phone numbers. It automatically formats the number based on the selected country. It supports optional display of country flags and can be configured specifically for mobile phone numbers.

  5. Use OrionAvatar to display user or object thumbnails

    The <o-avatar> component represents people or objects (e.g., article thumbnails). If the avatar prop is undefined, the component automatically displays the first letter of the name prop as a fallback. If an update-function is provided, an upload icon is automatically added to the component to trigger that function.

  6. Use the OrionRate component for ratings

    The <o-rate> component is used to evaluate or display a rating. It supports custom icons, colors, and sizes, and can be set to a read-only state using the disabled prop.

  7. Use OrionSelect for customizable dropdowns

    The <o-select> component displays a customizable dropdown field. It supports basic selection, multiple selection mode, and advanced data fetching from remote URLs or custom functions.

  8. Use OrionToastActions for bulk item actions

    The OrionToastActions component provides a temporary contextual action bar that appears when items are selected, allowing users to execute bulk actions without leaving the current list context. Note that this is a quick-action tool for selections and is not intended for system feedback notifications (toasts).

  9. Display keyboard shortcuts with OrionKbd

    The <o-kbd> component renders keyboard shortcuts as one or more key chips. It supports single keys or arrays of keys, automatically resolving modifiers like meta and alt based on the user's operating system. Special keys such as enter, esc, tab, space, backspace, and delete are rendered as symbols, while up, down, left, and right are rendered as arrow icons.

  10. Implement a standard application layout with OrionLayout

    The <o-layout> component allows for rapid prototyping of application interfaces by providing a standard default layout. It manages the positioning of top navigation, main navigation, and the primary content area.

  11. Implement file uploads with OrionUpload

    The <o-upload> component provides a user interface for uploading files. It supports single or multiple file selection and can be configured to show previews of the selected files.