TallStackUI, Slide

# Basic Usage

TallStackUI

<x-slide>
    TallStackUi
</x-slide>

# Positions

Right

Left

Top

Bottom

<x-slide>
    Right
</x-slide>
<x-slide left>
    Left
</x-slide>
<x-slide top>
    Top
</x-slide>
<x-slide bottom>
    Bottom
</x-slide>

# Title Slot

TallStackUI

<x-slide id="title-slide">
    <x-slot:title>
        TallStackUi
    </x-slot:title>
    TallStackUi
</x-slide>
 
<!-- or -->
 
<x-slide title="TallStackUi">
    TallStackUi
</x-slide>

# Footer Slot

TallStackUI

<x-slide>
    TallStackUi
    <x-slot:footer start> <!-- start: justify-start, end: justify-end -->
        TallStackUi
    </x-slot:footer>
</x-slide>
 
<!-- or -->
 
<x-slide footer="TallStackUi">
    TallStackUi
</x-slide>

# Background Blur

TallStackUI

SM

TallStackUI

MD

TallStackUI

LG

TallStackUI

XL

<!-- sm, md, lg, xl -->
 
<x-slide blur> <!-- sm blur -->
    TallStackUi
</x-slide>

# Size Variations

TallStackUI

Default (lg)

TallStackUI

sm

TallStackUI

md

TallStackUI

xl

TallStackUI

3xl

TallStackUI

4xl

TallStackUI

5xl

TallStackUI

6xl

TallStackUI

7xl

TallStackUI

Full

<!-- sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full -->
 
<x-slide title="TallStackUi" size="2xl">
    TallStackUi
</x-slide>

Applicable only on desktop devices.

# Z Index

TallStackUI

<x-slide title="TallStackUi" z-index="z-10">
    TallStackUi
</x-slide>

# Persistent

An option to prevent the user from closing the slide when click outside.

TallStackUI

<x-slide title="TallStackUi" persistent>
    TallStackUi
</x-slide>

# Wireable

An option to control the slide via Livewire.

TallStackUI

<!-- Livewire boolean property: $slide -->
 
<x-slide title="TallStackUi" wire>
    TallStackUi
</x-slide>
 
<x-button wire:click="$toggle('slide')">
    Open
</x-button>

# Wireable Personalized

Customize which property to use to control the slide via Livewire.

TallStackUI

<!-- Livewire boolean property: $tallstackui -->
 
<x-slide title="TallStackUi" wire="tallstackui">
    TallStackUi
</x-slide>
 
<x-button wire:click="$toggle('tallstackui')">
    Open
</x-button>

# AlpineJS Helper

Helpers to open and close the slide using AlpineJS.

<x-slide id="slide-id">
    TallStackUi
</x-slide>
 
<x-button x-on:click="$slideOpen('slide-id')">
    Open
</x-button>
 
<x-button x-on:click="$slideClose('slide-id')">
    Close
</x-button>

# Events

An option to listen event when the slide is opening or closing.

TallStackUI

<x-slide title="TallStackUi"
         x-on:open="alert('Opened!')"
         x-on:close="alert('Closed!')">
    TallStackUi
</x-slide>

# Focus Helper

Ah helper to interact with slide events to easily focus an input when slide open.

<x-button x-on:click="$slideOpen('slide-id')">
    Open
</x-button>
 
<x-slide id="slide-id" x-on:open="$focusOn('email')"> 
    <form>
        <x-input label="Email"
                 id="email" 
                 hint="Insert your best email address" />
    </form>
</x-slide>

You can control the time (in milliseconds) to wait before focusing the input, default is 250 :

<x-button x-on:click="$slideOpen('slide-id')">
    Open
</x-button>
 
<x-slide id="slide-id" x-on:open="$focusOn('email', 1000)"> 
    <form>
        <x-input label="Email"
                 id="email" 
                 hint="Insert your best email address" />
    </form>
</x-slide>

Additionally, you can use a custom data-focus HTML attribute to determine the input to be focused:

<x-button x-on:click="$slideOpen('slide-id')">
    Open
</x-button>
 
<x-slide id="slide-id" x-on:open="$focusOn('email')"> 
    <form>
        <x-input label="Email"
                 data-focus="email" 
                 hint="Insert your best email address" />
    </form>
</x-slide>

# Configurations

This component contains settings available in the configuration file. Click here to learn more.