Skip to content

Utilizing Components

Jump to bottom
Kevin Day edited this page Oct 28, 2021 · 7 revisions

Weaver Components provide individual elements that are simply called a component.

A component may be presented as an HTML element, but do not be confused, it is more than just an HTML element. Each component exists as an entity onto itself. It has its own life-cycle and operates independently of all other elements. When any given component gets dropped onto a page, it will immediately begin being processed until it becomes a fully generated HTML element. Because of this independence it may even be possible to drop any component onto a different project, such as AngularJs or Drupal.

Basic Functionality

At its core, a component is simply an HTML element. All functionality of modifying and extending a component is therefore done on the element itself, generally via a discrete set of attributes explicitly defined by each component.

For every component, configuration, customization, and control is done by adding or removing these attributes as-needed, either when the component is added or dynamically at any point in time while the component is on a page.

For example, a Weaver Alert Component (<wvre-alert></wvre-alert>) can be customized to automatically be closed based on a period of time by appending the attribute close-timer onto the element as such: <wvre-alert close-timer="5000"></wvre-alert>.

For this drop and go approach, check out the Weaver Components Usage Examples.

Use a CDN and link to the appropriate JS and CSS files, such as:

  • <script src="https://example.com/weaver-components.js"></script>
  • <link rel="stylesheet" type="text/css" href="https://example.com/styles.css">

Advanced Functionality

A component is more than just an HTML element, it is also an an Angular Component. This means that each component is exposed as an Angular Component via Typescript. More advanced customization and new features may be achieved by utilizing this.

For this advanced Angular/Typescript approach, check out the Weaver Components API Documentation.

Use the NPM Registry to add the dependency to your project:

Clone this wiki locally