@abcum/ember-popups 中文文档教程

发布于 5年前 浏览 19 项目主页 更新于 3年前

ember-popups

用于向 Ember.js 应用程序添加工具提示和弹出项的实用程序。

Usage

Installation

ember install @abcum/ember-popups

Introduction

ember-popups 插件添加了添加 t 的功能 ooltip 弹出窗口和项目弹出窗口到 Ember.js 应用程序。 弹出项可以通过嵌入到目标项中来创建,并在单击或悬停事件中变得可见。

Examples

popup-outlet 组件添加到您的应用程序模板。

{{!-- app/templates/application.hbs --}}
{{popup-outlet}}

在元素上显示工具提示。

<div id="info">
    Click for more information
    {{#popup-info side='n'}}
        Here is some more information.
    {{/popup-item}}
</div>

或者在单击元素时显示弹出窗口。

<div>
    Click for more information
    {{#popup-item show='click' hide='click'}}
        Here is some more information.
    {{/popup-item}}
</div>

或者在将鼠标悬停在元素上时显示弹出窗口。

<div>
    Hover for more information
    {{#popup-item show='hover' hide='hover'}}
        Here is some more information.
    {{/popup-item}}
</div>

或者启用按退出键隐藏弹出窗口。

<div>
    Hover for more information
    {{#popup-item show='hover' hide='hover escape'}}
        Here is some more information.
    {{/popup-item}}
</div>

或者为弹出项指定自定义类。

<div>
    Hover for more information
    {{#popup-item show='hover' hide='hover' itemClass='tooltip'}}
        Here is some more information.
    {{/popup-item}}
</div>

或者为弹出项内容使用单独的模板。

<div>
    Click for more information
    {{popup-item show='click' hide='click' itemName='popups/info'}}
</div>

显示锚定到特定一侧的弹出项。 有效边为 nneesessw, w, nw

<div>
    Click for more information
    {{popup-item show='click' hide='click' itemName='popups/info' side='e'}}
</div>

或者将弹出项附加到页面上的另一个元素,指定一个目标元素。

<div id="info">Click for more information</div>

{{popup-item show='click' hide='click' itemName='popups/info' side='e' target="#info"}}

要设置弹出区域和弹出项本身的样式,请遵循下面的 css 样式代码。

popup-item {
    opacity:0;
    @include box-shadow(0 0 15px rgba(0,0,0,0.6));
}

popup-item[visible] {
    opacity:1;
    @include box-shadow(0 0 15px rgba(0,0,0,0.6));
    @include animation(ghost 0.3s ease-in-out 0.2s normal both);
}

Development

  • make install (install bower and ember-cli dependencies)
  • make upgrade (upgrade ember-cli to the specified version)
  • make tests (run all tests defined in the package)

ember-popups

A utility for adding tooltips and popup items to an in Ember.js app.

Usage

Installation

ember install @abcum/ember-popups

Introduction

The ember-popups addon adds functionality for adding tooltip popups and item popups to an Ember.js app. A popup item can be created by embedding within the target item, and becomes visible on either click or hover events.

Examples

Add the popup-outlet component to your application template.

{{!-- app/templates/application.hbs --}}
{{popup-outlet}}

Display a tooltip on an element.

<div id="info">
    Click for more information
    {{#popup-info side='n'}}
        Here is some more information.
    {{/popup-item}}
</div>

Or show a popup when clicking on an element.

<div>
    Click for more information
    {{#popup-item show='click' hide='click'}}
        Here is some more information.
    {{/popup-item}}
</div>

Or show a popup when hovering over an element.

<div>
    Hover for more information
    {{#popup-item show='hover' hide='hover'}}
        Here is some more information.
    {{/popup-item}}
</div>

Or enable pressing the escape key to hide a popup.

<div>
    Hover for more information
    {{#popup-item show='hover' hide='hover escape'}}
        Here is some more information.
    {{/popup-item}}
</div>

Or to specify a custom class for the popup item.

<div>
    Hover for more information
    {{#popup-item show='hover' hide='hover' itemClass='tooltip'}}
        Here is some more information.
    {{/popup-item}}
</div>

Or use a separate template for the popup item content.

<div>
    Click for more information
    {{popup-item show='click' hide='click' itemName='popups/info'}}
</div>

To show a popup item on anchored to a particular side. Valid sides are n, ne, e, se, s, sw, w, nw.

<div>
    Click for more information
    {{popup-item show='click' hide='click' itemName='popups/info' side='e'}}
</div>

Or to attach the popup item to another element on the page specify a target element.

<div id="info">Click for more information</div>

{{popup-item show='click' hide='click' itemName='popups/info' side='e' target="#info"}}

To style the popup area and the popup item itself, follow the css styling code below.

popup-item {
    opacity:0;
    @include box-shadow(0 0 15px rgba(0,0,0,0.6));
}

popup-item[visible] {
    opacity:1;
    @include box-shadow(0 0 15px rgba(0,0,0,0.6));
    @include animation(ghost 0.3s ease-in-out 0.2s normal both);
}

Development

  • make install (install bower and ember-cli dependencies)
  • make upgrade (upgrade ember-cli to the specified version)
  • make tests (run all tests defined in the package)
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文