Oruga UI Documentation

The Datetimepicker is an input component that allows users to select a date and time. It supports two primary interaction modes:

1. Calendar Selection: Users can select a date and time from a customizable calendar via a popover/modal. The overlay is implemented using the native Popover API.
2. Direct Input: Users can type the date directly into the input field, with full internationalization support based on the browser's locale.

On mobile devices, the component defaults to using the native device datetimepicker for an optimized user experience.

Note: The component is built upon the Datepicker and Timepicker components. For full functionality and consistent styling, it is recommended to use it within an Field component.

Oruga UI is a lightweight, CSS-agnostic UI component library for Vue.js. It is designed to be functional and minimal, providing enhanced functionality for native HTML elements while adhering to WCAG recommendations and WAI-ARIA patterns.

Key characteristics include:

• CSS Framework Agnostic: It has no built-in CSS or mandatory CSS framework dependencies. You can use predefined themes or create your own.
• Highly Customisable: Components use a CSS class-mapping approach, allowing you to configure classes for HTML elements globally or on a per-instance basis.
• Lightweight & Tree-shakeable: Aside from Vue.js, Oruga has no internal dependencies and supports tree-shaking so you only bundle the components you actually use.

The Datetimepicker component allows users to select both a date and time. It supports internationalization by using the browser's locale for the calendar and allows direct text input.

Key behaviors:

• Desktop: Opens a customizable calendar popover/modal for selection. It uses the native Popover API for the overlay.
• Mobile: Utilizes the device's native datetimepicker.
• Integration: For full functionality (labels, validation, etc.), it should be used in conjunction with the Field component.
• Composition: It is built upon the Datepicker and Timepicker components.

The Slider component allows users to select a single value or a range of values from a specified interval using a graphical slider. It is designed to be accessible, implementing the W3C ARIA APG Slider Pattern.

For a complete form experience (including labels, help text, and error messages), it is recommended to wrap the Slider within a Field component.

The Dropdown component is a versatile UI element used for:

• Displaying lists as contextual overlays.
• Creating quick menus.
• Providing a selectable list of content options.

Unlike native <select> elements, the Oruga Dropdown allows for full customization of both appearance and behavior. It implements W3C ARIA APG patterns (either Combobox or Menu Button depending on usage) and utilizes the native Popover API for its overlay implementation.

The Listbox component is an input component similar to a standard <select> element. It presents a list of options and allows users to select one or more items. It is built with accessibility in mind, implementing the ARIA listbox role and following the W3C ARIA APG Listbox Pattern.

For a complete form experience (including labels, help text, and error messages), combine the Listbox with the Field component.

The Taginput component allows users to search through a list of options and apply them as a collection of tags. It is built upon the Autocomplete component and implements the W3C ARIA APG Combobox Pattern. It utilizes the native Popover API for its dropdown functionality.

To access all available functionalities and proper layout, it is recommended to use Taginput inside a Field component.

The Carousel component is a slideshow widget used to cycle through a set of elements (slides), such as images or text. It displays a subset of slides sequentially, allowing users to navigate through them using next or previous controls. The component is built to follow the W3C ARIA APG Carousel Pattern for accessibility.

<Carousel>
  <!-- Slides go here -->
</Carousel>

The Carousel component is a slideshow widget designed to cycle through a set of elements (referred to as 'slides'), such as images or text. It displays one slide at a time and provides controls to navigate to the next or previous slide, effectively 'rotating' them into view.

This component is built to follow the W3C ARIA APG Carousel Pattern for accessibility.