Slide

Slide component.

Slide, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->slide()
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# 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

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

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