Navigation Back to home

ApiBar

A beautiful ApiBar that can make your life easier and also looks good.

Import
the javascript logo
import { ApiBar } from "@schukai/monster/source/components/form/api-bar.mjs";
Source
the git logo
Package
the npm logo
Since
3.90.0

Introduction

The ApiBar web component, a key part of the Monster library, is designed to enhance web applications by dynamically loading interactive buttons based on API data. Ideal for applications that require real-time data display or interaction, the ApiBar can dynamically generate buttons that represent actionable items fetched from specified APIs.

Key Features

  • Dynamic API interaction: Automatically fetches data and creates buttons based on API responses, enabling real-time user interaction with external data sources.
  • Highly customizable: Offers extensive customization options for button appearance, behavior, and response handling through comprehensive configuration settings.
  • Accessibility compliant: Ensures that all users can interact with the generated buttons, adhering to accessibility standards for inclusive design.
  • Advanced templating: Utilizes templates for labels and URLs, allowing for intricate designs and functionalities to be embedded within each button.
  • Robust error handling: Implements sophisticated error handling mechanisms to manage and display errors effectively during API interactions.

Improving the user experience

ApiBar extends beyond traditional button functionalities by integrating directly with APIs to fetch and display data as interactive buttons. This not only makes the interface more engaging but also ensures that users have the most current data at their fingertips, enhancing usability and satisfaction.

This dynamic interaction model is supported by user feedback and analytics, indicating a positive impact on user engagement and efficiency.

Efficiency in the development process

Integrating ApiBar into your development environment is straightforward. Compatible with modern web frameworks and built to adhere to standard web technologies, ApiBar simplifies the process of adding dynamic, data-driven buttons to your applications, thereby enhancing developer productivity and reducing time to market.

API Bar

The Monster Api Bar is a simple component that displays a bar, that contains Buttons, that can be used to interact with your API.

Javascript

import '@schukai/monster/source/components/form/api-bar.mjs';<script type="module">import '@schukai/monster/source/components/form/api-bar.mjs';</script>

HTML

<monster-api-bar>
</monster-api-bar>

Stylesheet

/** no additional stylesheet is defined **/
Open in playground

Component Design

This component is built using the Shadow DOM to encapsulate its internal structure and styling. By leveraging a shadow root, the component ensures that its layout and behavior remain protected from external CSS and JavaScript, avoiding conflicts with surrounding content.

Shadow DOM and Accessibility

The Shadow DOM encapsulation restricts direct access to the component's internal structure. This ensures that developers cannot manipulate or style the component's elements externally, preserving a consistent and predictable user experience. However, specific customization is possible using exposed parts.

Customizing Through Exported Parts

While the Shadow DOM protects the component's internal structure, certain exported parts allow developers to style key areas of the component using CSS. These parts enable flexible styling without compromising encapsulation.

Available Part Attributes

  • control: Represents the main container for the component, including its layout and structure.
  • api-button: Represents individual buttons within the ApiBar, which are dynamically generated.

Below is an example of how to use CSS part attributes to customize the ApiBar component:


monster-api-bar::part(control) {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    gap: 8px;
}

monster-api-bar::part(api-button) {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

Explanation of the Example

  • monster-api-bar::part(control): Styles the main container of the ApiBar with a border, background color, and spacing.
  • monster-api-bar::part(api-button): Customizes individual buttons, including background color, text color, and padding.
  • monster-api-bar::part(api-button):hover: Adds a hover effect to change the button's background color for better interactivity.

Accessibility

Accessibility is a core focus in the design of the ApiBar component. The component ensures support for keyboard navigation, semantic HTML structure, and compatibility with screen readers. Dynamically generated buttons are fully accessible and provide appropriate feedback to users, including success and failure states.

HTML Structure

<monster-api-bar></monster-api-bar>

JavaScript Initialization

const element = document.createElement('monster-api-bar');
document.body.appendChild(element);

Exported

ApiBar

Derived from

ButtonBar

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the ButtonBar.

Option
Type
Default
Description
mapping
object
undefined
The mapping object.
mapping.selector
string
undefined
The selector to find the buttons in the response.
mapping.labelSelector
string
undefined
The selector to find the label for the button.
mapping.labelTemplate
string
undefined
The template to create the label for the button.
mapping.apiTemplate
string
undefined
The key to find the api value in the response.
mapping.urlTemplate
string
undefined
The key to find the url value in the response, if empty the api value is used.
mapping.filter
function
undefined
The filter function to filter the buttons.
url
string
undefined
The url to fetch the data.
buttonTag
string
undefined
The tag name of the button
api
object
undefined
The api options.
api.fetch
object
undefined
The fetch options.
api.body
string
undefined
The body template.
callbacks
object
undefined
The callbacks object.
callbacks.beforeApiCall
function
undefined
The beforeApiCall callback called before the api request is made.
callbacks.failedApiCall
function
undefined
The failedApiCall callback called when the api request failed.
callbacks.successfulApiCall
function
undefined
The successfulApiCall callback called when the api request was successful.
fetch
object
undefined
The fetch options.
fetch.redirect
string
undefined
The redirect option.
fetch.method
string
undefined
The method option.
fetch.mode
string
undefined
The mode option.
fetch.credentials
string
undefined
The credentials option.
fetch.headers
object
undefined
The headers option.
fetch.headers.accept
string
undefined
The acceptance option.
actions
object
undefined
The actions object.
actions.execute
function
undefined
The execute action.
data
object
undefined
The data object, this can be used to store some data and send it with the request.

  • since
  • deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the ButtonBar.

  • data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
  • data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the ButtonBar.

Behavioral methods

fetch(url)
Parameters
  • url
Returns
  • {Promise}
No description available.

Static methods

[instanceSymbol]()
Returns
  • {symbol}
This method is called by the instanceof operator.
getCSSStyleSheet()
Returns
  • {CSSStyleSheet[]}
No description available.
getTag()
Returns
  • {string}
No description available.

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()
Returns
  • {void}
No description available.

Other methods

importButtons(data)
Parameters
  • data {array|object|map|set}: data
Returns
  • {ApiButton}
Throws
  • {Error} map is not iterable
  • {Error} missing label configuration
Import buttons from a map.

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.