StatusBadge

Componente Vue para exibir status com ícone animado (Font Awesome). Requer a instalação do Font Awesome no projeto globalmente.

Instalação

npm install status-badge

Se não tiver a biblioteca Font Awesome instalada globalmente no seu projeto, instale-a com:

npm install @fortawesome/fontawesome-free

Lembre de importar globalmente o CSS do Font Awesome no seu projeto, por exemplo, no seu arquivo main.js ou main.ts:

import "@fortawesome/fontawesome-free/css/all.min.css";

Uso

<template>
  <!-- Exemplo com posição customizada -->
  <StatusBadge status="finalizado" :size="44" position="right-bottom" />
</template>

<script setup>
import StatusBadge from "status-badge/StatusBadge.vue";
</script>

Props

• status: string (ex: finalizado, desenvolvimento, finalizando, aguardando_aprovacao, em_pausa, cancelado)
• size: número (tamanho do badge em px)
• position: string (define a posição do badge na tela)
  • Opções:
    • left-top
    • middle-top
    • right-top
    • left-center
    • middle-center
    • right-center
    • left-bottom
    • middle-bottom
    • right-bottom
  • Exemplo: <StatusBadge position="middle-center" />

Licença

MIT