Wire Components

The WireBootstrap framework brings data management services into UI components standardizing how they are bound to data and their respective configurations. WireBootstrap components are designed to be web framework agnostic.

The example below binds WireBootstrap's Bootstrap Buttons component to an HTML element with the id of my-table.

<div id="buttons"></div>

const config = {
    data: new wire.data.DataSet(...)
};

new wire.bsButtons().render("#buttons", config);

Web Components

Any component created by WireBootstrap can be used as a web component. For details on web component support for a WireBootstrap component created by others, visit the component documentation.

Use the wire-component element to render WireBootstrap components as web components. This element has the following properties.

Property Name	Property Description
component	The fully qualified class name of the component.
config	The configuration object use to bind the component.
data	When only a data object is required, use this shortcut to set the data property on a configuration object.

Note, the config and data properties are object binds and require the wr prefix be added to the attribute name.

The example below is the web component version of the same example above.

<wire-component component="wire.bsButtons" wr-config="config"></wire-component>

Component Properties

In addition to these native properties, any configuration properties unique to a component can be set using the attributes of wire-component.

Rather than using a full configuration object, the following example sets the color configuration property on the buttons to be btn-secondaryusing the color attribute on wire-component. It also configures the data for the component using the data property.

<wire-component 
    component="wire.bsButtons" 
    wr-data="data" 
    color="btn-secondary">
</wire-component>

For details on how to use WireBootstrap components in other web frameworks, visit Web Frameworks in the core WireBootstrap documentation.

Component Reference

In order to work directly with a component in JavaScript, get a reference to the component's HTML element in JavaScript. Then use the wrComponent property on the element to get a reference to the internal component object.

<!-- HTML -->
<wire-component id="my-button" component="wire.bsButtons"></wire-component>

// JavaScript
const component = document.getElementById("my-button");

const button = component.wrComponent;

In TypeScript, WireBootstrap's TypeScript interfaces can be used to do the same cast.

const component = document.getElementById("my-button") as IWireWebComponent;

const button = component.wrComponent as IWireBsButtonsComponent;

Pro Pack

The WireBootstrap Component Pro Pack includes native Web Components for all of the components in the pack as well as the standard WireBootstrap components.

<wire-bs-buttons wr-config="config"></wire-bs-buttons>