WARNING! You are browsing the docs for an old version of TallStackUI!

Powerful suite of Blade components for TALL Stack apps.

Slide

Slide component.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v3.

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

# Z Index 

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

<x-slide title="TallStackUi" persistent>
    TallStackUi
</x-slide>
Make sure to provide some way to close the slide when using this option, such as a button within the 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 Personalized

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="$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.

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

Code highlighting provided by Torchlight