baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

format project

Browse source
This commit is contained in:
Benjamin Palko 2026-08-11 16:25:07 -04:00
parent 7651afaa0b
commit a6d4064af8
83 changed files with 942 additions and 536 deletions
Download patch file Download diff file Expand all files Collapse all files

106
.opencode/skills/daisyui/components/fab.md
View file

@ -1,98 +1,118 @@
### fab
FAB (Floating Action Button) stays in the bottom corner of screen. It includes a focusable and accessible element with button role. Clicking or focusing it shows additional buttons (known as Speed Dial buttons) in a vertical arrangement or a flower shape (quarter circle)
[fab docs](https://daisyui.com/components/fab/)
#### Class names
- component: `fab`
- part: `fab-close`, `fab-main-action`
- modifier: `fab-flower`
#### Syntax
A single FAB in the corner of screen
```html
<div class="fab">
<button class="btn btn-lg btn-circle">{IconOriginal}</button>
<button class="btn btn-lg btn-circle">{IconOriginal}</button>
</div>
```
A FAB that opens a 3 other buttons in the corner of page vertically
```html
<div class="fab">
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<button class="btn btn-lg btn-circle">{Icon1}</button>
<button class="btn btn-lg btn-circle">{Icon2}</button>
<button class="btn btn-lg btn-circle">{Icon3}</button>
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<button class="btn btn-lg btn-circle">{Icon1}</button>
<button class="btn btn-lg btn-circle">{Icon2}</button>
<button class="btn btn-lg btn-circle">{Icon3}</button>
</div>
```
A FAB that opens a 3 other buttons in the corner of page vertically and they have label text
```html
<div class="fab">
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>
```
FAB with rectangle buttons. These are not circular buttons so they can have more content.
```html
<div class="fab">
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<button class="btn btn-lg">{Label1}</button>
<button class="btn btn-lg">{Label2}</button>
<button class="btn btn-lg">{Label3}</button>
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<button class="btn btn-lg">{Label1}</button>
<button class="btn btn-lg">{Label2}</button>
<button class="btn btn-lg">{Label3}</button>
</div>
```
FAB with close button. When FAB is open, the original button is replaced with a close button
```html
<div class="fab">
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<div class="fab-close">Close <span class="btn btn-circle btn-lg btn-error">×</span></div>
<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<div class="fab-close">Close <span class="btn btn-circle btn-lg btn-error">×</span></div>
<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>
```
FAB with Main Action button. When FAB is open, the original button is replaced with a main action button
```html
<div class="fab">
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<div class="fab-main-action">
{LabelMainAction}<button class="btn btn-circle btn-secondary btn-lg">{IconMainAction}</button>
</div>
<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<div class="fab-main-action">
{LabelMainAction}<button class="btn btn-circle btn-secondary btn-lg">{IconMainAction}</button>
</div>
<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
</div>
```
FAB Flower. It opens the buttons in a flower shape (quarter circle) arrangement instead of vertical
```html
<div class="fab fab-flower">
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
<button class="btn btn-lg btn-circle">{Icon1}</button>
<button class="btn btn-lg btn-circle">{Icon2}</button>
<button class="btn btn-lg btn-circle">{Icon3}</button>
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
<button class="btn btn-lg btn-circle">{Icon1}</button>
<button class="btn btn-lg btn-circle">{Icon2}</button>
<button class="btn btn-lg btn-circle">{Icon3}</button>
</div>
```
FAB Flower with tooltips. There's no space for a text label in a quarter circle, so tooltips are used to indicate the button's function
```html
<div class="fab fab-flower">
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
<div class="tooltip tooltip-left" data-tip="{Label1}">
<button class="btn btn-lg btn-circle">{Icon1}</button>
</div>
<div class="tooltip tooltip-left" data-tip="{Label2}">
<button class="btn btn-lg btn-circle">{Icon2}</button>
</div>
<div class="tooltip tooltip-left" data-tip="{Label3}">
<button class="btn btn-lg btn-circle">{Icon3}</button>
</div>
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
<button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
<div class="tooltip tooltip-left" data-tip="{Label1}">
<button class="btn btn-lg btn-circle">{Icon1}</button>
</div>
<div class="tooltip tooltip-left" data-tip="{Label2}">
<button class="btn btn-lg btn-circle">{Icon2}</button>
</div>
<div class="tooltip tooltip-left" data-tip="{Label3}">
<button class="btn btn-lg btn-circle">{Icon3}</button>
</div>
</div>
```
#### Rules
- {Icon*} should be replaced with the appropriate icon for each button. SVG icons are recommended
- {Icon\*} should be replaced with the appropriate icon for each button. SVG icons are recommended
- {IconOriginal} is the icon that we see before opening the FAB
- {IconMainAction} is the icon we see after opening the FAB
- {Icon1}, {Icon2}, {Icon3} are the icons for the additional buttons
- {Label*} is the label text for each button
- {Label\*} is the label text for each button