Patterns

Application Bars is a menu bar control that is placed at the top of an application. An Application Bar is always on top of body content except or Drawers and Modals.

An Applicaiton Footer is a global component that is places at the bottom on an application.

Applicaiton Switcher Button is used to switch between OLYSENSE applications.

An Applicaiton Switcher is used to switch between OLYSENSE applications and is accessible from the Application Bar.

An Applicaiton User Menu display a Users' profile and other actions the user can perform, like logging of an application. It is accessible from the Application Bar.

The Combobox provides an autocomplete input and command palette with a list of suggestions.

A Data Table is a dynamic table-like UI component designed to present and manipulate structured data. It supports features such as sorting, filtering, pagination, and grouping, enabling users to explore and interact with data efficiently. Data Table should not be confused with a Table, which has very limited functionality.

Dropdowns expose additional content that “drops down” in a panel. Dropdowns consist of a trigger and a panel. Activating the trigger will expose the panel and interacting outside of the panel will close it.

Inline Panel is a collapsible component anchored to the right side of the page. It expands horizontally into view, pushing adjacent content over rather than overlaying it. When collapsed, the panel minimizes to a slim rail of buttons, preserving screen real estate.

Page Headers are used to render a page title and actions placed at the top of page.

A Popover can be used to create UI Patterns that show content in overlays above other content. A trigger element (Button, Icon Button) is used to display the contents you want to display.

A Stats Card pattern is used to display summerized statisitcs and status information with support for integration into an applications filtering system.