El componente Indicador de progreso lineal Ignite UI for Web Components proporciona un indicador visual del proceso de una aplicación a medida que cambia. El IgcLinearProgressComponent indicador actualiza su apariencia a medida que cambia su estado. Además, puede diseñar este componente con una selección de colores en rayas o sólidos.
<!DOCTYPE html><html><head><title>Simple Linear Progress Indicator</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressvalue="100"></igc-linear-progress></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
Puede establecer el tipo de su indicador utilizando el atributo variant. Hay cinco tipos de indicadores de progreso lineal: primario (predeterminado), error, éxito, información y advertencia.
<!DOCTYPE html><html><head><title>Linear Progress Indicator Types</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressvalue="100"variant="primary"></igc-linear-progress><igc-linear-progressvalue="100"variant="success"striped></igc-linear-progress><igc-linear-progressvalue="100"variant="danger"></igc-linear-progress><igc-linear-progressvalue="100"variat="info"striped></igc-linear-progress><igc-linear-progressvalue="100"variant="warning"></igc-linear-progress></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Progreso indeterminado
Si desea realizar un seguimiento de un proceso que no está determinado con precisión, puede establecer la propiedad indeterminate.
Duración de la animación
La propiedad animationDuration se utiliza para especificar cuánto tiempo debe durar el ciclo de animación. Toma como valor un número que representa la duración de la animación en milisegundos.
Puede alinear el valor predeterminado utilizando la propiedad labelAlign. Los valores permitidos son top, bottom, top-start, top-end, bottom-start y bottom-end.
Para ocultar la etiqueta predeterminada del indicador de progreso, utilice el atributo hideLabel.
La propiedad labelFormat se puede utilizar para personalizar la etiqueta predeterminada IgcLinearProgressComponent.
El siguiente ejemplo demuestra la configuración anterior:
<!DOCTYPE html><html><head><title>Linear Progress Indicator Styles</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressclass="progress-container"value="100"variant="primary"></igc-linear-progress><igc-linear-progressclass="progress-container"value="100"variant="success"indeterminatestriped></igc-linear-progress><igc-linear-progressvalue="100"variant="danger"label-align="bottom-end"label-format="Custom text"></igc-linear-progress><igc-linear-progressclass="progress-container"value="100"variant="info"stripedhide-label></igc-linear-progress><igc-linear-progressclass="progress-container"value="100"variant="warning"label-align="bottom-start"></igc-linear-progress></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
.progress-container{
margin-bottom: 15px;
}css
Progreso dinámico
Puede cambiar dinámicamente el valor del indicador de progreso utilizando controles externos como botones. Para lograr esto, podemos vincular el valor a una propiedad de clase:
<!DOCTYPE html><html><head><title>Dynamic Linear Progress Indicator</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressid="linearProgress"max="100"value="50"label-align="bottom-start"></igc-linear-progress><divclass="button-container"><igc-icon-buttonid="removeIcon"name="remove"collection="material"></igc-icon-button><igc-icon-buttonid="addIcon"name="add"collection="material"></igc-icon-button></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Estilo
El componente Indicador de progreso lineal expone partes CSS para casi todos sus elementos internos.
<!DOCTYPE html><html><head><title>Linear Progress Indicator Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressvalue="100"></igc-linear-progress></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css