ezsystems / hybrid-platform-ui-core-components
Hybrid Platform UI core frontend components
Installs: 1 982
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 17
Forks: 2
Language:JavaScript
Type:ezplatform-assets
Requires
- composer/installers: ~1.4
This package is auto-updated.
Last update: 2024-10-19 11:30:57 UTC
README
Provides the following custom elements used in the Hybrid Platform UI:
<ez-platform-ui-app>
<ez-navigation-hub>
<ez-toolbar>
In addition, this package provides a class expression mixin to add support for tabs based on a specific markup. To use that expression mixin, you can write something like:
<link rel="import" href="path/to/polymer/polymer-element.html"> <link rel="import" href="path/to/hybrid-platform-ui-core-components/mixins/ez-tabs.html"> <script> class MyComponent extends eZ.TabsMixin(Polymer.Element) { static get is() { return 'my-component'; } // your code } window.customElements.define(MyComponent.is, MyComponent); </script>
With that, the tabs markup will be automatically recognized. ez-tabs.html also provides the base CSS code so that the tabs visually behave as tabs. So with the following code:
<my-component> <div class="ez-tabs"> <ul class="ez-tabs-list"> <li class="ez-tabs-label is-tab-selected"><a href="#tab1">Tab 1</a></li> <li class="ez-tabs-label"><a href="#tab2">Tab 2</a></li> </ul> <div class="ez-tabs-panels"> <div class="ez-tabs-panel is-tab-selected" id="tab1">Some content</div> <div class="ez-tabs-panel" id="tab2">Some other content</div> </div> </div> </my-component>
You should see 2 tabs and should be able to switch from one to the other.
Developers tasks
System requirements:
- Node >= 6.x (nvm is an easy way to get it running)
bower
should be installed globally withnpm install -g bower
- before any of the following tasks, make sure the bower and npm dependencies are
installed and up to date by running
$ npm install $ bower install
Run unit tests
Using local browsers
$ npm run test-local
This will executes unit tests in local browsers.
To keep the test browsers open (and keep the test web server alive), you can add
the -p
option:
$ npm run test-local -- -p
Using SauceLabs
First, create an account at https://saucelabs.com/ (It's free for Open Source projects). Then run the following commands:
$ export SAUCE_USERNAME="your_sauce_labs_username" $ export SAUCE_ACCESS_KEY="your_sauce_labs_key" $ npm run test-sauce
The unit tests should be run using the Sauce Labs infrastructure. Targeted
platforms/browsers are defined in wct.conf.json
.
Run code style checks
$ npm run lint
Run local demo of components
$ npm run serve
This will run a local web server to serve the demo. After running that command, it should display the URL to reach the demo.
Alternatively, you can execute:
$ npm run serve -- -o
to open the index page in the default browser.