PHPackages                             ezsystems/hybrid-platform-ui-core-components - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. ezsystems/hybrid-platform-ui-core-components

ActiveEzplatform-assets

ezsystems/hybrid-platform-ui-core-components
============================================

Hybrid Platform UI core frontend components

02.0k2[2 PRs](https://github.com/ezsystems/hybrid-platform-ui-core-components/pulls)JavaScript

Since Jun 14Pushed 8y ago15 watchersCompare

[ Source](https://github.com/ezsystems/hybrid-platform-ui-core-components)[ Packagist](https://packagist.org/packages/ezsystems/hybrid-platform-ui-core-components)[ RSS](/packages/ezsystems-hybrid-platform-ui-core-components/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (5)Used By (0)

hybrid-platform-ui-core-components
==================================

[](#hybrid-platform-ui-core-components)

[![Build Status](https://camo.githubusercontent.com/94dc3a48e16ed3caee9928cc7c767e98466835f54aec0b12957e70a3614406c4/68747470733a2f2f7472617669732d63692e6f72672f657a73797374656d732f6879627269642d706c6174666f726d2d75692d636f72652d636f6d706f6e656e74732e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/ezsystems/hybrid-platform-ui-core-components)

Provides the following custom elements used in the Hybrid Platform UI:

- ``
- ``
- ``

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:

```

    class MyComponent extends eZ.TabsMixin(Polymer.Element) {
        static get is() {
            return 'my-component';
        }
        // your code
    }

    window.customElements.define(MyComponent.is, MyComponent);

```

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:

```

       Tab 1
       Tab 2

       Some content
       Some other content

```

You should see 2 tabs and should be able to switch from one to the other.

Developers tasks
----------------

[](#developers-tasks)

**System requirements:**

- Node >= 6.x ([nvm](https://github.com/creationix/nvm)is an easy way to get it running)
- `bower` should be installed globally with `npm 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

[](#run-unit-tests)

#### Using local browsers

[](#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

[](#using-saucelabs)

First, create an account at  (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

[](#run-code-style-checks)

```
$ npm run lint
```

### Run local demo of components

[](#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.

###  Health Score

27

—

LowBetter than 49% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity17

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 90.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/235928?v=4)[Bertrand Dunogier](/maintainers/bdunogier)[@bdunogier](https://github.com/bdunogier)

![](https://avatars.githubusercontent.com/u/681611?v=4)[Ibexa Bot](/maintainers/ezrobot)[@ezrobot](https://github.com/ezrobot)

![](https://www.gravatar.com/avatar/fdf02d95c42cbf4237d9a353b60204e7099c4195743b6589c3a18729e2cd87e4?d=identicon)[dpobel](/maintainers/dpobel)

---

Top Contributors

[![dpobel](https://avatars.githubusercontent.com/u/305563?v=4)](https://github.com/dpobel "dpobel (129 commits)")[![StephaneDiot](https://avatars.githubusercontent.com/u/5558766?v=4)](https://github.com/StephaneDiot "StephaneDiot (10 commits)")[![bdunogier](https://avatars.githubusercontent.com/u/235928?v=4)](https://github.com/bdunogier "bdunogier (3 commits)")

### Embed Badge

![Health badge](/badges/ezsystems-hybrid-platform-ui-core-components/health.svg)

```
[![Health](https://phpackages.com/badges/ezsystems-hybrid-platform-ui-core-components/health.svg)](https://phpackages.com/packages/ezsystems-hybrid-platform-ui-core-components)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)