Framework7 - Material de ejemplo

Descripción

Las notificaciones de Framework7 también se pueden utilizar en el diseño de material.

Ejemplo

El siguiente ejemplo demuestra el uso de notificaciones de diseño de material en Framework7:

<!DOCTYPE html>
<html class="with-statusbar-overlay">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Notifications</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css">
   </head>
   <body>
      <div class="views">
         <div class="view view-main">
            <div class="pages navbar-fixed">
               <div data-page="home" class="page">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="center">Notifications</div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="button button-raised notification-single">Single-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-multi">Multi-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-custom">With custom button</a></p>
                        <p><a href="#" class="button button-raised notification-callback">With callback on close</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      <script>
         var myApp = new Framework7({
           material: true
         });
         var mainView = myApp.addView('.view-main');

         var $$ = Dom7;

         $$('.notification-single').on('click', function () {
            myApp.addNotification({
               message: 'Battery remaining only 20%'
            });
         });
         $$('.notification-multi').on('click', function () {
            myApp.addNotification({
               message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            });
         });
         $$('.notification-custom').on('click', function () {
            myApp.addNotification({
               message: 'Nice teal color button',
               button: {
                  text: 'Click me',
                  color: 'teal'
               }
            });
         });
         $$('.notification-callback').on('click', function () {
            myApp.addNotification({
               message: 'Close this notification to see an alert',
               button: {
                  text: 'Close Me',
                  color: 'red'
               },
               onClose: function () {
                  myApp.alert('Callback made.. Notification closed');
               }
            });
         });
      </script>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código HTML proporcionado anteriormente como notifications_material.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/notifications_material.html y la salida se muestra como se muestra a continuación.
Este ejemplo proporciona diferentes tipos de notificaciones, como notificación de una sola línea, notificación de varias líneas, notificación con botón personalizado, etc. en el diseño del material.

↰ Previous page