TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Slide

Slide component.

# Basic Usage 

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

# Positions 

<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 

<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 

<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 

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

# Size Variations 

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

# Persistent

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

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

# Wireable

An option to control the slide via Livewire. 

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

# Wireable Customized

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

<!-- 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="$tsui.open.slide('slide-id')">
    Open
</x-button>
 
<x-button x-on:click="$tsui.close.slide('slide-id')">
    Close
</x-button>

# Events

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

<x-slide title="TallStackUi"
         x-on:open="alert('Opened!')"
         x-on:close="alert('Closed!')">
    TallStackUi
</x-slide>
Event Detail Fired when
open — The slide opens
close — The slide closes

# Focus Helper

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

<x-button x-on:click="$tsui.open.slide('slide-id')">
    Open
</x-button>
 
<x-slide id="slide-id" x-on:open="$tsui.focus('email')"> 
    <form>
        <x-input label="Email"
                 id="email" <!-- [tl! highlight] -->
                 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="$tsui.open.slide('slide-id')">
    Open
</x-button>
 
<x-slide id="slide-id" x-on:open="$tsui.focus('email', 1000)"> 
    <form>
        <x-input label="Email"
                 id="email" <!-- [tl! highlight] -->
                 hint="Insert your best email address" />
    </form>
</x-slide>

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

<x-button x-on:click="$tsui.open.slide('slide-id')">
    Open
</x-button>
 
<x-slide id="slide-id" x-on:open="$tsui.focus('email')"> 
    <form>
        <x-input label="Email"
                 data-focus="email" <!-- [tl! highlight] -->
                 hint="Insert your best email address" />
    </form>
</x-slide>

# Paddingless
NEW 

<x-slide paddingless>
    <x-table :$headers :$rows />
</x-slide>

# Footer Alignment
NEW 

<x-slide>
    TallStackUI
    <x-slot:footer between>
        <x-button color="red">Delete</x-button>
        <x-button>Save</x-button>
    </x-slot:footer>
</x-slide>
 
<!-- Accepted: start, center, end, between, unwrapped -->
Attribute Result
(none) justify-end
start justify-start
center justify-center
end justify-end, written out
between justify-between
unwrapped no aligning wrapper at all

The default moved

Slide footers now align to the end by default. Previously, omitting the attribute left them at the start because the base flex block had no justify class. Set start to keep the old layout.

Code highlighting provided by Torchlight