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.

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 , light , misc , and dawn .

<.speed_dial color="white"></.speed_dial>
<.speed_dial color="primary"></.speed_dial>
<.speed_dial color="secondary"></.speed_dial>
<.speed_dial color="dark"></.speed_dial>
<.speed_dial color="success"></.speed_dial>
<.speed_dial color="warning"></.speed_dial>
<.speed_dial color="danger"></.speed_dial>
<.speed_dial color="info"></.speed_dial>
<.speed_dial color="light"></.speed_dial>
<.speed_dial color="misc"></.speed_dial>
<.speed_dial 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 , light , misc , and dawn .

<.speed_dial color="white" variant="shadow"></.speed_dial>
<.speed_dial color="primary" variant="shadow"></.speed_dial>
<.speed_dial color="secondary" variant="shadow"></.speed_dial>
<.speed_dial color="dark" variant="shadow"></.speed_dial>
<.speed_dial color="success" variant="shadow"></.speed_dial>
<.speed_dial color="warning" variant="shadow"></.speed_dial>
<.speed_dial color="danger" variant="shadow"></.speed_dial>
<.speed_dial color="info" variant="shadow"></.speed_dial>
<.speed_dial color="light" variant="shadow"></.speed_dial>
<.speed_dial color="misc" variant="shadow"></.speed_dial>
<.speed_dial color="dawn" variant="shadow"></.speed_dial>

Unbordered variant

The unbordered variant of the Speed Dial component offers a wide range of color options with only a background to the buttons. You can customize the appearance by choosing from colors such as white , primary , secondary , dark , success , warning , danger , info , light , misc , and dawn .

<.speed_dial color="white" variant="unbordered"></.speed_dial>
<.speed_dial color="primary" variant="unbordered"></.speed_dial>
<.speed_dial color="secondary" variant="unbordered"></.speed_dial>
<.speed_dial color="dark" variant="unbordered"></.speed_dial>
<.speed_dial color="success" variant="unbordered"></.speed_dial>
<.speed_dial color="warning" variant="unbordered"></.speed_dial>
<.speed_dial color="danger" variant="unbordered"></.speed_dial>
<.speed_dial color="info" variant="unbordered"></.speed_dial>
<.speed_dial color="light" variant="unbordered"></.speed_dial>
<.speed_dial color="misc" variant="unbordered"></.speed_dial>
<.speed_dial color="dawn" variant="unbordered"></.speed_dial>

Action button position prop

The action_position prop in the Speed Dial component allows control over where the action buttons appear. You can choose from various predefined positions, such as top-start for placing the buttons in the top-left corner, top-end for the top-right, bottom-start for the bottom-left, and bottom-end for the bottom-right. The terms start and end are direction-sensitive, meaning they adapt to the text direction (RTL or LTR) of your application. In RTL (Right-to-Left) mode, "end" refers to the left side of the viewport, whereas in LTR (Left-to-Right) mode, "end" refers to the right side of the viewport, making the component versatile for different language layouts.

<.speed_dial action_position="top-start">
  <:item></:item>
</.speed_dial>
<.speed_dial action_position="top-end">
  <:item></:item>
</.speed_dial>
<.speed_dial action_position="bottom-start">
  <:item></:item>
</.speed_dial>
<.speed_dial action_position="bottom-end">
  <:item></:item>
</.speed_dial>

Wrapper items position prop

The wrapper_position prop in the Speed Dial component control the direction of the items within wrapper. It supports "left" and "right" values. When set to "left," the action items will appear to the left of the trigger button, and when set to "right," they will appear to the right. By default, it's set to "top," so the items appear above the button. supported values are left , right , top , and bottom .

<.speed_dial wrapper_position="top">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial wrapper_position="left">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial wrapper_position="bottom">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial 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.

<.speed_dial rounded="extra_small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial rounded="small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial rounded="medium">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial rounded="large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial rounded="extra_large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial 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 .

<.speed_dial rounded="extra_small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial rounded="small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial rounded="medium">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial rounded="large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial rounded="extra_large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial rounded="full">
  <: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 .

<.speed_dial border="extra_small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial border="small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial border="medium">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial border="large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial border="extra_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 .

<.speed_dial space="extra_small">
  <:item icon="hero-home" />
  <:item icon="hero-star" />
</.speed_dial>
<.speed_dial space="small">
  <:item icon="hero-home" />
  <:item icon="hero-star" />
</.speed_dial>
<.speed_dial space="medium">
  <:item icon="hero-home" />
  <:item icon="hero-star" />
</.speed_dial>
<.speed_dial space="large">
  <:item icon="hero-home" />
  <:item icon="hero-star" />
</.speed_dial>
<.speed_dial 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 .

<.speed_dial width="extra_small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial width="small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial width="medium">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial width="large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial width="extra_large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial width="double_large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial width="triple_large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial width="quadruple_large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial 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 , small , medium , smallargel , extra_large .

<.speed_dial padding="extra_small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial padding="small">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial padding="medium">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial padding="large">
  <:item icon="hero-home" />
</.speed_dial>
<.speed_dial 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.

<.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.

<.speed_dial 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.

<.speed_dial 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.

<.speed_dial>
  <: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.

<.speed_dial>
  <:item icon="hero-home" href="/path" />
  <:item icon="hero-star" navigate="/path" />
  <:item icon="hero-chart-bar" 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.

<.speed_dial>
  <: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.

<.speed_dial>
  <: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.

<.speed_dial>
  <:item content_class="font-bold text-amber-800">Home</:item>
  <:item content_class="font-bold text-amber-800">Mishka<:item>
</.speed_dial>