InfoBar

El control InfoBar sirve para mostrar a los usuarios mensajes de estado visibles en toda la aplicación sin resultar intrusivos. Tiene niveles de severidad integrados para indicar fácilmente el tipo de mensaje mostrado, así como la opción de incluir tu propia llamada a la acción o un botón de hipervínculo. Como InfoBar está en línea con otro contenido de la interfaz, puede permanecer visible o ser descartado por el usuario.

Attention

This is an attention message.

Warning

This is a warning message.

Success

This is a success message.

Uso

<script lang="ts">
  import { InfoBar } from 'fluentui-svelte';
</script>

<InfoBar status="information" title="Information">
  <p>This is an informational message.</p>
</InfoBar>

Estado

La propiedad status determina el estilo visual y el significado de InfoBar.

Ver Código

<InfoBar status="information" title="Information">
  <p>This is an informational message.</p>
</InfoBar>
<InfoBar status="attention" title="Attention">
  <p>This is an attention message.</p>
</InfoBar>
<InfoBar status="warning" title="Warning">
  <p>This is a warning message.</p>
</InfoBar>
<InfoBar status="critical" title="Critical">
  <p>This is a critical message.</p>
</InfoBar>
<InfoBar status="success" title="Success">
  <p>This is a success message.</p>
</InfoBar>

Information

This is an informational message.

Attention

This is an attention message.

Warning

This is a warning message.

Critical

This is a critical message.

Success

This is a success message.

Style

La propiedad style determina el diseño de InfoBar.

Ver Código

<InfoBar status="information" style="inline" title="Inline Style">
  <p>This is an inline styled InfoBar.</p>
</InfoBar>
<InfoBar status="information" style="multiline" title="Multiline Style">
  <p>This is a multiline styled InfoBar.</p>
</InfoBar>

Inline Style

This is an inline styled InfoBar.

Multiline Style

This is a multiline styled InfoBar.

Hide Close Button

La propiedad hideCloseButton te permite ocultar el botón de cierre en InfoBar.

Ver Código

<InfoBar status="information" title="Without Close Button" hideCloseButton>
  <p>This InfoBar does not have a close button.</p>
</InfoBar>
<InfoBar status="information" title="With Close Button">
  <p>This InfoBar has a close button.</p>
</InfoBar>

Without Close Button

This InfoBar does not have a close button.

With Close Button

This InfoBar has a close button.

Propiedades del componente

Name	Type	Default	Description
`status`	`'information'` \| `'attention'` \| `'warning'` \| `'critical'` \| `'success'`	`'information'`	La gravedad del mensaje, que determina el icono y los colores.
`style`	`'inline'` \| `'multiline'`	`'inline'`	Dispone el mensaje en una sola línea, o apilado bajo el título.
`title`	`string`		El título de InfoBar.
`icon`	`Snippet` \| `Component`		Icono personalizado, que se renderiza en lugar del que `status` elegiría por su cuenta.
`iconSize`	`number`	`20`	El tamaño del icono en píxeles.
`hideCloseButton`	`boolean`		Elimina el botón que descarta el InfoBar.
`children`	`Snippet`		El mensaje del InfoBar.
Element Attributes (`div`)