[New Plugin] Beautiful & Custom Toggle

[alex4]

Hey Bubblers, just published a Custom Toggle plugin — it includes many of ways to customize your toggle input that currently aren’t available in other toggle plugins:

• Set the Toggle color (when set to “no” and when set to “yes” to exact Hex/RGBA color)
• Set the Toggle corner roundness
• Set the Toggle Handle roundness
• Set the Toggle height and width in pixels
• Set the Handle color (to exact Hex/RGBA color)
• Set the transition time (for the handle to move from left-right, and the color to change)

Here’s a screenshot of the Toggle properties:

Here are examples of toggles you can create with this plugin:

Example in run mode and editor mode.

Let me know if you have any questions or feedback!
Alex
TechBlocks

[josh10]

I’ve been wanting some nice toggles for my next project. These look great and I’ll test them out.

[alex4]

Thanks @josh10 – don’t hesitate to provide feedback. Enjoy!

[juancamilovasquezard]

It looks great !

[alex4]

Thanks @juancamilovasquezard, let me know if you have any feature requests!

[alex4]

Hi Bubblers, just pushed an update to the toggles plugin so that you can customize the width of your toggle handle. This can be helpful if you want to add text or icons above your toggles so that users know what it means when the toggle is on or off.

Here is an example of this implemented for an “All Calls” vs. “Missed Calls” toggle:

Let me know if you have any questions!
Alex
TechBlocks

[alejandrowunderlich]

Unfortunately your toggles, beautiful as they are, are fatally buggy.

Having several rows of them to turn a list of notifications on or off has unreliable behaviour. It can even go back on quickly, trigger several backend APIs, etc.

It seems one has to wait for the animation to complete for it to work… sometimes.

Unfortunate for pretty toggles.

[alex4]

Hi there, thanks for the feedback.

The plugin does not communicate with any APIs. Please send me a screen recording of the bug if you’re still experiencing it.

[stieger]

Very beautiful indeed, but the handle does not move every time the status is altered. I used the missed calls example. Did I miss something?

[alex4]

Hi @stieger – thanks for reaching out!

I took a look at the issue and believe I’ve found the cause: the handle didn’t move when the dynamic value of the toggle changed from “Yes” to “No”. I’ve pushed a fix for this issue to address this bug and it should now be working properly. Please update the plugin and let me know if you run into any issues! (Let me know if you were actually talking about something else, happy to look further into this)

Enjoy!
Alex
TechBlocks

[alex4]

Hi All, just updated the Custom Toggle plugin. You can now customize the handle shadow color in the Toggle element properties using the “Handle Shadow Color” input:

Let me know if you have any questions or feedback! Run mode demo link here.

Alex

[jonpatrick65]

Hi Alex,

Not sure if this is the right place for this - I didn’t see anywhere else to go for issues with this plugin.

I just installed your custom toggle plugin. It looks and works great, except:

1. I set a simple conditional to show/hide the toggle when another element is hovered. However, each time the element is ‘unhovered’ and ‘re-hovered’ the toggle reverts to its default state. This happens when the default is “yes” or “no.” Here’s a quick screen cam of what’s happening:
   Toggle behavior on hover

2. Changing the button roundness (from the 500 default) has no effect on the toggle’s appearance.

Thanks!

Jon M

[alex4]

Hi @jonpatrick65 – thanks for reaching out!

1. I’ll take a look at updating the issue causing the toggle to revert to its initial state. Keep you posted on this one.
2. I’m not able to reproduce this one. Could you provide a screenshot of the run mode and editor mode setup?

Thanks!
Alex

[alex4]

Update v1.6.0 – The state of the toggle now persists in cases where it is made invisible<->visible

FYI @jonpatrick65, who provided the feedback for this update – hope this helps!

Alex
TechBlocks

[jonpatrick65]

Thanks Alex! The state persistence works great.

Screenshots of the toggle roundness are attached.

I can probably get by with the ‘500’ roundness look, but would be nice to have the option to change. Thanks.

[alex4]

@jonpatrick65 looks like you have it set to 200. Try “0” if you want no rounded edges, or “2” if you want slightly rounded edges. That number is the radius (in pixels) of the corner roundness – meaning if your toggle is less than 400px (2 times 200px radius) you won’t notice any difference.

Hope that helps. Let me know if I can clarify!

[jonpatrick65]

Thank Alex. I just assumed that everything was probably calibrated from the pre-populated number – without ever giving a thought to what that number might actually represent! As you can tell, I’m learning.

Thanks again!

Jon

[alex4]

@jonpatrick65 we’ve all been there! Welcome to the Bubble community – happy to have you onboard

[josh10]

@alex4 Can you be the first person to develop an alert plugin that lets us send out a little character like clippy with notifications?

For the young people in the group (This is Clippy):

[bulat]

Hello Alex!
I bought this plugin, a very nice toggle indeed. Though, I have a question: in your demo page there is an example toggle with ‘all calls’ and ‘missed calls’. I’m trying to do the same thing but can’t manage so far. I understand that you create an additional group, which is above the toggle and the texts, and when a user clicks on it, it changes the toggle’s value. But for some reason I couldn’t place that group so that it would be above everything - it clicks the toggle itself somehow. Do you have any secret?