Joomla UI custom elements
UI components using modern technologies
Using the NPM power
You can install this package by using NPM:
$ npm i joomla-ui-custom-elements
The prefix of all the elements is configuarable. To do so duplicate the file
settings.yaml and name the new file as
settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming).
Build your custom elements by executing:
The folder named
dist contains all your elements.
For each component that you need to have available in your page you need to add the custom element in the head of the document:
Once again we are using the great tools from the polymer team here!
You will need
wct (web component tester) installed globally. To do so just run
npm install web-component-tester -g.
You might need to run that command as sudo!
After that, in the root folder of this project just run
wct and see the status of the tests...
The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5
Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project). The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs
Fully documented here
The library is released under the GPL license