MontoyaTech/ignite-html
MontoyaTech/ignite-html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
ignite-html/docs.md

53 KiB
Raw Permalink Blame History

Table of Contents

IgniteElement

Extends HTMLElement

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.

Examples

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()

template

The ignite html template used to construct this element.

Type: IgniteTemplate

elements

The child elements within this element upon creation.

Type: Array<HTMLElement>

variables

Returns an object with all the variables for this ignite element. Variables unlike properties have no callbacks or events, they are just data.

Examples

get variables() {
 return {
     dialog: null,
     clickCallback: null
 };
}

Returns Object An object with properties that will be assigned to this ignite element as variables.

properties

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.

Examples

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 Object An object with properties that will be assigned to this ignite element.

styles

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.

Examples

get styles() {
 return `
     h1 {
         color: black;
     }
 `;
}

Returns String A string containing CSS code to be used with this ignite element.

resetVariables

Resets the variables for this element back to their original default values.

getProperties

Gets all the property values from this element and returns it.

Returns Object An object with all of the property values for this ignite element.

setProperties

Sets all the property values on this element.

Parameters

  • props

resetProperties

Resets the properties for this element back to their original default values.

attachOnDisconnect

Attaches a function to the on disconnect event for this element and returns a callback.

Parameters

  • onDisconnect Function Disconnect function to be called when on disconnect is raised.

Returns any IgniteCallback created for this callback.

render

  • See: this.template is automatically created for each IgniteElement and must be used in the render() function.

Returns the template to be rendered for this element.

Examples

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.`)
      );
}

Returns any An ignite template to be used to construct this ignite element.

init

Called when this ignite element is being initialized. When this is called the element has not been created. This is good for login checking code or special setup code.

ready

Called when this ignite element is ready. This will invoke once all ignite elements on the current page have been rendered and setup. You can safely know all elements have be initialized and are ready once this is called.

cleanup

Called when this ignite element should cleanup any resources like events, timers, ect. This is called when the element is being destroyed.

uuid

Generates a uuid and returns it.

Returns String A unique string, for example: '1b23ec67-4d90-4992-9c5a-b5c0844deaef'

IgniteObject

The outline of an IgniteObject which contains IgniteProperties.

Parameters

  • obj Any The object to create an IgniteObject out of.

update

Checks this IgniteObject for any properties not converted and automatically converts them.

setProperties

Sets the values of properties on this ignite object.

Parameters

create

Creates an IgniteObject or Array of IgniteObjects and returns it.

Parameters

  • obj (Object | Array) The object to create an IgniteObject from.

Returns IgniteObject The created IgniteObject.

IgniteHtml

Main helper class to access ignite html functions.

register

Registers a new element to be rendered when render() is called.

Parameters

  • name String The tag name of the element to register.
  • definition Any The class definition of the element.

render

Begins rendering all registered elements.

IgniteTemplate

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.

Parameters

  • tagName String The tag name of the element this template will construct. (optional, default null)
  • children (String | Number | IgniteProperty | IgniteTemplate) An array of child elements to be added to this template. (optional, default null)

Examples

//You can easily create a template to construct any html element. See the following:
class div extends IgniteTemplate {
 constructor(...items) {
     super("div", items);
 }
}

IgniteTemplate's construct method can be extended by adding a callback function to _constructors under a template:
template._constructors.push(() => console.log('constructed'));

IgniteTemplate's deconstruct method can be extended by adding a callback function to _destructors under a template:
template._destructors.push(() => console.log('destructed'));

class

Adds a CSS class to be added once this template is constructed.

Parameters

  • name (String | IgniteProperty) Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space.
  • converter Function Optional function that can convert the class name into a different one. (optional, default null)

Examples

.class("row justify-content-center")

Returns IgniteTemplate This ignite template so function calls can be chained.

attribute

Adds a html element attribute to this template to be added once this template is constructed.

Parameters

  • name String The name of the attribute to add
  • value (String | IgniteProperty | Function | Array<IgniteProperty>) The value of the attribute to set, can be anything. If Property is passed it will auto update.
  • converter Function Optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

value

Sets the value of the element this template is constructing with the option to reflect changes to the value.

Parameters

  • value (String | IgniteProperty) The value to set on the element.
  • reflect (Boolean | Function) Whether or not to reflect changes to the value of the element back to the property if one was used. If function passed it will be invoked on value change. Default is false. (optional, default false)
  • converter Function Optional function that can convert the value if needed. Default is null. (optional, default null)
  • live Boolean Whether or not to reflect the value in realtime, ie anytime the input is changed before focus is lost. Default is false. (optional, default false)

Returns IgniteTemplate This ignite template so function calls can be chained.

prop

Sets a property on the element this template will construct. (Shorthand for property())

Parameters

  • name String Name of the property to set.
  • value (Any | IgniteProperty) Value of the property to use. If a Property is passed the value will auto update.
  • reflect Boolean 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. (optional, default false)
  • converter Function Optional function that can be used to convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

property

Sets a property on the element this template will construct.

Parameters

  • name String Name of the property to set.
  • value (Any | IgniteProperty) Value of the property to use. If a Property is passed the value will auto update.
  • reflect Boolean 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. (optional, default false)
  • converter Function Optional function that can be used to convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

variable

Sets a variable on the element this template will construct.

Parameters

  • name String Name of the variable to set
  • value (Any | IgniteProperty) Value of the variable to set
  • converter Function Optional function that can be used to convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

reflect

Makes a property on this template reflect its value back to the given target. (You can reflect a property more than once if it's needed.)

Parameters

  • name String Name of the property to reflect.
  • target (IgniteProperty | Function) The target for the value to be reflected to.

Returns IgniteTemplate This ignite template so function calls can be chained.

properties

Adds a set of properties from an object to be added to this template once it's constructed.

Parameters

  • props (Object | IgniteObject) The object value that property names/values will be pulled from.

Returns IgniteTemplate This ignite template so function calls can be chained.

innerHTML

Sets the inner html of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) InnerHTML to set for element. If a property is passed the html will auto update.
  • converter Function Optional function that can be used to convert the value if needed. (optional, default null)

Returns any This ignite template so funciton calls can be chained.

innerText

Sets the inner text of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty | Array<IgniteProperty> | Function) text to be set for this element. If a property is passed the text will auto update.
  • converter Function Optional function that can be used to convert the value if needed. (optional, default null)

Returns any This ignite template.

child

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.

Parameters

Returns IgniteTemplate This ignite template so function calls can be chained.

ref

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.

Parameters

  • refCallback (Function | IgniteProperty) The callback to be invoked with the HTMLElement of the element this template constructed.

Returns IgniteTemplate This ignite template so function calls can be chained.

on

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.

Parameters

  • eventName String The name of the event to add.
  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onClick

Adds a click event handler to this template.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onTouch

Adds a touch event handler to this template.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onBlur

Adds a onblur event handler to this template.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onFocus

Adds a onfocus event handler to this template.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onChange

Adds a onchange event handler to this template.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onInput

Adds a oninput event handler to this template.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onPaste

Adds a on paste event handler to this template.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked once the event fires.

Returns any This ignite template.

onEnter

Adds a on enter key press event handler to this template.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onBackspace

Adds a on backspace key press event handler to this template.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onResize

Adds a special on resize event handler to this template that will fire anytime the element is resized by using a resize observer. You can call this more than once to attach more than one callback.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onIntersect

Adds a special on intersect event handler to this template that will fire once the element is in view. You can call this more than once to attach more than one callback.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked by the event once it fires.

Returns IgniteTemplate This ignite template so function calls can be chained.

onSeen

Adds a special event handler for this template that will fire the first time the element is seen and does not repeat.

Parameters

  • eventCallback (Function | IgniteProperty) The callback function to be invoked once this element becomes visible.

Returns IgniteTemplate This ignite template so function calls can be chained.

style

Adds a CSS property to this template with a value and priority.

Parameters

  • name String The name of the CSS property to set.
  • value (String | IgniteProperty) The value to set for the property. If an IgniteProperty is used it will auto update this style.
  • priority String If set to "important" then the style will be marked with !important. Acceptable values: important, !important, true, false, null (optional, default null)
  • converter Function Optional function to convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

hide

Hides the element this template is constructing if the value is true.

Parameters

  • value (Boolean | IgniteProperty) If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this.
  • converter Function An optional function to convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

invisible

Hides the element this template is constructing if the value is true.

Parameters

  • value (Boolean | IgniteProperty) If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this.
  • converter Function An optional function to convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

show

Shows the element this template is constructing if the value is true.

Parameters

  • value (Boolean | IgniteProperty)
  • converter Function (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

visible

Shows the element this template is constructing if the value is true.

Parameters

  • value (Boolean | IgniteProperty)
  • converter Function (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

id

Sets the id attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the id attribute of the element this template will construct.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

title

Sets the title attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the title attribute of the element this template will construct.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

for

Sets the for attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the for attribute of the element this template will construct.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

role

Sets the role attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the for attribute of the element this template will construct.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

checked

Adds a checked attribute to this template.

Parameters

  • value (Boolean | IgniteProperty) The value to set for the checked attribute.
  • converter any Optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

disabled

Adds a disabled attribute and class to this template.

Parameters

  • value (Boolean | IgniteProperty) A value to determine whether or not the element should be marked as disable or not.
  • converter any Optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

readonly

Adds a readonly attribute and class to this template.

Parameters

  • value (Boolean | IgniteProperty) A value to determine whether or not the element should be marked as readonly or not.
  • converter any Optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

type

Sets the type attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the type attribute of the element this template will construct.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

min

Sets the min attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the type attribute of the element this template will construct.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

max

Sets the max attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the type attribute of the element this template will construct.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

step

Sets the step attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the type attribute of the element this template will construct.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

data

Sets a data attribute on the element to be constructed by this template.

Parameters

  • name String The name of the data attribute to set on the element this template will construct.
  • value (String | IgniteProperty) The value to set for the data attribute of the element this template will construct.
  • converter any An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

src

Sets the src attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the src attribute of the element to be constructed by this template.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

href

Sets the href attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the href attribute of the element to be constructed by this template.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

target

Sets the target attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the target attribute of the element to be constructed by this template.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

name

Sets the name attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the name attribute of the element to be constructed by this template.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

placeholder

Sets the placeholder attribute of the element to be constructed by this template.

Parameters

  • value (String | IgniteProperty) The value to set for the placeholder attribute of the element.
  • converter Function An optional function that can convert the value if needed. (optional, default null)

Returns IgniteTemplate This ignite template so function calls can be chained.

construct

Constructs this template and adds it to the DOM if this template has not already been constructed.

Parameters

  • parent HTMLElement Parent element that will contain the constructed element.
  • sibling HTMLElement Optional sibling element that can be used to add the element adjacantly.

deconstruct

Deconstructs this template and cleans up all resources to make sure there are no memory leaks.

div

Extends IgniteTemplate

An ignite template that can be used to construct a div element.

Parameters

a

Extends IgniteTemplate

An ignite template that can be used to construct a hyperlink element.

Parameters

input

Extends IgniteTemplate

An ignite template that can be used to construct a input element.

Parameters

textarea

Extends IgniteTemplate

An ignite template that can be used to construct a textarea element.

Parameters

button

Extends IgniteTemplate

An ignite template that can be used to construct a button element.

Parameters

h1

Extends IgniteTemplate

An ignite template that can be used to construct a h1 element.

Parameters

h2

Extends IgniteTemplate

An ignite template that can be used to construct a h2 element.

Parameters

h3

Extends IgniteTemplate

An ignite template that can be used to construct a h3 element.

Parameters

h4

Extends IgniteTemplate

An ignite template that can be used to construct a h4 element.

Parameters

h5

Extends IgniteTemplate

An ignite template that can be used to construct a h5 element.

Parameters

h6

Extends IgniteTemplate

An ignite template that can be used to construct a h6 element.

Parameters

hr

Extends IgniteTemplate

An ignite template that can be used to construct a hr element.

Parameters

p

Extends IgniteTemplate

An ignite template that can be used to construct a p element.

Parameters

nav

Extends IgniteTemplate

An ignite template that can be used to construct a nav element.

Parameters

ul

Extends IgniteTemplate

An ignite template that can be used to construct a ul element.

Parameters

li

Extends IgniteTemplate

An ignite template that can be used to construct a li element.

Parameters

span

Extends IgniteTemplate

An ignite template that can be used to construct a span element.

Parameters

small

Extends IgniteTemplate

An ignite template that can be used to construct a small element.

Parameters

strong

Extends IgniteTemplate

An ignite template that can be used to construct a strong element.

Parameters

i

Extends IgniteTemplate

An ignite template that can be used to construct an i element.

Parameters

table

Extends IgniteTemplate

An ignite template that can be used to construct a table element.

Parameters

td

Extends IgniteTemplate

An ignite template that can be used to construct a td element.

Parameters

th

Extends IgniteTemplate

An ignite template that can be used to construct a th element.

Parameters

tr

Extends IgniteTemplate

An ignite template that can be used to construct a tr element.

Parameters

thead

Extends IgniteTemplate

An ignite template that can be used to construct a thead element.

Parameters

tbody

Extends IgniteTemplate

An ignite template that can be used to construct a tbody element.

Parameters

br

Extends IgniteTemplate

An ignite template that can be used to construct a br element.

Parameters

img

Extends IgniteTemplate

An ignite template that can be used to construct a img element.

Parameters

label

Extends IgniteTemplate

An ignite template that can be used to construct a label element.

Parameters

select

Extends IgniteTemplate

An ignite template that can be used to construct a select element.

Parameters

option

Extends IgniteTemplate

An ignite template that can be used to construct a option element.

Parameters

script

Extends IgniteTemplate

An ignite template that can be used to construct a script element.

Parameters

form

Extends IgniteTemplate

An ignite template that can be used to construct a form element.

Parameters

header

Extends IgniteTemplate

An ignite template that can be used to construct a header element.

Parameters

footer

Extends IgniteTemplate

An ignite template that can be used to construct a footer element.

Parameters

progress

Extends IgniteTemplate

An ignite template that can be used to construct a progress element.

Parameters

svg

Extends IgniteTemplate

An ignite template that can be used to construct a svg element.

Parameters

g

Extends IgniteTemplate

An ignite template that can be used to construct a g element.

Parameters

path

Extends IgniteTemplate

An ignite template that can be used to construct a path element.

Parameters

circle

Extends IgniteTemplate

An ignite template that can be used to construct a circle element.

Parameters

line

Extends IgniteTemplate

An ignite template that can be used to construct a line element.

Parameters

text

Extends IgniteTemplate

Text is a special template that will construct a text element and automatically update the dom if it's content changes.

Parameters

  • text (String | IgniteProperty) The text to render within this text template.
  • converter Function An optional function that can be used to convert the text.

Examples

new text(`<script>Will show up as text</script>`)

html

Extends IgniteTemplate

Html is a special template that can construct raw html or properties into the dom and automatically update the dom if the property changes.

Parameters

  • code (String | IgniteProperty) HTML code to be constructed within this template. If an IgniteProperty is passed it's value will be used.

Examples

new html(`<h1>Hello world!</h1>`)

list

Extends IgniteTemplate

A special ignite template that constructs a list of items using a template that is dynamically created for each item.

Parameters

  • list (Array | IgniteProperty) The list of items to construct within this template.
  • forEachCallback
  • reflect Boolean If true any items removed from the DOM will be removed from the list if they exist. By default this is false. (optional, default false)

Examples

new list(["1", "2", "3"], (item) => {
 return new h1(item);
})

slot

Extends IgniteTemplate

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. If classes, styles, or attributes are applied to the slot they will be applied to the children of the slot.

Parameters

  • element IgniteElement The parent IgniteElement that this slot is for.

Examples

//You must pass the ignite element who owns the slot of the first param.
new slot(this)

//Slots can apply classes, attributes, and styles to children within the slot
new slot(this).class("active") //< Would apply .active to all children

//You can also use properties to have dynamic classes, styles, or attributes on slot children
new slot(this).class(this.someClass)

pagination

Extends IgniteTemplate

A pagination is a template that segments a list of items into pages based on the items, page size, current page.

Parameters

  • list (Array | IgniteProperty) The list of items to paginate.
  • pageSize (Number | IgniteProperty) The size of each page.
  • currentPage (Number | IgniteProperty) The current page to display.
  • forEach

pager

Extends IgniteTemplate

A pager is a template that converts pagination information into elements to form a page selection.

Parameters

  • items (Number | Array | IgniteProperty) The items to construct pages for.
  • pageSize (Number | IgniteProperty) The number of items to show per page.
  • currentPage (Number | IgniteProperty) The current page being shown.
  • pageRange (Number | IgniteProperty) The number of pages that can be selected at a time. 3 is typically chosen.
  • renderCallback

items

Type: (Number | Array | IgniteProperty)

pageSize

Type: (Number | IgniteProperty)

currentPage

Type: (Number | IgniteProperty)

pageRange

Type: (Number | IgniteProperty)

pageCount

Type: Number

pages

Type: Array<IgniteTemplate>

renderCallback

population

Extends IgniteTemplate

An ignite template that can construct a population of items based on a count.

Parameters

  • count (Number | IgniteProperty | Array<IgniteProperty>) The number of items in this population.
  • forEach
  • converter Function A converter to be used to convert the count if needed. (optional, default null)