HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Error Pages
Themed error page styling.
Examples

HTML

<div id="error-page-example-container" style="position: relative; height: 500px;"></div>

JavaScript

hx.select('#error-page-example-container').append(hx.errorPage({
  title: '404',
  message: 'The content you requested was not found',
  buttons: [
    {
      text: 'Back',
      onClick: () => window.history.back(),
    },
    {
      text: 'Home',
      url: '/',
      buttonType: 'primary',
    },
  ],
}));
Api
Change Log
Functions
errorPageoptionsObject
A function for creating an error page as a Selection based on passed in arguments
Arguments
options
Properties
buttonsArray[Button]
An array of button objects to display. Usually consists of a link to go back and a link to the home page.
Button
Properties
buttonTypeString
The button type to use. Can be undefined or one of 'primary' or 'secondary'.
onClick
The function to call when clicking the button. Takes precedence over url
This causes the button to be a <button> element
textString
The text to display on the button
urlString
The url to link to. This causes the button to be an <a> element
messageString
The body of the error message. Strings containing newlines ( \n) will be split into paragraphs.
titleString
The title for the error message
Classes
hx-error-message
The class to give to the error message container. This container will be moved to the exact centre of the page.
Classes
hx-error-message-heading
The class to give to the heading for the error message. This should be a short string or error number (e.g. 404)