Powerful suite of Blade components for TALL Stack apps.

Slide

Slide component.

TallStackUI
<x-slide>
TallStackUi
</x-slide>
TallStackUI
<x-slide left>
TallStackUi
</x-slide>

TallStackUI

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

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.

TallStackUi

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

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

TallStackUi

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.

An option to control the modal via Livewire.

TallStackUI

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

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

TallStackUI

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

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>

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

TallStackUi

TallStackUi

TallStackUi

TallStackUi
<x-slide title="TallStackUi"
x-on:open="alert('Opened!')"
x-on:close="alert('Closed!')">
TallStackUi
</x-slide>
This component contains settings available in the configuration file. Click here to learn more.
Previous
Select
Next
Tab

Code highlighting provided by Torchlight