Slide

Slide component.

Slide, Personalization Blocks

Example:

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

WARNING!

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

# Basic Usage

TallStackUI

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

# Left Side

TallStackUI

<x-slide left>
    TallStackUi
</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, md, lg, xl -->
 
<x-slide blur> <!-- sm blur -->
    TallStackUi
</x-slide>

# Size Variations

TallStackUI

Default (lg)

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>

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.

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>

# Configurations

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