98 lines
4.4 KiB
Markdown
98 lines
4.4 KiB
Markdown
### 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>
|
||
</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>
|
||
```
|
||
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>
|
||
```
|
||
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>
|
||
```
|
||
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>
|
||
```
|
||
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>
|
||
```
|
||
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>
|
||
```
|
||
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>
|
||
```
|
||
#### Rules
|
||
- {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
|