Home Documentation
Getting started General
Sass Plugins
Check changelog.

JS Init

Initialize our components with 4 different methods.

For auto init and per component init methods, we provided a simple .no-axentix-init class to disable the basic initialization with the Axentix class for the specified component.
Using this class, you can use all components in your page, except the one you specified. You can now pass your specific parameters to use it.

Data init

Using the data method, you are able to initialize any component inside your HTML file.
Every option will work normally : the camelCase option names are working in kebab-case, and the nested object of options are working well too.
Init syntax : data-ax-{componentName}
Option syntax : data-{componentName}-{option}

Auto init

Detect automatically all Axentix components who need to be initialized, in only one line.
Using this way, you don't have to initialize anything else, but you can't pass options to your JS elements.

We provide a way to call this method through your HTML file :

Per component type

Detect all elements of the specified component type, and initialize them all using the same passed options.

Per element

This method initialize the element individually using the passed options.


Methods are useful to get the instances of the elements on your page. This way, you can interact with them using their specific methods.

Method Description
Axentix.getAllInstances() Get a table containing all instances of the JS elements on the page.
Axentix.getInstance(string) Get a specific instance using the id of the element. You will get all his properties.
Example : let instanceOfElem = Axentix.getInstance('#example-collapsible');
Axentix.getInstanceByType(type) Get a specific instance using the type of the element. You will get all the instances of this element type.
Example : let instances = Axentix.getInstanceByType('Collapsible');
Axentix.syncAll() This method synchronizes all components listeners.
This is useful if you are adding elements dynamically like a sidenav-trigger after loading the page.
Axentix.sync(string) This method synchronize the listeners of the specified component.
Example : Axentix.sync('#example-collapsible');
Axentix.resetAll() This method resets all components.
This is useful if you are changing a component dynamically, like a sidenav position.
Axentix.reset(string) This method reset the specified component.
Example : Axentix.reset('#example-collapsible');
Axentix.destroyAll() This method destroys all components.
Axentix.destroy(string) This method destroy the specified component.
Example : Axentix.destroy('#example-collapsible');


Event Description
ax.component.sync Event sent when the sync() method of the component is called.
ax.component.reset Event sent when the reset() method of the component is called.
ax.component.destroy Event sent when the destroy() method of the component is called.