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
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');
|
Events
| 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. |