Nguồn : sangplus.com
Gần đây một số bạn có sử dụng hoặc xem demo bộ source MEAN Stack và AzQuestion của mình và inbox hỏi mình cách hiển thị những thông báo kiểu này
Đây chỉ là một chức năng nhỏ nhưng nó giúp đem lại trải nghiệm người dùng tốt hơn khi mà các thông báo hiện lên không quá khó chịu. Trong ứng dụng này mình sử dụng angular-flash. Mình thấy nó dùng khá tốt, kết hợp với 1 chút css là tạo được khung thông báo thế này.
Nếu bạn không biết flash message là gì thì có thể hiểu cơ bản Flash message là thông báo hiển thị khi chuyển trang, ví dụ khi bạn thêm một bài viết mới và redirect về trang chủ thì kèm theo 1 thông báo cho biết thêm bài viết thành công.
Ứng dụng demo Flash Message:
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">http://sangnguyenplus.github.io/angular-flash-message-demo</p> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">
Để sử dụng thư viện Flash Message trong ứng dụng AngularJS.
- Thêm thư viện này vào dependencies trong bower.json nếu bạn sử dụng bower để quản lý thư viện hoặc tải thư viện này từ đường dẫn https://github.com/wmluke/angular-flash và nhúng tập tin js vào ứng dụng.
- Thêm 2 module của thư viện này vào app module. Ví dụ:
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">var app = angular.module(‘appDemo’, [<br style="box-sizing: border-box;">‘angular-flash.service’,<br style="box-sizing: border-box;">‘angular-flash.flash-alert-directive’<br style="box-sizing: border-box;">]);</p> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">
- Cấu hình tên các class css cho từng loại thông báo. Ví dụ:
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">app.config([‘flashProvider’, function (flashProvider) {</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">flashProvider.errorClassnames.push(‘alert-danger’);<br style="box-sizing: border-box;">flashProvider.warnClassnames.push(‘alert-warning’);<br style="box-sizing: border-box;">flashProvider.infoClassnames.push(‘alert-info’);<br style="box-sizing: border-box;">flashProvider.successClassnames.push(‘alert-success’);</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">}]);</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">
- Sử dụng trong controller:
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">app.controller(‘SuccessController’,<br style="box-sizing: border-box;">[‘$scope’, ‘$http’, ‘flash’, function($scope, $http, flash) {<br style="box-sizing: border-box;">flash.success = ‘Hiển thị thông báo thành công. Thông báo này sẽ tự mất sao vài giây!’;<br style="box-sizing: border-box;">}]);</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">
- Hiển thị ngoài view.
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;"><!– Hiển thị thông báo thành công–></p> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;"><div flash-alert="success" active-class="in alert-flash" class="fade "><br style="box-sizing: border-box;"><button type="button" class="close" ng-click="hide()">&times;</button><br style="box-sizing: border-box;"><strong class="alert-heading">Thông báo!</strong><br style="box-sizing: border-box;"><span class="alert-message" ng-bind="flash.message"></span><br style="box-sizing: border-box;"></div></p> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">
- Có thể thêm 1 chút css bên dưới để hiển thị thông báo đẹp mắt hơn.
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">.alert-flash {<br style="box-sizing: border-box;">position:fixed;<br style="box-sizing: border-box;">z-index:999999;<br style="box-sizing: border-box;">right:12px;<br style="box-sizing: border-box;">bottom:12px;<br style="box-sizing: border-box;">display:block;<br style="box-sizing: border-box;">width:300px;<br style="box-sizing: border-box;">-moz-border-radius:3px;<br style="box-sizing: border-box;">-webkit-border-radius:3px 3px 3px 3px;<br style="box-sizing: border-box;">border-radius:3px 3px 3px 3px;<br style="box-sizing: border-box;">background-position:15px center;<br style="box-sizing: border-box;">background-repeat:no-repeat;<br style="box-sizing: border-box;">-moz-box-shadow:0 0 12px #999;<br style="box-sizing: border-box;">-webkit-box-shadow:0 0 12px #999;<br style="box-sizing: border-box;">box-shadow:0 0 12px #999;<br style="box-sizing: border-box;">color:#fff;<br style="box-sizing: border-box;">opacity:1;<br style="box-sizing: border-box;">-ms-filter:alpha(opacity=100);<br style="box-sizing: border-box;">filter:alpha(opacity=100);<br style="box-sizing: border-box;">margin:0 0 6px;<br style="box-sizing: border-box;">padding:15px 15px 15px 50px;<br style="box-sizing: border-box;">}</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">.alert-flash:hover {<br style="box-sizing: border-box;">-moz-box-shadow:0 0 12px #000;<br style="box-sizing: border-box;">-webkit-box-shadow:0 0 12px #000;<br style="box-sizing: border-box;">box-shadow:0 0 12px #000;<br style="box-sizing: border-box;">opacity:1;<br style="box-sizing: border-box;">-ms-filter:alpha(opacity=100);<br style="box-sizing: border-box;">filter:alpha(opacity=100);<br style="box-sizing: border-box;">cursor:pointer;<br style="box-sizing: border-box;">}</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">.alert-flash * {<br style="box-sizing: border-box;">-moz-box-sizing:border-box;<br style="box-sizing: border-box;">-webkit-box-sizing:border-box;<br style="box-sizing: border-box;">box-sizing:border-box;<br style="box-sizing: border-box;">display:block;<br style="box-sizing: border-box;">}</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">.alert-flash .close {<br style="box-sizing: border-box;">position:relative;<br style="box-sizing: border-box;">right:-.3em;<br style="box-sizing: border-box;">top:-.3em;<br style="box-sizing: border-box;">float:right;<br style="box-sizing: border-box;">font-size:15px;<br style="box-sizing: border-box;">font-weight:700;<br style="box-sizing: border-box;">color:#fff;<br style="box-sizing: border-box;">-webkit-text-shadow:0 1px 0 #fff;<br style="box-sizing: border-box;">text-shadow:0 1px 0 #fff;<br style="box-sizing: border-box;">opacity:.8;<br style="box-sizing: border-box;">-ms-filter:alpha(opacity=80);<br style="box-sizing: border-box;">filter:alpha(opacity=80);<br style="box-sizing: border-box;">outline:none!important;<br style="box-sizing: border-box;">}</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">.alert-flash.alert-danger {<br style="box-sizing: border-box;">background:#bd362f url(../images/alert-danger.png) no-repeat 15px center!important;<br style="box-sizing: border-box;">}</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">.alert-flash.alert-success {<br style="box-sizing: border-box;">background:#51a351 url(../images/alert-success.png) no-repeat 15px center!important;<br style="box-sizing: border-box;">}</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">.alert-flash.alert-info {<br style="box-sizing: border-box;">background:#2f96b4 url(../images/alert-info.png) no-repeat 15px center!important;<br style="box-sizing: border-box;">}</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">.alert-flash.alert-warning {<br style="box-sizing: border-box;">background:#f89406 url(../images/alert-warning.png) no-repeat 15px center!important;<br style="box-sizing: border-box;">}</p>
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">
Hình ảnh sử dụng trong đoạn CSS trên bạn có thể tải tại đây.
<p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">https://sangplus.com/wp-content/uploads/2016/01/flash-message-images.rar</p> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; font-size: 15px !important;">
Vậy là xong, chắc đến đây bạn đã có thể hiểu được cách hiển thị thông báo flash message đẹp mắt như trong demo của mình.
Nếu bạn vẫn chưa hiểu hoặc do cách hướng dẫn của mình hơi phức tạp so với bạn thì có thể xem full source demo trong bài viết này tại địa chỉ: https://github.com/sangnguyenplus/angular-flash-message-demo
Chúc các bạn thành công!
