new x-portal directive for alpinejs

[nabeghe]

Currently, there is a directive called x-teleport in AlpineJS that helps to move an element from one part of the page to another. However, I need a feature (directive) that allows me to specify that if the screen size is greater or less than a certain value, the element must be moved to another location, and when the condition is not met, it must return to its original position. I don't know if AlpineJS has this capability or not, and I think the name x-portal would be better suited for this directive, as it is similar to a portal that moves from one world (screen) to another and also moves the portal when we switch between worlds (screens). 😂

My design with TailwindCSS was mobile-first, and I wanted to move some elements to the sidebar on desktop on xl screen, and then return them to their original position if the screen size became smaller again. I implemented this feature temporarily with a custom directive in my project, but if it is added to the AlpineJS core, it would be a useful feature alongside teleport.

This feature can be implemented by receiving an object with three keys: target, screen, and is, as follows:

<div x-portal="{target: '#id', screen='lg', is=false}" ></div>

The screen key can receive a name or a number. These names can be default values in TailwindCSS or can be user-configured. Also, the 'is' specifies whether the size is greater or less than the given screen value, or it can be specified using greater-than and less-than signs on the screen value.

Of course, this was just my suggestion, and it may be possible to specify it with x-portal:target, x-portal:screen, and so on, or even add it to x-teleport itself.

Thank you for your efforts, dears.

[ekwoka]

It's likely what you're describing can and should be done with css only, or just have multiple instances would be fine as well.

[nabeghe]

It's not possible to move an element from one parent to another using CSS!

x-teleport only moves elements and is a one-way street, and cannot be adjusted based on the screen size. Additionally, if we do this with CSS, we have to display the elements multiple on the page and hide and show them in different sizes.

[ekwoka]

It's not possible to move an element from one parent to another using CSS!

This depends on exactly what you need, cause it absolutely can, in terms of layout.

You can make your own little easy plugin for this if you want.

Without more details, I feel like there may be a better solution than this.

we have to display the elements multiple on the page and hide and show them in different sizes.

Yeah, that's extremely normal and quite easy to do.

[nabeghe]

I've just unleashed my custom x-portal directive available to everyone: alpine-portal