1.0.0
The outline of a Ignite Element that extends the html element and can be used to create custom components. Ignite Element's use an Ignite Template for the render function.
Extends HTMLElement
class MainApp extends IgniteElement {
constructor() {
super();
}
get properties() {
return {
};
}
render() {
return this.template
.child(
new h1(`<i class="fad fa-fire-alt" style="--fa-primary-color: #FFC107; --fa-secondary-color: #FF5722; --fa-secondary-opacity: 1.0;"></i> Ignite HTML`),
new h4(`Adding more fire to the web.`)
);
}
}
customElements.define("main-app", MainApp);
//If you want to easily use an Ignite Element with templates see the following which can be added
//to any component file
class MainAppTemplate extends IgniteTemplate {
constructor(...children) {
super("main-app", children);
}
}
export {
MainAppTemplate as MainApp
}
//If a template was created for a Ignite Element (like the previous example) it can be used just like any other template:
new MainApp()
Returns an object with all the properties for this ignite element. If null or empty then no properties will be created. To change a property and read it's current value see below.
any
:
An object with properties that will be assigned to this ignite element.
get properties() {
return {
show: false,
title: "This is a title",
items: [1, 2, 3]
};
}
//To change a property access it via this.PROP_NAME
this.show = false;
//To get a properties value access if via this.PROP_NAME
console.log(this.title);
Returns any CSS styling code for this ignite element. If this returns a non null value the CSS will auto be injected into the current HTML page once and reused for the life of the ignite element.
any
:
A string containing CSS code to be used with this ignite element.
get styles() {
return `
h1 {
color: black;
}
`;
}
Resets the properties for this element back to their original default value.
Returns the template to be rendered for this element.
any
:
An ignite template to be used to construct this ignite element.
render() {
return this.template
.child(
new h1(`<i class="fad fa-fire-alt" style="--fa-primary-color: #FFC107; --fa-secondary-color: #FF5722; --fa-secondary-opacity: 1.0;"></i> Ignite HTML`),
new h4(`Adding more fire to the web.`)
);
}
The outline of a ignite template. Templates are a blueprint that specify's how to construct an element and then can be used to construct the element. Everything starts with a template.
(String
= null
)
The tag name of the element this template will construct.
((String | Number | IgniteProperty | IgniteTemplate)
= null
)
An array of child elements to be added to this template.
//You can easily create a template to construct any html element. See the following:
class div extends IgniteTemplate {
constructor(...items) {
super("div", items);
}
}
Adds a CSS class to this template to be added once this template is constructed.
((String | IgniteProperty))
Name of the CSS class to add.
(Function
= null
)
Optional function that can convert the class name into a different one.
any
:
This ignite template so function calls can be chained.
Adds a html element attribute to this template to be added once this template is constructed.
(String)
The name of the attribute to add
((String | IgniteProperty))
The value of the attribute to set, can be anything. If Property is passed it will auto update.
(Function
= null
)
Optional function that can convert the value if needed.
any
:
This ignite template so function calls can be chained.
Adds a property to this template to be added once this template is constructed.
(String)
Name of the property to set.
((Any | IgniteProperty))
Value of the property to use. If a Property is passed the value will auto update.
(Boolean
= false
)
If true whenever this property is changed it's value will be passed back to the Property that was passed as value if one was passed.
(Function
= null
)
Optional function that can be used to convert the value if needed.
any
:
This ignite template so function calls can be chained.
Adds a single or series of children to be added once this template is constructed. Numbers, Strings, and Properties passed will be added as HTML child elements.
(...(Number | String | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
any
:
This ignite template so function calls can be chained.
Adds a reference callback function to be invoked once this template is constructed. The function will be invoked with the constructed HTMLElement. If an IgniteProperty is passed it's value will be set to the constructed HTMLElement once the template is constructed.
((Function | IgniteProperty))
The callback to be invoked with the HTMLElement of the element this template constructed.
any
:
This ignite template so function calls can be chained.
Adds an event by its name and the function to invoke once the event fires. Properties may be used for the function, but their value must be a valid function in order to get a proper event callback.
(String)
The name of the event to add.
((Function | IgniteProperty))
The callback function to be invoked by the event once it fires.
any
:
This ignite template so function calls can be chained.
Adds a on enter key press event handler to this template.
((Function | IgniteProperty))
The callback function to be invoked by the event once it fires.
any
:
This ignite template so function calls can be chained.
Adds a CSS property to this template with a value and priority.
(String)
The name of the CSS property to set.
((String | IgniteProperty))
The value to set for the property. If an IgniteProperty is used it will auto update this style.
(String
= null
)
If set to "important" then the style will be marked with !important.
(Function
= null
)
Optional function to convert the value if needed.
any
:
This ignite template so function calls can be chained.
Constructs this template and adds it to the DOM if this template has not already been constructed.
(HTMLElement)
Parent element that will contain the constructed element.
(HTMLElement)
Optional sibling element that can be used to add the element adjacantly.
Deconstructs this template and cleans up all resources to make sure there are no memory leaks.
An ignite template that can be used to construct a div element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a hyperlink element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a input element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a button element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a h1 element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a h2 element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a h3 element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a h4 element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a h5 element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a p element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a span element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct an i element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a br element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
An ignite template that can be used to construct a img element.
Extends IgniteTemplate
(...(String | Number | IgniteProperty | IgniteTemplate))
A series of children to be added to this template.
Html is a special template that can construct raw html or properties into the dom and automatically update the dom if the property changes.
Extends IgniteTemplate
((String | IgniteProperty))
HTML code to be constructed within this template. If an IgniteProperty is passed it's value will be used.
new html(`<h1>Hello world!</h1>`)
A special ignite template that constructs a list of items using a template that is dynamically created for each item.
Extends IgniteTemplate
((Array | IgniteProperty))
The list of items to construct within this template.
(Function)
A function that construct a template for an item from the list that is passed to it.
new list(["1", "2", "3"], (item) => {
return new h1(item);
})
A slot template that mimicks the functionality of a slot element in Web Components. This can be used to place children of a IgniteElement anywhere in the DOM. Slots don't actually construct an element, they simply just place children in place where the slot was used.
Extends IgniteTemplate
(IgniteElement)
The parent IgniteElement that this slot is for.
new slot(this)