Dial

Dial component.

Dial, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->dial()
    ->block('block', 'classes');

Dial Items, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->dial('items')
    ->block('block', 'classes');

# Concept

The dial component is a speed dial, also known as a Floating Action Button (FAB). It renders a fixed-position button in one of the screen corners that, when activated, reveals a set of action items. Each action item is defined using the dial.items component inside the main dial tag. Because the component uses fixed positioning, only one dial should be used per page.

# Basic Usage

<x-dial>
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
    <x-dial.items icon="trash" label="Delete" />
</x-dial>

# Positions

You can control which corner of the screen the dial appears in using the position attribute. The default position is bottom-right .

<!-- Available Positions:
     top-left,
     top-right,
     bottom-left,
     bottom-right (default)
 -->
 
<x-dial position="top-left">
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
</x-dial>

# Horizontal

By default, items fan out vertically from the main button. Use the horizontal attribute to display them in a horizontal row instead:

<x-dial horizontal>
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
    <x-dial.items icon="trash" label="Delete" />
</x-dial>

# Hover Mode

By default, the dial opens on click. Use the hover attribute to reveal items when the user hovers over the main button:

<x-dial hover>
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
</x-dial>

# Labels

Each dial.items accepts a label attribute that displays a tooltip-style text next to the item, helping users identify each action.

<x-dial>
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
    <x-dial.items icon="document-duplicate" label="Copy" />
    <x-dial.items icon="trash" label="Delete" />
</x-dial>

The label is not mandatory.

# Without Tooltip

If you prefer to hide all labels at once, use the without-tooltip attribute on the main dial component:

<x-dial without-tooltip>
    <x-dial.items icon="pencil" />
    <x-dial.items icon="share" />
    <x-dial.items icon="trash" />
</x-dial>

# Icon

The main button displays a plus icon by default, which rotates 45 degrees when the dial is open. You can change it using the icon attribute:

<x-dial icon="bars-4">
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
</x-dial>

# Square Variation

Use the square attribute to render the main button and items with square corners instead of a full circle.

<x-dial square>
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
    <x-dial.items icon="trash" label="Delete" />
</x-dial>

# Links

Each dial.items can act as a link by providing the href attribute. When set, the item renders as an anchor tag instead of a button:

<x-dial>
    <x-dial.items icon="pencil" label="Edit" href="/posts/1/edit" />
    <x-dial.items icon="eye" label="View" href="/posts/1" />
</x-dial>

You can also use the navigate or navigate-hover attributes for Livewire SPA navigation:

<x-dial>
    <x-dial.items icon="pencil" label="Edit" href="/posts/1/edit" navigate />
    <x-dial.items icon="eye" label="View" href="/posts/1" navigate-hover />
</x-dial>

# Size Variations

<x-dial xs>...</x-dial>
<x-dial sm>...</x-dial>
<x-dial>...</x-dial> {{-- md (default) --}}
<x-dial lg>...</x-dial>

# Color Variations

The color attribute changes the main button color. All TallStackUI colors are available:

<x-dial color="red">
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
</x-dial>
 
<x-dial color="emerald">
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
</x-dial>