README

提供以下在混合平台UI中使用的自定义元素

<ez-platform-ui-app>
<ez-navigation-hub>
<ez-toolbar>

此外，此包还提供了一个类表达式混入，以支持基于特定标记的选项卡。要使用该混入表达式，您可以编写如下内容

<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>

有了这个，选项卡标记将被自动识别。ez-tabs.html 还提供了基本的 CSS 代码，使选项卡在视觉上表现为选项卡。因此，使用以下代码

<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>

您应该看到 2 个选项卡，并且应该能够从其中一个切换到另一个。

开发者任务

系统要求

Node >= 6.x (nvm 是运行它的简单方法)
全局安装 bower，使用 npm install -g bower
在执行以下任何任务之前，请确保已通过运行以下命令安装和更新了 bower 和 npm 依赖项
```
$ npm install
$ bower install
```

运行单元测试

使用本地浏览器

$ npm run test-local

这将执行本地浏览器中的单元测试。

为了保持测试浏览器打开（并保持测试 Web 服务器运行），您可以添加 -p 选项

$ npm run test-local -- -p

使用 SauceLabs

首先，在 https://saucelabs.com/ 上创建一个账户（对于开源项目是免费的）。然后运行以下命令

$ export SAUCE_USERNAME="your_sauce_labs_username"
$ export SAUCE_ACCESS_KEY="your_sauce_labs_key"
$ npm run test-sauce

单元测试应使用 Sauce Labs 基础设施运行。目标平台/浏览器在 wct.conf.json 中定义。

运行代码风格检查

$ npm run lint

运行组件的本地演示

$ npm run serve

这将运行本地 Web 服务器以提供演示。运行该命令后，它应显示到达演示的 URL。

或者，您可以执行

$ npm run serve -- -o

在默认浏览器中打开索引页面。

ezsystems / hybrid-platform-ui-core-components

维护者

详细信息