@abcum/ember-modals 中文文档教程
ember-modals
用于将模态弹出窗口添加到 Ember.js 应用程序的实用程序。
Usage
Installation
ember install @abcum/ember-modals
Introduction
ember-modals 插件添加了添加 m 的功能 odal 弹出窗口到 Ember.js 应用程序，使用操作或路由。 当更改值、从组件运行操作或输入路由时，可以显示模态窗口。
Examples
将 modal-outlet 组件添加到您的应用程序模板。
{{!-- app/templates/application.hbs --}}
{{modal-outlet}}
在同一模板中显示模态窗口。
{{!-- app/templates/post.hbs --}}
<button {{action 'toggle' displayModal}}>Delete this post</button>
{{#if displayModal}}
{{#modal-window class="alert" close=(action 'toggle' displayModal)}}
{{!-- window content --}}
{{/modal-window}}
{{/if}}
在对组件执行操作后显示模态窗口。
{{!-- app/templates/posts.hbs --}}
{{#each model as |post|}}
{{blog-post deletePost=(open-modal 'post.popup' model=post)}}
{{/each}}
{{!-- app/templates/post/popup.hbs --}}
{{#modal-window class="alert" close=(close-modal)}}
{{!-- window content --}}
{{/modal-window}}
激活路由时显示模态窗口。
{{!-- app/templates/posts.hbs --}}
{{outlet}}
{{#each model as |post|}}
{{#link-to 'post' post}}View post{{/link-to}}
{{/each}}
{{!-- app/templates/post.hbs --}}
{{#modal-window class="alert" close=(transition-to 'posts')}}
{{!-- window content --}}
{{/modal-window}}
要设置模态背景和模态窗口本身的样式，请遵循下面的 css 样式代码。
modal-cover {
background-color:rgba(0,0,0,0.6);
@include backdrop-filter( blur(5px) );
@include animation(fadeIn 0.3s ease-in-out 0s);
}
modal-front {
opacity:0;
margin:0 auto 0 auto;
background-color:rgb(255,255,255);
@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-modals
A utility for adding modal popup windows to an Ember.js app.
Usage
Installation
ember install @abcum/ember-modals
Introduction
The ember-modals addon adds functionality for adding modal popup windows to an Ember.js app, using actions, or routes. A modal window can be shown when a value is changed, when an action is run from a component, or when a route is entered.
Examples
Add the modal-outlet component to your application template.
{{!-- app/templates/application.hbs --}}
{{modal-outlet}}
To show a modal window in the same template.
{{!-- app/templates/post.hbs --}}
<button {{action 'toggle' displayModal}}>Delete this post</button>
{{#if displayModal}}
{{#modal-window class="alert" close=(action 'toggle' displayModal)}}
{{!-- window content --}}
{{/modal-window}}
{{/if}}
To show a modal window after an action on a component.
{{!-- app/templates/posts.hbs --}}
{{#each model as |post|}}
{{blog-post deletePost=(open-modal 'post.popup' model=post)}}
{{/each}}
{{!-- app/templates/post/popup.hbs --}}
{{#modal-window class="alert" close=(close-modal)}}
{{!-- window content --}}
{{/modal-window}}
To show a modal window when a route is activated.
{{!-- app/templates/posts.hbs --}}
{{outlet}}
{{#each model as |post|}}
{{#link-to 'post' post}}View post{{/link-to}}
{{/each}}
{{!-- app/templates/post.hbs --}}
{{#modal-window class="alert" close=(transition-to 'posts')}}
{{!-- window content --}}
{{/modal-window}}
To style the modal background and the modal window itself, follow the css styling code below.
modal-cover {
background-color:rgba(0,0,0,0.6);
@include backdrop-filter( blur(5px) );
@include animation(fadeIn 0.3s ease-in-out 0s);
}
modal-front {
opacity:0;
margin:0 auto 0 auto;
background-color:rgb(255,255,255);
@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)
