Astro Web Components

repository·main·Indexed 41 days ago

https://github.com/rocketcommunicationsinc/astro

A framework-agnostic library of UI components providing a consistent design language through custom elements. It includes support and integration guides for HTML, Vue, Angular, and React, as well as a dedicated React wrapper package (@astrouxds/react) and an Angular library (angular-lib).

Tokens: 123.5K
Snippets: 399
Records: 530
Agent score: 99%

What's inside Astro Web Components

Use the rux-input component
main
The rux-input component allows users to enter freeform text. It supports various data entry formats including masked data (passwords, phone numbers), date/time, and numeric entry. For detailed UX guidelines, refer to the Astro UXDS: Input Field documentation.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/stories/input.mdx
Use the rux-toast component
main
The rux-toast component is used to display brief, non-intrusive messages to the user. It can be configured with different statuses (e.g., 'critical', 'caution'), automatic closing delays, and custom messages via properties or the default slot.
```
<rux-toast 
  message="Operation successful" 
  status="normal" 
  close-after="5000">
</rux-toast>
```
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/components/rux-toast/readme.md
Use the rux-menu component
main
The rux-menu component is a web component used to display a menu of items. It works in conjunction with rux-menu-item components. When a user selects an item within the menu, the component emits a ruxmenuselected event containing the selected item in the event detail.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/components/rux-menu/readme.md
Use the rux-table-cell component
main
The rux-table-cell is a web component used to represent an individual cell within a rux-table. It is a low-level component typically managed by the parent table component. It is currently a dependency for the rux-log component.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/components/rux-table/rux-table-cell/readme.md
Use the rux-accordion component
main
The rux-accordion is a web component used to create expandable/collapsible sections of content. It supports disabling the entire component and controlling whether multiple sections can be expanded simultaneously.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/components/rux-accordion/readme.md
Use the Tree navigation component
main
The rux-tree component presents a hierarchical set of related items, allowing users to explore and select items within a hierarchy. Items can be expanded to reveal subitems or collapsed to hide them.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/stories/tree.mdx
Use the RuxMenu component
main
The RuxMenu is a pre-built container component primarily used within Pop Up components. It provides a structured way to display menus in a UI.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/stories/menu.mdx
Use the RuxMonitoringIcon component
main
The RuxMonitoringIcon is used to represent objects, equipment, or concepts being monitored. It is designed to visually communicate status concisely and clearly to users. For detailed design principles, refer to the Astro UXDS: Icons and Symbols documentation.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/stories/monitoring-icon.mdx
Use the rux-accordion-item component
main
The rux-accordion-item is a web component used to represent a single item within an accordion. It manages its own expanded/collapsed state and provides slots for a label, a prefix, and the main content area.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/components/rux-accordion/rux-accordion-item/readme.md
Use the RuxTimeRegion component (BETA)
main
The RuxTimeRegion component is currently in BETA. This means breaking changes may be introduced at any time without following standard semver release strategies. Users should frequently check release notes and update applications to accommodate changes.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/stories/time-region.mdx
Use the Global Status Bar component
main
The rux-global-status-bar is a full-width component positioned at the top of an application. It is designed to house global application information such as the Application Name, Application State, Monitoring Icons, Top-Level Navigation, and Emergency Buttons.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/stories/global-status-bar.mdx
Use the Clock component
main
The rux-clock component displays the current or a provided date and time. It can optionally include AOS (Arrival On Station) and LOS (Loss Of Signal) timers. It is typically used in a Global Status Bar.
Key Features:
- Dynamic Ticking: Shows real-time updates by default.
- Static Mode: Use the static attribute to prevent the clock from ticking, allowing you to display a fixed time.
- Timestamps: Supports aos, los, and date-in attributes for displaying specific mission times.
- Timezones: Supports standard timezones and military timezone identifiers.
https://github.com/rocketcommunicationsinc/astro/blob/main/packages/web-components/src/stories/clock.mdx

Astro Web Components

What's inside Astro Web Components

Key Features: