Components

The Component Library contains a vast number of pre-existing components, which are listed in the table below. Components which are in a stable, functional state are marked with a green checkmark (✅) icon in the table's middle column.

Aside from their functionality, the Elentra Core Team is currently in the process of modifying each of these components and updating their internal code so that they:

• Adhere to the proper coding standards for both component template and TypeScript class code

• Are fully documented with JSDoc-style comment blocks attached to each of the following:

  • Components

  • Slots

  • Props

  • Data Attributes

  • Computed Props

  • Methods

  • Lifecycle Hooks

As we progress through the collection of functional components, we will be documenting their inner workings with descriptions to enhance their readability and consistency. The chart below tracks our progress as we go through the documentation & standardization process.

Components that have been processed, documented, and updated to standards will be indicated by with a second green checkmark (✅) in the right-most column of the table. Alternatively, an hourglass icon (⏳) present in that final column indicates that the component has gone through the documentation & standardization process but is currently awaiting review and testing before finally being merged in to the Elentra JS 2.0 repository.

Component	Functional?	Documented & Updated to Coding Standards?
ActionBar	✅	⏳
Alert	✅	✅
Anchor	✅	⏳
Audio	✅	⏳
BackHeading	✅	⏳
Badge	✅	✅
Button	✅	⏳
ButtonDownload	✅	⏳
ButtonGroup	✅	⏳
Card	✅	⏳
CardDeck	✅	⏳
Checkbox	✅	⏳
Confirm	✅	⏳
Container	✅	⏳
Datetime	✅	⏳
Editor	✅	⏳
Form	✅	⏳
InputField	✅	⏳
Heading	✅	⏳
Hero	✅	⏳
Iframe	✅	⏳
Image	✅	⏳
InputGroup	✅	⏳
Label	✅	⏳
Layout: FiveSixths	✅	⏳
Layout: FourFifths	✅	⏳
Layout: FullWidth	✅	⏳
Layout: OneFifth	✅	⏳
Layout: OneHalf	✅	⏳
Layout: OneQuarter	✅	⏳
Layout: OneSixth	✅	⏳
Layout: OneThird	✅	⏳
Layout: ThreeFifths	✅	⏳
Layout: ThreeQuarters	✅	⏳
Layout: TwoFifths	✅	⏳
Layout: TwoThirds	✅	⏳
Lead	✅	⏳
ListGroup	✅	⏳
ListItem	✅	⏳
InlineLoadingSpinner	✅	⏳
LoadingOverlay	✅	⏳
Modal	✅	⏳
MultiLineInputCard	✅	⏳
NavBar	✅	⏳
NavItem	✅	⏳
PickList	✅	⏳
PickListItem	✅	⏳
Popover	✅	⏳
Preformatted	✅	⏳
PreLine	✅	⏳
Progress	Inclusion Pending
Radio	✅	⏳
RouterLayout: AppHeader	✅	⏳
RouterLayout: CoreRouter	✅	⏳
RouterLayout: MainContent	✅	⏳
RouterLayout: SideNavLayout	✅	⏳
RouterLayout: TopNavLayout	✅	⏳
Row	✅	⏳
ScreenReader	✅	⏳
Scrollbar	✅	⏳
Select	✅	⏳
ShareCard	✅	⏳
SingleLineInput	✅	⏳
SkipContent	✅	⏳
SwitchToggle	✅	⏳
Tab	✅	⏳
TabbedRouter	✅	⏳
Tabs	✅	⏳
TextArea	✅	⏳
TextEditor	✅	⏳
SizeThemeToggle	✅	⏳
ThemeToggle	✅	⏳
Tooltip	✅	⏳
UserList	✅	⏳
Video	✅	⏳
Well	✅	⏳
Wizard	✅	⏳
WizardStep	✅	⏳