HexagonJS
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
Functions
errorPageoptionsObjectadded
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
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)