Web Components Resumen del progreso lineal

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.

Web Components Ejemplo de progreso lineal

import { defineComponents, IgcLinearProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);
export class SimpleLinearProgress {
    constructor() {
    }
}

new SimpleLinearProgress();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Linear Progress Indicator</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress value="100"></igc-linear-progress>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="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:

npm install igniteui-webcomponents
cmd

Antes de utilizar IgcLinearProgressComponent, debe registrarlo de la siguiente manera:

import {defineComponents, IgcLinearProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);
ts

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

La forma más sencilla de empezar a utilizarlo IgcLinearProgressComponent es la siguiente:

<igc-linear-progress value="100"></igc-linear-progress>
html

Tipos de progreso

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.

<igc-linear-progress value="100" variant="success"></igc-linear-progress>
html

Progreso rayado

Puedes hacer que el indicador sea rayado, usando la propiedad striped:

import { defineComponents,IgcLinearProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);

export class ProgressIndicatorTypes {
    constructor() {
    }
}

new ProgressIndicatorTypes();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Linear Progress Indicator Types</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress value="100" variant="primary"></igc-linear-progress>
        <igc-linear-progress value="100" variant="success" striped></igc-linear-progress>
        <igc-linear-progress value="100" variant="danger"></igc-linear-progress>
        <igc-linear-progress value="100" variat="info" striped></igc-linear-progress>
        <igc-linear-progress value="100" variant="warning"></igc-linear-progress>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="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.

<igc-linear-progress animation-duration="5000" indeterminate></igc-linear-progress>
html

Propiedades del texto

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:

import { defineComponents, IgcLinearProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './LinearProgressStyles.css'

defineComponents(IgcLinearProgressComponent);

export class ProgressIndicatorStyles {
    constructor() {
    }
}

new ProgressIndicatorStyles();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Linear Progress Indicator Styles</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress class="progress-container" value="100" variant="primary"></igc-linear-progress>
        <igc-linear-progress class="progress-container" value="100" variant="success" indeterminate striped></igc-linear-progress>
        <igc-linear-progress value="100" variant="danger" label-align="bottom-end" label-format="Custom text"></igc-linear-progress>
        <igc-linear-progress class="progress-container" value="100" variant="info" striped hide-label></igc-linear-progress>
        <igc-linear-progress class="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) { %><script src="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:

import { defineComponents, IgcIconButtonComponent, IgcLinearProgressComponent, registerIconFromText} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent, IgcIconButtonComponent);
const addIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>';
const removeIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg>';

export class DynamicLinearProgress {
    private linearProgress: IgcLinearProgressComponent
    private addIcon: IgcIconButtonComponent;
    private removeIcon: IgcIconButtonComponent

    constructor() {
        registerIconFromText("remove", removeIcon, "material");
        registerIconFromText("add", addIcon, "material");
        this.linearProgress = document.getElementById("linearProgress") as IgcLinearProgressComponent;
        this.removeIcon = document.getElementById("removeIcon") as IgcIconButtonComponent;
        this.addIcon = document.getElementById("addIcon") as IgcIconButtonComponent;

        this.removeIcon.addEventListener('click', () => {
            if(this.linearProgress.value > 0) {
                this.linearProgress.value = this.linearProgress.value - 10;
            }
            else {
                this.linearProgress.value = 0;
            }
        });

        this.addIcon.addEventListener('click', () => {
            this.linearProgress.value = this.linearProgress.value + 10;
        });
    }
}

new DynamicLinearProgress();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Linear Progress Indicator</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress id="linearProgress" max="100" value="50" label-align="bottom-start"></igc-linear-progress>
        <div class="button-container">
          <igc-icon-button id="removeIcon" name="remove" collection="material"></igc-icon-button>
          <igc-icon-button id="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) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Estilo

El IgcLinearProgressComponent componente expone partes CSS para casi todos sus elementos internos:

Nombre	Descripción
`track`	El área de seguimiento del anillo de progreso.
`fill`	El área del indicador de progreso.
`striped`	El indicador rayado de progreso.
`label`	La etiqueta del indicador de progreso.
`value`	El valor de la etiqueta de progreso.
`indeterminate`	El progreso en estado indeterminado.
`primary`	El indicador de progreso del estado primario.
`danger`	El estado de error del indicador de progreso.
`warning`	El estado de advertencia del indicador de progreso.
`info`	El estado de información del indicador de progreso.
`success`	El estado de éxito del indicador de progreso.

Usando estas partes CSS tenemos un control casi total del estilo de Progreso Lineal.

import { defineComponents, IgcLinearProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './LinearProgressStyling.css';

defineComponents(IgcLinearProgressComponent);

export class LinearProgressStyling {
    constructor() {
    }
}

new LinearProgressStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Linear Progress Indicator Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress value="100"></igc-linear-progress>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-linear-progress::part(track){
    background-color: #D3D3D3
}

igc-linear-progress::part(fill){
    background-color: #ECAA53
}

igc-linear-progress::part(label){
    color: #ECAA53
}css

igc-linear-progress::part(track){
  background-color: var(--ig-gray-300)
}

igc-linear-progress::part(fill){
  background-color: var(--ig-primary-300)
}

igc-linear-progress::part(label){
  color: var(--ig-primary-300)
}
css