Central de notificações

Uma caixa de entrada completa de atividade com três abas de filtro animadas, linhas de tempo agrupadas, estados não lidos, avatar e status visuais, ações opcionais em linha, comportamento de marca-tudo-leitura, e um estado vazio composto.

Notificações

4 unread

Livia Saris

A Livia falou de ti.

2m

Pode rever o novo estado vazio antes de enviarmos o painel?

O backup do espaço de trabalho está pronto

18m

O backup de 23 de julho terminou com sucesso e está pronto para download.

Você se juntou ao Projeto Mar

1h

Maria adicionou- o como editor. Agora você tem acesso a todos os arquivos do projeto.

Jaydon Aminoff

O Jaydon pediu a sua avaliação.

Seg

Puxe o pedido #284 atualiza o fluxo de preferências de notificação.

Verificação de segurança concluída

Dom

Não foram encontradas credenciais expostas ou dependências vulneráveis.

Falha na implementação da antevisão

Sáb

A compilação parou enquanto validava as rotas da aplicativo.

Instalação

Você pode adicionar o bloco do centro de notificação usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add notification-center

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Filtragem

O centro possui seu filtro ativo por padrão. Use defaultTab para a visão inicial, ou combinar tab e onTabChange quando o produto circundante necessita de um estado controlado.

<NotificationCenter notifications={notifications} defaultTab="mentions"/> {/* Controlled filtering */}<NotificationCenter notifications={notifications} tab={activeTab} onTabChange={setActiveTab}/>

Dados e ações de notificação

Cada item declara sua categoria de filtro e grupo de linha do tempo. Adicione um avatar ou um ícone de estado semântico, definido unread, e anexar pequenas ações. A ação pressiona marcar esse item lido e relatar ambos os IDs através onAction.

const notification = { id: "deploy-failed", category: "system", // mentions | system | activity group: "Earlier this week", title: "Preview deployment failed", description: "The build stopped while validating routes.", timestamp: "Sat", unread: true, status: "error", // neutral | information | success | error actions: [ { id: "retry", label: "Retry", variant: "primary" }, { id: "logs", label: "View logs", variant: "secondary" }, ],};