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

gsferro / fa-stack-ping

Maintainers

Details