README

安装

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

在应用头部，添加

 @FaStackPingCss()

依赖项

最小 font awesome 4
Laravel 8 (但可以通过更改发布的组件来用于内部版本)

使用

在线 / 成功 / 真
```
<x-fa-stack-on />
```
离线 / 错误 / 假
```
<x-fa-stack-on />
```

通用

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

示例：info-circle

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

示例：plus 45°

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

示例：position right bottom

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

示例：position right top

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

一般信息

Css 用于应用在 font awesome 图标上的 ping 效果，用作状态，例如在线或离线等，甚至其他图标和颜色，在背景上添加 ping 效果。

使用 Stacked Icons 概念

颜色示例

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

图标示例
```
"info-circle",
"square",
"asterisk",
```
旋转 45°
```
fa-rotate-45
```
相对于容器位置
- 右下角
  
  fa-stack-right-bottom
  
  fa-stack-rb (别名)
- 右上角
  
  fa-stack-right-top
  
  fa-stack-rt (别名)

HTML

已准备好使用 tooltip

将 css 添加到 HTML 的 head 中并使用以下代码

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

无偏见

<-- 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>

为了修改图标和/或 Fontawesome 更高级的版本

发布了 vendor 并更改基本组件 fa-stack-ping

在线演示 Jsfiddle

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

许可

MIT 许可证

gsferro / fa-stack-ping

维护者

详情

README

安装

依赖项

使用

一般信息

HTML

为了修改图标和/或 Fontawesome 更高级的版本

在线演示 Jsfiddle

许可