Onsen UI es un marco HTML5 gratuito de código abierto que le permite crear interfaces de usuario (IU) únicas y utilizables. También simplifica el desarrollo de la interfaz de usuario, lo que permite a los programadores concentrarse en la funcionalidad del programa. Onsen UI es un conjunto sofisticado de componentes de interfaz de usuario creados exclusivamente para aplicaciones móviles y repleto de funciones listas para usar que se adhieren a los estándares de diseño nativos de iOS y Android. La interfaz de usuario de Onsen se diseñó para funcionar con AngularJS, pero también se puede usar con jQuery o cualquier otro marco. Onsen UI es un marco de JavaScript para PhoneGap y Cordova.
Onsen UI proporciona los componentes CSS preconstruidos para diseñar rápidamente diseños de interfaz de usuario versátiles y atractivos. Onsen CSS Components es un rodillo temático Topcoat basado en la web para desarrolladores móviles que facilita la creación de interfaces de usuario atractivas para los desarrolladores.
La barra de progreso material contiene la clase que se utiliza para crear una barra de progreso atractiva, con el fin de mejorar la experiencia general del usuario en el sitio web.
Clases de la barra de progreso del material del componente CSS de la interfaz de usuario de Onsen:
- barra de progreso: esta clase se agrega a un elemento div para convertirlo en una barra de progreso.
- barra de progreso–material: Esta clase se agrega con la clase barra de progreso para hacerla en estilo material.
- Progress-bar__primary: esta clase se agrega para dar un color oscuro a la barra de progreso que normalmente representa cuánto de la barra se ha progresado realmente.
- barra de progreso–material__primario: esta clase se agrega para dar un color oscuro a la barra de progreso en el diseño de tipo de material que normalmente representa cuánto de la barra realmente se avanza.
- progreso-bar__secundario: esta clase se agrega para dar un color más claro a la barra de progreso que normalmente representa cuánto de la barra aún debe progresar.
- barra de progreso–material__secundario: esta clase se agrega para dar un color más claro a la barra de progreso que normalmente representa cuánto de la barra aún debe progresar en el estilo de diseño de tipo de material.
- barra de progreso indeterminada: esta clase se agrega para tener una barra de progreso de bucle infinito.
Ejemplo 1: Este ejemplo muestra una barra de progreso de materiales utilizando la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> </head> <body> <div style="margin: 3rem; font-family: Roboto, sans-serif;"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3 style="margin-top: -1.5rem;"> Onsen UI CSS Component Material Progress Bar </h3><br /> </div> <h4 style="margin-left: 3rem"> Loading DSA... </h4> <div style="margin-left: 3rem; height: 0.4rem;" class="progress-bar progress-bar--material"> <div class="progress-bar__primary progress-bar--material__primary" style="width:15%"> </div> <div class="progress-bar__secondary progress-bar--material__secondary" style="width:40%"> </div> </div> </body> </html>
Producción:
Ejemplo 2: El ejemplo muestra una barra de progreso de bucle indeterminado/infinito utilizando la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> </head> <body> <div style="margin: 3rem; font-family: Roboto, sans-serif;"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3 style="margin-top: -1.5rem;"> Onsen UI CSS Component Material Progress Bar </h3><br /> </div> <h4 style="margin-left: 18rem"> Loading... </h4> <div style="margin: 3rem; width: 40%;" class="progress-bar progress-bar--material progress-bar--indeterminate"> </div> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#progress-bar-category
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA