Web Components Snackbar

El componente Ignite UI for Web Components Snackbar se utiliza para proporcionar comentarios sobre una operación mostrando un breve mensaje en la parte inferior de la pantalla.

Ignite UI for Web Components Snackbar Example

Este ejemplo demuestra cómo crear el componente IgcSnackbarComponent.

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

defineComponents(IgcSnackbarComponent);
export class SnackbarOverview {
    constructor() {
    }
}

new SnackbarOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Overview</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.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar">Snackbar Message</igc-snackbar>
    </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

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';

defineComponents(IgcSnackbarComponent);
ts

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

La forma más sencilla de mostrar el componente snackbar es utilizar su método show y llamarlo haciendo clic en un botón.

<igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
<igc-snackbar id="snackbar">Snackbar Message</igc-snackbar>
html

Examples

Display Time

Utilice la propiedad displayTime para configurar durante cuánto tiempo estará visible el componente snackbar. De forma predeterminada, está configurado en 4000 milisegundos.

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

defineComponents(IgcSnackbarComponent);
export class SnackbarDisplayTime {
    constructor() {
    }
}

new SnackbarDisplayTime();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Display Time</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.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar" display-time="6000">Snackbar with different display time</igc-snackbar>
    </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

Action Text

De forma predeterminada, el componente snackbar se oculta automáticamente después de un período especificado por displayTime. Puede utilizar la propiedad keepOpen para cambiar este comportamiento. De esta forma, la cafetería quedará visible. Usando el actionText de la barra de bocadillos, puede mostrar un botón de acción dentro del componente.

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

defineComponents(IgcSnackbarComponent);
export class SnackbarActionText {
    constructor() {
        const snackbar = document.querySelector('igc-snackbar') as IgcSnackbarComponent;

        document.addEventListener('igcAction', () => {
            snackbar.hide();
        });
    }
}

new SnackbarActionText();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Action Text</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.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar" keep-open action-text="Close">Snackbar with enabled keep-open option</igc-snackbar>
    </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

Styling

El IgcSnackbarComponent componente expone varias partes CSS para darle control total sobre su estilo:

Nombre	Descripción
`base`	El envoltorio base del componente de la barra de aperitivos.
`message`	El mensaje de la cafetería.
`action`	El botón de acción predeterminado de la barra de aperitivos.
`action-container`	El área que contiene las acciones.

igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}
css

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

defineComponents(IgcSnackbarComponent);
export class SnackbarStyling {
    constructor() {
    }
}

new SnackbarStyling();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar 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.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar">Styled snackbar</igc-snackbar>
    </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-snackbar::part(base) {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
}css