Banner
<gstock-banner>
|
GstockBanner
Mensaje
Use el slot predeterminado para agregar un mensaje al banner.
<gstock-banner> Nothing fancy here, just a simple banner. </gstock-banner>
Color
Utilice el atributo color para cambiar el color del banner.
<gstock-banner color="success">
Your changes have been saved. You can safely exit the app now.
</gstock-banner>
<br />
<gstock-banner color="information">
Your settings have been updated. Settings will take effect on next login.
</gstock-banner>
<br />
<gstock-banner color="warning">
Your session has ended. Please login again to continue.
</gstock-banner>
<br />
<gstock-banner color="danger">
Your account has been deleted. We're very sorry to see you go!
</gstock-banner>
Icono
Use el atributo icon para agregar un icono personalizado. De forma
predeterminada, cuando se establece el atributo color, el banner
mostrará el icono para ese color, pero puede personalizar un icono usando el
atributo icon.
<gstock-banner icon="bell"> Nothing fancy here, just a simple banner. </gstock-banner>
Para un icono personalizado con HTML, use el slot icon.
<gstock-banner>
<gstock-icon class="icon" slot="icon" name="bell"></gstock-icon>
Nothing fancy here, just a simple banner.
</gstock-banner>
<style>
.icon {
color: var(--gstock-color-text-warning);
}
</style>