Compartilhar via

Snackbar

  • Artigo

O Snackbar é um alerta cronometrado que aparece na parte inferior da tela por padrão. Ele é descartado após uma duração configurável de tempo. O Snackbar é totalmente personalizável e pode ser ancorado em qualquer IView.

O Snackbar informa aos usuários sobre um processo que um aplicativo executou ou executará. Ele aparece temporariamente, na parte inferior da tela.

Inicialização específica da plataforma

Para acessar a funcionalidade Snackbar, a configuração específica da plataforma a seguir é necessária.

Nenhuma confiuração é necessária.

Sintaxe

O Snackbar é invocado usando C#.

C#

Para exibir Snackbar, você precisa criá-lo usando o método estático Make:

using CommunityToolkit.Maui.Alerts;

CancellationTokenSource cancellationTokenSource = new CancellationTokenSource();

var snackbarOptions = new SnackbarOptions
{
    BackgroundColor = Colors.Red,
    TextColor = Colors.Green,
    ActionButtonTextColor = Colors.Yellow,
    CornerRadius = new CornerRadius(10),
    Font = Font.SystemFontOfSize(14),
    ActionButtonFont = Font.SystemFontOfSize(14),
    CharacterSpacing = 0.5
};

string text = "This is a Snackbar";
string actionButtonText = "Click Here to Dismiss";
Action action = async () => await DisplayAlert("Snackbar ActionButton Tapped", "The user has tapped the Snackbar ActionButton", "OK");
TimeSpan duration = TimeSpan.FromSeconds(3);

var snackbar = Snackbar.Make(text, action, actionButtonText, duration, snackbarOptions);

await snackbar.Show(cancellationTokenSource.Token);

Ao chamar Snackbar.Make(), seu parâmetro string text é necessário. Todos os outros parâmetros são opcionais.

A captura de tela a seguir mostra o Snackbar resultante:

Há também um método de extensão, que ancorará o Snackbar a qualquer VisualElement:

await MyVisualElement.DisplaySnackbar("Snackbar is awesome. It is anchored to MyVisualElement");

Aviso

O Snackbar no Windows não pode ser ancorado em VisualElement e sempre são exibidos como uma notificação padrão do Windows.

O SnackBar contém dois eventos:

  • public static event EventHandler Shown
  • public static event EventHandler Dismissed

Ele também contém a propriedade public static bool IsShown { get; }.

Snackbar.Shown += (s, e) => { Console.WriteLine(Snackbar.IsShown); };
Snackbar.Dismissed += (s, e) => { Console.WriteLine(Snackbar.IsShown); };

Propriedades

Propriedade Type Descrição
Text string Mensagem de texto. Obrigatório
Ação Action Ação para invocar no clique do botão de ação.
ActionButtonText string Texto do botão de ação.
Âncora IView Âncora de Snackbar. O Snackbar aparece perto dessa exibição. Quando null, o Snackbar aparecerá na parte inferior da tela.
Duration TimeSpan Duração de Snackbar.
VisualOptions SnackbarOptions Opções visuais de Snackbar.

SnackbarOptions

O SnackbarOptions permite personalizar o estilo padrão de Snackbar.

Propriedades

Propriedade Type Descrição Valor padrão
CharacterSpacing double Espaçamento entre caracteres de mensagem. 0.0d
Fonte Font Fonte da mensagem. Font.SystemFontOfSize(14)
TextColor Color Cor do texto da mensagem. Colors.Black
ActionButtonFont Font Fonte do botão de ação. Font.SystemFontOfSize(14)
ActionButtonTextColor Color Cor do texto do botão de ação. Colors.Black
BackgroundColor Color Cor do plano de fundo. Colors.LightGray
CornerRadius CornerRadius Raio de canto. new CornerRadius(4, 4, 4, 4)

Métodos

Método Descrição
Mostrar Exibir o Snackbar solicitado. Isso ignorará qualquer Snackbar exibido no momento
Ignorar Ignorar o Snackbar solicitado.

Observação

Você pode exibir apenas 1 Snackbar simultaneamente. Se você chamar o método Show uma segunda vez, o primeiro Snackbar será descartado automaticamente antes de o segundo Snackbar ser mostrado.

Exemplos

Você pode encontrar um exemplo desse recurso na prática em Aplicativo de exemplo do Kit de Ferramentas da Comunidade do .NET MAUI.

API

O código-fonte do Snackbar pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit.