用Semantic UI库学习Angular Modal实例。
Angular Semantic UI modal
每个UI库都提供不同的UI组件。同样，Semantic UI也提供了不同的UI组件，其中包括一个模态窗口。
模态是一种窗口或弹出式窗口，它阻挡主页面，并显示一个弹出式视图，在这个视图中包含显示的内容或接受用户的输入。
Modal集成在Web应用程序的任何页面上。下面的代码在Angular 2/4/5/6版本上工作。
- 使用angular CLIL创建Angular应用程序
- 在应用程序中安装ng2-semantic-ui npm包。
- 在Angular应用程序中导入SUIModule
ng2-semantic-ui与Angular框架的整合中可以找到上述步骤的详细文档。
一旦应用程序整合完毕，就为语义用户界面模式编写代码。
语义用户界面模态示例
本例解释了基本的模态窗口，包括
- 如何通过点击按钮来打开Semantic UI模态
- 使用modal.deny()事件关闭模态事件
在一个HTML页面上，显示了一个按钮，在点击这个按钮时，打开了一个模态窗口，用户使用窗口上的按钮来关闭该窗口。
app.component.html:
<div style="text-align:center">
<h1>
Angular Semantic UI Modal With Example
</h1>
</div>
<div style="text-align:center">
<button (click)="show = true">Show Modal</button>
<sui-modal *ngIf="show" [isClosable]="true" (dismissed)="show = false" #modal>
<div class="header">Modal Header</div>
<div class="content">
<p> This is Test Content</p>
</div>
<div class="actions">
<button class="ui red button" (click)="modal.deny()">Cancel</button>
<button class="ui green button" (click)="modal.approve('done')" autofocus>OK</button>
</div>
</sui-modal>
</div>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
sui-modal是一个模态的页面，它包含以下属性
Semantic UI modal属性
isClosable:显示或不显示关闭按钮的真/假值。如果不显示关闭按钮，模态将通过ESC键或点击模态外部来关闭。closeResult size模态大小：它定义了所显示的模态的大小--数值为mini、tiny、small、normal和large。isFullScreen真/假值，在全屏宽度下显示模态或不显示。transition它是用来配置显示模态的动画效果的，规模默认为。transitionDuration阶段：过渡效果发生的时间
Angular Semantic Modal Events
这些事件在模态关闭和事件被触发后调用：
approved:当modal.approval('done')被调用时，这个事件被调用。denied:当modal.deny()被调用时调用此事件dismissed在模态关闭后调用该事件
每个模态包含以下三个div部分：
Header:模态窗口的头或标题Content:实际内容，可以是HTML/CSS内容Actions:这是一个模态窗口的页脚，包含打开/关闭/自定义事件的按钮。
总结
在本教程中，你学到了Angular中的Semantic UI modal，包括属性事件和不同的部分，如标题内容和页脚部分。
