FAB全称Floating Action Button浮动的动作按钮
FAB
| 尺寸 | 样式 | 属性 |
|---|---|---|
| small | w-10 h-10 | - |
| medium | w-12 h-12 | - |
| large | w-16 h-16 | - |
禁用效果
| 样式 | 属性 |
|---|---|
| cursor-not-allowed | - |
| opacity-50 | - |
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<div class="container mx-auto my-12 p-12 flex flex-row items-center justify-between">
<button class="p-0 w-10 h-10 rounded-full bg-red-600 shadow text-white mouse transition ease-in duration-200 focus:outline-none active:bg-red-700 active:shadow-lg">
<i class="fa fa-plus"></i>
</button>
<button class="p-0 w-12 h-12 rounded-full bg-red-600 shadow text-white mouse transition ease-in duration-200 focus:outline-none active:bg-red-700 active:shadow-lg">
<i class="fa fa-plus"></i>
</button>
<button class="p-0 w-16 h-16 rounded-full bg-red-600 shadow text-white mouse transition ease-in duration-200 focus:outline-none active:bg-red-700 active:shadow-lg">
<i class="fa fa-plus"></i>
</button>
<button class="p-0 w-16 h-16 rounded-full bg-red-600 opacity-50 shadow text-white mouse cursor-not-allowed transition ease-in duration-200 focus:outline-none active:bg-red-700 active:shadow-lg">
<i class="fa fa-plus"></i>
</button>
</div>
网友评论