Speed Dial
v0.0.10
mix mishka.ui.gen.component speed_dial
Overview of the Phoenix LiveView speed dial Component
The Mishka Chelekom Speed Dial component is a highly customizable and versatile Phoenix LiveView component designed for creating interactive, action-driven menus. Whether for quick navigation, accessing multiple functions, or streamlining user actions, this component supports flexible positioning and offers a dynamic user experience. It provides various styling options with colors, sizes, and icon animations to match your web application's design requirements.
This Phoenix LiveView component also supports advanced features like multiple action buttons within a single speed dial, allowing users to quickly access different parts of your application. Additionally, the icon animations and flexible action positions add to the component’s interactivity and visual appeal.
A speed dial needs a unique id.
Base Color & Variant
Base Color & Variant
<.speed_dial id="speed-dial-1"></.speed_dial>Default variant
The default variant of the Speed Dial component offers a solid background and border for it's action buttons. You can customize the appearance using various color options, such as white, primary, secondary, dark, success, warning, danger, info, silver, misc, and dawn.
Default variant
<.speed_dial id="speed-dial-2" color="white"></.speed_dial>
<.speed_dial id="speed-dial-3" color="natural"></.speed_dial>
<.speed_dial id="speed-dial-4" color="primary"></.speed_dial>
<.speed_dial id="speed-dial-5" color="secondary"></.speed_dial>
<.speed_dial id="speed-dial-6" color="dark"></.speed_dial>
<.speed_dial id="speed-dial-7" color="success"></.speed_dial>
<.speed_dial id="speed-dial-8" color="warning"></.speed_dial>
<.speed_dial id="speed-dial-9" color="danger"></.speed_dial>
<.speed_dial id="speed-dial-10" color="info"></.speed_dial>
<.speed_dial id="speed-dial-11" color="silver"></.speed_dial>
<.speed_dial id="speed-dial-12" color="misc"></.speed_dial>
<.speed_dial id="speed-dial-13" color="dawn"></.speed_dial>Shadow variant
The shadow variant of the Speed Dial component offers a wide range of color options with both a background and border, along with a subtle shadow effect to enhance the depth of the buttons. You can customize the appearance by choosing from colors such as white, primary, secondary, dark, success, warning, danger, info, silver, misc, and dawn.
Shadow variant
<.speed_dial id="speed-dial-14" color="natural" variant="shadow"></.speed_dial>
<.speed_dial id="speed-dial-15" color="primary" variant="shadow"></.speed_dial>
<.speed_dial id="speed-dial-16" color="secondary" variant="shadow"></.speed_dial>
<.speed_dial id="speed-dial-17" color="success" variant="shadow"></.speed_dial>
<.speed_dial id="speed-dial-18" color="warning" variant="shadow"></.speed_dial>
<.speed_dial id="speed-dial-19" color="danger" variant="shadow"></.speed_dial>
<.speed_dial id="speed-dial-20" color="info" variant="shadow"></.speed_dial>
<.speed_dial id="speed-dial-21" color="silver" variant="shadow"></.speed_dial>
<.speed_dial id="speed-dial-22" color="misc" variant="shadow"></.speed_dial>
<.speed_dial id="speed-dial-23" color="dawn" variant="shadow"></.speed_dial>bordered variant
The bordered variant of the Speed Dial component offers a wide range of color options with background and a border to the buttons. You can customize the appearance by choosing from colors such as white, primary, secondary, dark, success, warning, danger, info, silver, misc, and dawn.
bordered variant
<.speed_dial id="speed-dial-24" color="natural" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-25" color="white" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-26" color="primary" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-27" color="secondary" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-28" color="dark" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-29" color="success" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-30" color="warning" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-31" color="danger" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-32" color="info" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-33" color="silver" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-34" color="misc" variant="bordered"></.speed_dial>
<.speed_dial id="speed-dial-35" color="dawn" variant="bordered"></.speed_dial>gradient variant
The gradient variant of the Mishka Chelekom speed dial has gradients in various colors.
gradient variant
<.speed_dial id="speed-dial-36" color="natural" variant="gradient"></.speed_dial>
<.speed_dial id="speed-dial-37" color="primary" variant="gradient"></.speed_dial>
<.speed_dial id="speed-dial-38" color="secondary" variant="gradient"></.speed_dial>
<.speed_dial id="speed-dial-39" color="success" variant="gradient"></.speed_dial>
<.speed_dial id="speed-dial-40" color="warning" variant="gradient"></.speed_dial>
<.speed_dial id="speed-dial-41" color="danger" variant="gradient"></.speed_dial>
<.speed_dial id="speed-dial-42" color="info" variant="gradient"></.speed_dial>
<.speed_dial id="speed-dial-43" color="silver" variant="gradient"></.speed_dial>
<.speed_dial id="speed-dial-44" color="misc" variant="gradient"></.speed_dial>
<.speed_dial id="speed-dial-45" color="dawn" variant="gradient"></.speed_dial>Wrapper items position prop
The wrapper_position prop in the Speed Dial component control the direction of the items within wrapper. It takes top, bottom, left or right. With left the action items appear to the left of the trigger button, with right to the right, with bottom below it, and with top, the default, above it.
Wrapper items position prop
<.speed_dial id="speed-dial-50" wrapper_position="top">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-51" wrapper_position="left">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-52" wrapper_position="bottom">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-53" wrapper_position="right">
<:item icon="hero-home" />
</.speed_dial>Rounded prop
The rounded prop in the Speed Dial component controls the border radius of the button, allowing developers to customize the button's appearance by adjusting its corners. By default, the value is set to full, which creates a fully rounded or circular button. However, you can modify this to other values such as small, medium, or large to create varying degrees of rounded edges.
Rounded prop
<.speed_dial id="speed-dial-54" rounded="extra_small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-55" rounded="small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-56" rounded="medium">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-57" rounded="large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-58" rounded="extra_large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-59" rounded="full">
<:item icon="hero-home" />
</.speed_dial>Border prop
The border prop in the Speed Dial component allows developers to control the border style of the button. The default value is set to extra_small, which applies a thin border around the button. This prop offers flexibility in defining the border size, allowing you to choose from various options such as small, medium, large, and extra_large.
Border prop
<.speed_dial id="speed-dial-60" border="extra_small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-61" border="small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-62" border="medium">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-63" border="large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-64" border="extra_large">
<:item icon="hero-home" />
</.speed_dial>Size prop
The size prop in the Speed Dial component allows you to control the overall size of the speed dial and its associated action buttons, including the button's padding and icon dimensions. The default value is set to medium, which provides a balanced size for most interfaces. However, developers can choose from a range of predefined sizes, including extra_small, small, medium, large, extra_large, or even larger sizes such as double_large, triple_large, and quadruple_large.
Size prop
<.speed_dial id="speed-dial-65" size="extra_small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-66" size="small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-67" size="medium">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-68" size="large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-69" size="extra_large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-70" size="double_large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-71" size="triple_large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-72" size="quadruple_large">
<:item icon="hero-home" />
</.speed_dial>Space prop
The space prop in the Speed Dial component controls the spacing between the items when the speed dial is expanded. By default, the prop is set to extra_small, providing a minimal gap between items. However, you can customize this spacing by choosing from other options such as small, medium, large, or extra_large.
Space prop
<.speed_dial id="speed-dial-73" space="extra_small">
<:item icon="hero-home" />
<:item icon="hero-star" />
</.speed_dial>
<.speed_dial id="speed-dial-74" space="small">
<:item icon="hero-home" />
<:item icon="hero-star" />
</.speed_dial>
<.speed_dial id="speed-dial-75" space="medium">
<:item icon="hero-home" />
<:item icon="hero-star" />
</.speed_dial>
<.speed_dial id="speed-dial-76" space="large">
<:item icon="hero-home" />
<:item icon="hero-star" />
</.speed_dial>
<.speed_dial id="speed-dial-77" space="extra_large">
<:item icon="hero-home" />
<:item icon="hero-star" />
</.speed_dial>width prop
The width prop in the Speed Dial component defines the width of the wrapper when the speed dial is expanded. By default, the prop is set to fit, ensuring that the width of the items adapts to the content. However, you can customize the width by selecting predefined options like extra_small, small, medium, large, extra_large, or even larger sizes such as double_large, triple_large, and quadruple_large.
width prop
<.speed_dial id="speed-dial-78" width="extra_small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-79" width="small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-80" width="medium">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-81" width="large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-82" width="extra_large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-83" width="double_large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-84" width="triple_large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-85" width="quadruple_large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-86" width="fit">
<:item icon="hero-home" />
</.speed_dial>Padding prop
The padding prop in the Speed Dial component controls the padding of items wrapper By default, the padding is set to extra_small. You can customize this by choosing from a range of options: none, extra_small, small, medium, large and extra_large.
Padding prop
<.speed_dial id="speed-dial-87" padding="extra_small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-88" padding="small">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-89" padding="medium">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-90" padding="large">
<:item icon="hero-home" />
</.speed_dial>
<.speed_dial id="speed-dial-91" padding="extra_large">
<:item icon="hero-home" />
</.speed_dial>Clickable prop
The clickable prop in the Speed Dial component determines whether the element can be activated through user interaction, such as clicking or tapping. When set to true, the Speed Dial becomes interactive, allowing users to trigger the display of action items with a click. This is especially useful for dynamic UIs where users need quick access to multiple actions from a single button.
Clickable prop
<.speed_dial clickable id="unique_id">
<:item icon="hero-home" />
<:item icon="hero-star" />
</.speed_dial>Icon prop
The icon prop in the Speed Dial component allows you to include an icon within the trigger button. You can use any hero icons within both the trigger button and the item slot elements of the Speed Dial component.
Icon prop
<.speed_dial id="speed-dial-92" icon="hero-home">
<:item icon="hero-home" />
<:item icon="hero-star" />
</.speed_dial>Icon animated prop
The icon_animated prop allows you to add a rotating animation to the icon when the action button is clicked or hovered over. By setting this prop to true, the icon inside the trigger button will rotate.
Icon animated prop
<.speed_dial id="speed-dial-93" icon="hero-home" icon_animated>
<:item icon="hero-home" />
<:item icon="hero-star" />
</.speed_dial>Item slot
The item slot represents the individual elements that appear when the action button is hovered over or clicked. These items can be configured to display multiple actions within the Speed Dial component. Similar to the Speed Dial itself, each item supports customizable properties such as color, variant, and icon, allowing for consistent styling and functionality.
Item slot
<.speed_dial id="speed-dial-94">
<:item icon="hero-home" color="info" />
<:item icon="hero-star" color="secondary" />
<:item icon="hero-chart-bar" color="primary" />
</.speed_dial>Item slot link props
The navigate, patch, and href attributes allow you to link the item slots in the Speed Dial component to different paths within your application or external URLs. A linked item is drawn as a link with role="menuitem".
An item with only an icon has no text for a screen reader, so give it a label. The label becomes the link's aria-label. It applies to items that link: an item with no navigate, patch or href is drawn as a plain div and ignores label. The trigger button already carries hidden text for screen readers, "Open actions menu".
Item slot link props
<.speed_dial id="actions">
<:item icon="hero-home" label="Home" href="/path" />
<:item icon="hero-star" label="Favorites" navigate="/path" />
<:item icon="hero-chart-bar" label="Reports" patch="/path" />
</.speed_dial>Item slot icon class prop
The icon_class attribute allows you to define custom CSS classes specifically for the icons used in the Speed Dial's item slots. This gives you full control over the styling of the icons, enabling you to adjust their size, color, or any other visual properties to match your application's design.
Item slot icon class prop
<.speed_dial id="speed-dial-95">
<:item icon="hero-home" icon_class="your_classes" />
<:item icon="hero-star" icon_class="your_classes" />
<:item icon="hero-chart-bar" icon_class="your_classes" />
</.speed_dial>Item slot content
If you don't add an icon and write any text within the item slot, the text you provide will be displayed inside the Speed Dial item element.
Item slot content
<.speed_dial id="speed-dial-96">
<:item>Home</:item>
<:item>Mishka</:item>
</.speed_dial>Item slot content class prop
The content_class attribute allows you to assign custom CSS classes to the content within the item slots of the Speed Dial component. This provides flexibility in styling the text or any other elements contained in the slot.
Item slot content class prop
<.speed_dial id="speed-dial-97">
<:item content_class="font-bold text-amber-800">Home</:item>
<:item content_class="font-bold text-amber-800">Mishka</:item>
</.speed_dial>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | Yes | A unique identifier is used to manage state and interaction |
class
|
any
| — | — | No | Custom CSS class for additional styling |
wrapper_content_class
|
string
| — | — | No | Custom CSS class for additional styling to content |
trigger_class
|
string
| — | — | No | Custom CSS class for additional styling to button |
action_position
|
string
|
bottom-end
| — | No | Controls the position of the action items relative to the trigger button |
position_size
|
string
|
large
| — | No | Controls the distance from the edge of the screen for positioning |
wrapper_position
|
string
|
top
| — | No | Determines the position of the wrapper content (top, bottom, left, right) |
rounded
|
string
|
full
|
extra_smallsmallmediumlargeextra_largefullnone
| No | Determines the border radius |
size
|
string
|
medium
|
extra_smallsmallmediumlargeextra_largedouble_largetriple_largequadruple_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
color
|
string
|
natural
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdarkwhitedawn
| No | Determines color theme |
variant
|
string
|
base
|
defaultborderedshadowgradientbase
| No | Determines the style |
space
|
string
|
extra_small
|
extra_smallsmallmediumlargeextra_large
| No | Space between items |
width
|
string
|
fit
| — | No | Determines the element width |
border
|
string
|
extra_small
| — | No | Determines border style |
padding
|
string
|
extra_small
|
extra_smallsmallmediumlargeextra_largenone
| No | Determines padding for items |
clickable
|
boolean
|
false
| — | No | Determines if the element can be activated on click |
icon
|
string
| — | — | No | Icon displayed alongside of an item |
icon_animated
|
boolean
|
false
| — | No | Determines whether element's icon has animation |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
item
| No | Specifies item slot of a speed dial |
trigger_content
| No | Determines triggered content |
inner_block
| No | Inner block that renders HEEx content |
Attributes of the item slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
icon
|
string
| — | — | No | Icon displayed alongside of an item |
label
|
string
| — | — | No | Accessible name of the item, rendered as `aria-label` on a link item |
class
|
any
| — | — | No | Custom CSS class for additional styling |
navigate
|
string
| — | — | No | Defines the path for navigation within the application using a `navigate` attribute. |
patch
|
string
| — | — | No | Specifies the path for navigation using a LiveView patch. |
href
|
string
| — | — | No | Sets the URL for an external link. |
icon_class
|
string
| — | — | No | Determines custom class for the icon |
content_class
|
string
| — | — | No | Determines custom class for the content |
color
|
string
| — | — | No | Determines color theme |
variant
|
string
| — | — | No | Determines the style |
icon_position
|
string
| — | — | No | Determines icon position |
Attributes of the trigger_content slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
class
|
any
| — | — | No | Custom CSS class for additional styling |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultborderedshadowgradientbase
|
--color
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdarkwhitedawn
|
--size
|
extra_smallsmallmediumlargeextra_largedouble_largetriple_largequadruple_large
|
--space
|
extra_smallsmallmediumlargeextra_large
|
--padding
|
extra_smallsmallmediumlargeextra_largenone
|
--rounded
|
extra_smallsmallmediumlargeextra_largefullnone
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component speed_dial