El componente Ignite UI for React Snackbar se utiliza para proporcionar comentarios sobre una operación mostrando un breve mensaje en la parte inferior de la pantalla.
Ejemplo de Ignite UI for React Snackbar
Este ejemplo demuestra cómo crear el componente IgrSnackbar.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
cmd
Luego necesitarás importar IgrSnackbar, su CSS necesario y registrar su módulo, así:
Para obtener una introducción completa a la Ignite UI for React, 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.
<IgrButtonvariant="contained"clicked={this.onShowButtonClicked}><span>Show Snackbar</span></IgrButton><IgrSnackbarref={this.onSnackbarRef}><span>Snackbar Message</span></IgrSnackbar>public onSnackbarRef(snackbar: IgrSnackbar) {
if (!snackbar) { return; }
this.snackbarRef = snackbar;
}
public onShowButtonClicked() {
if (this.snackbarRef) {
this.snackbarRef.show();
}
}
tsx
Ejemplos
Tiempo de visualización
Utilice la propiedad displayTime para configurar durante cuánto tiempo estará visible el componente snackbar. De forma predeterminada, está configurado en 4000 milisegundos.
EXAMPLE
TSX
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import { IgrButton, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrSnackbarModule.register();
exportdefaultclass SnackbarDisplayTime extendsReact.Component<any, any> {
public snackbarRef: IgrSnackbar;
constructor(props: any) {
super(props);
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
this.onSnackbarRef = this.onSnackbarRef.bind(this);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrButtonvariant="contained"clicked={this.onShowButtonClicked}><span>Show Snackbar</span></IgrButton><IgrSnackbarref={this.onSnackbarRef}displayTime={6000}><span>Snackbar with different display time</span></IgrSnackbar></div>
);
}
public onSnackbarRef(snackbar: IgrSnackbar){
if (!snackbar) { return; }
this.snackbarRef = snackbar;
}
public onShowButtonClicked() {
if(this.snackbarRef){
this.snackbarRef.show();
}
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarDisplayTime/>);
tsx
Texto de acción
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.
EXAMPLE
TSX
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import { IgrButton, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrSnackbarModule.register();
exportdefaultclass SnackbarActionText extendsReact.Component<any, any> {
public snackbarRef: IgrSnackbar;
constructor(props: any) {
super(props);
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
this.onSnackbarRef = this.onSnackbarRef.bind(this);
this.onSnackbarActionClicked = this.onSnackbarActionClicked.bind(this);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrButtonvariant="contained"clicked={this.onShowButtonClicked}><span>Show Snackbar</span></IgrButton><IgrSnackbarref={this.onSnackbarRef}keepOpen={true}actionText="Close"action={this.onSnackbarActionClicked}><span>Snackbar with enabled keep-open option</span></IgrSnackbar></div>
);
}
public onSnackbarRef(snackbar: IgrSnackbar){
if (!snackbar) { return; }
this.snackbarRef = snackbar;
}
public onSnackbarActionClicked() {
if (this.snackbarRef) {
this.snackbarRef.hide();
}
}
public onShowButtonClicked() {
if(this.snackbarRef){
this.snackbarRef.show();
}
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarActionText/>);
tsx
Estilo
El componente snackbar expone varias partes CSS (base, message y action) para brindarle control total sobre su estilo.