README

Instalação

composer require gsferro/fa-stack-ping && php artisan vendor:publish --provider="Gsferro\FaStackPing\Providers\FaStackPingServiceProvider" --force

• No header da aplicação, adicione:

 @FaStackPingCss()

Dependencias:

• Minimo font awesome 4
• Laravel 8 (mas pode ser alterado para ser usado em versões interiores alterando o componente publidados)

Uso

• Online / Success / True

  <x-fa-stack-on />

• Offline / Error / False

  <x-fa-stack-on />

• Genérico

  <x-fa-stack-ping 
      fa="info-circle" #não precisa colocar a class fa
      text="<class_css>" #exemple text-red 
      title="<opcional>" 
  />

  • Exemplo: info-circle

    <x-fa-stack-ping fa="info-circle" text="blue" title="information" />

  • Exemplo: plus com 45º

    <x-fa-stack-ping fa="plus fa-rotate-45" text="gray" title="rotate" />

  • Exemplo: position right bottom

     <x-fa-stack-on class="fa-stack-right-bottom" />
     <x-fa-stack-on class="fa-stack-rb" />

  • Exemplo: position right top

     <x-fa-stack-off class="fa-stack-right-top" />
     <x-fa-stack-off class="fa-stack-rt" />

Informações Gerais

Css para aplicar efeito ping em icon font awesome como forma de status, como online ou offline por ex, e até outros icones e cores, colocando no fundo o efeito de ping.

Utiliza o conceito de Stacked Icons

• Exemplos Cores:

  "success",
  "red",     
  "yellow",  
  "gray",
  

• Exemplos Icons:

  "info-circle",
  "square",
  "asterisk",
  

• Fazer Rotação 45º

  fa-rotate-45
  

• Posição em relação a container

  • Right Bottom

    fa-stack-right-bottom

    fa-stack-rb (alias)

  • Right Top

    fa-stack-right-top

    fa-stack-rt (alias)

HTML:

• Esta preparado para usar o tooltip

• Adicione o css ao head do seu html e utilize o codigo abaixo

  <link href="vendor/fa-stack-ping/fa-stack-ping.css" rel="stylesheet" type="text/css"> 

• Agnostico:

  <-- status online -->
  <span class="fa-stack-ping" title="online">
    <i class="fa fa-circle fa-stack-1x text-success"></i>
    <i class="fa fa-circle fa-stack-1x text-success fa-animate-ping"></i>
  </span>

  <-- status offline -->
  <span class="fa-stack-ping" title="offline">
    <i class="fa fa-circle fa-stack-1x text-red"></i>
    <i class="fa fa-circle fa-stack-1x text-red fa-animate-ping"></i>
  </span>

Para modificar os icones e/ou versões superiores do Fontawesome:

Publiquei a vendor e altere o componente base fa-stack-ping

Demo Online Jsfiddle

https://jsfiddle.net/gsferroti/tdxL8vaf/11/

License

• MIT License