La barra de progreso de la interfaz de usuario de Onsen se utiliza para crear una barra de progreso básica en una página web. Se puede usar para crear una barra de progreso de bucle infinito animada que muestra que una operación está en progreso. Si se da un porcentaje, entonces mostraría la cantidad de trabajo que se ha completado. Esto se hace usando el componente <ons-progress-bar> .
Sintaxis:
<ons-progress-bar value="" |
secondary-value=" " | indeterminate>
<ons-progress-bar>
Atributos:
- valor: Esto se utiliza para establecer el progreso actual. Es del tipo número y va de 0 a 100.
- valor secundario: Esto muestra el progreso secundario actual. La entrada varía de 0 a 100.
- indeterminado: Esto se usa para especificar si la barra de progreso no tiene un valor de progreso fijo. Se mostrará una barra de progreso animada de bucle infinito si está habilitada.
Ejemplo 1: En este ejemplo, veremos la diferencia entre las barras de progreso que tienen un solo valor y un valor de finalización.
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"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <ons-page> <ons-toolbar> <div class="center">Progress</div> </ons-toolbar> <div style="margin: 20px auto; width: 320px;"> <p>Progress Bar 1</p> <!-- This will create a progress bar whose progress is at 30% --> <ons-progress-bar value="30"> </ons-progress-bar> <p>Progress Bar 2</p> <!-- This will create a progress bar whose current progress is 30 and secondary current progress is 70--> <ons-progress-bar value="30" secondary-value="70"> </ons-progress-bar> </div> </ons-page> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, veremos la diferencia entre barras de progreso determinadas e indeterminadas.
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"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <ons-page> <ons-toolbar> <div class="center">Progress</div> </ons-toolbar> <div style="margin: 20px auto; width: 320px;"> <p>Progress Bar 1</p> <!-- This will create a progress bar whose current progress is 30 and secondary current progress is 70--> <ons-progress-bar value="30" secondary-value="70"> </ons-progress-bar> <p>Progress Bar 2</p> <!-- This will create a progress bar whose current progress is indeterminate --> <ons-progress-bar indeterminate> </ons-progress-bar> </div> </ons-page> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/js/ons-progress-bar.html
Publicación traducida automáticamente
Artículo escrito por chetansingh7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA