TallStackUI, Dial

# 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

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

<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

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

# Labels

<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

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

# Icon

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

You can use prevent-rotate to prevent the rotation of the icon.

# 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

<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

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

# Item Colors

<x-dial>
    <x-dial.items icon="pencil" label="Edit" color="blue" />
    <x-dial.items icon="share" label="Share" color="green" style="light" />
    <x-dial.items icon="trash" label="Delete" color="red" style="outline" />
    <x-dial.items icon="star" label="Favorite" />
</x-dial>

Dial

Dial, Customization Blocks

Dial Items, Customization Blocks