Get started with the speed dial component to show a list of buttons or menu items positioned relative to the body in either corner as a quick way to allow certains actions to be made by your users.
Default speed dial #To initialize a speed dial component you need to wrap the trigger element and the list of items inside an element and use the data-dial-init data attribute on it.
You can use any elment as SpeedDial trigger (see the Custom main button example), but for convenience SpeedDialTrigger element is used in the below examples.
Note! Default class for speed dial was fixed end-6 bottom-6. Now no positioning is set by default.
The Speed Dial components accommodate color options (âredâ | âlimeâ | âgreenâ | âtealâ | âcyanâ | âblueâ | âpurpleâ | âpinkâ | undefined), gradient, shadow, and outline styles. For further information, please refer to the Button component documentation.
Square speed dial #Use this example to make the trigger buttonâs style square instead of a full circle. As SpeedDialButton is an instance of Button we use the pill property to achevie the effect.
This example can be used to show the descriptive text inside the button instead of a tooltip.
Text outside button #Use this example to show the text of each button outside of the speed dial as an alternative style.
Dropdown menu #This example can be used to show a list of menu items instead of buttons when activating the speed dial.
Alternative menu #This example can be used to show an alternative style when showing a list of menu items.
A11y #Use Tab and Shift+Tab to navigate between buttons or links in the speed dial. Press ESC to close it.
Align the speed dial menu items by using property placement="top|right|left|bottom".
Control the main button position using the flexbox utility classes from Tailwind CSS through property class.
Since the SpeedDial component extends Popper, it also supports the transition and transitionParams props for customizing animations.
Use the trigger="click|hover" attribute of the speed dial component to set which type of action should activate the speed dial: click or hover.
The default trigger type is hover for each speed dial component.
The default trigger type is hover for each speed dial component.
Custom main button #You can change the main button to any element you want.
Component data #The component has the following props, type, and default values. See types page for type information.
References #RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4