Material Design UI Components - [Ver. 2.0.2] - Purracchio Andrea

Hi guys !
if you don’t want to loss time in project and design of UI components;
if you want a ready to use UI elements rich of features you really needs;
if you want to use the beauty of Material Design without write a line of code and without loss time;
if you want to optimize the size of your application;
if your development model is “mobile first”;

You can try my plugin that I use for my application.

Service at:
picloud-mdui-landing.bubbleapps.io

More elements and relative documents developing in progress.

What’s new in Release 1.1.7

  • New content type “numeric text” that allowing only numeric keys and tell to mobile device to open numeric specific virtual keyboard (@JohnMark )
  • Selection dropdown menu to textfield component. You can add normal textfield and set a selection menu by action in workflow.
    What’s new better idea implemented !? Ok, captions and values are dissociated !!! In fact, what you read in UI may be different from data that you can save (@eli ).
  • Tooltips in buttons and icons
  • Selection dropdown menu and tooltips can change position in adaptation with available window space
  • Trailing icon in textfields that can be clicked !

What’s new in Release 2.0.2

  • Auto binding
  • Date picker
  • Button and Icons have switch behavior auto-binding feature (you can use to create switch until I make component)
  • Other minor but important improvements and bug fixes

F.A.Q.:
Q: Is just a template/design plugin ?
A: No, it adds very useful features and improvements not present in native Bubble elements.

Q: Why is so expensive relative other plugins ?
A: 1) It’s a huge group of component in a single plugin, it’s a development kit. 2) In general, other plugins are an integration of external libraries that who make the plugin can’t control. This plugin, instead, is projected and developed entirely from scratch!

1 Like

How to set date picker.

From @3brotherssupply :

Answer and solution:

  • In workflow you don’t set selection menu to text field multiple times but just once!:

Hey Andrea,
Can you push an update that allows your number input field to accept negative numbers? The field only currently accepts 0 and above and that is a real issue for me. Please let me know if this will be possible. Thank you!

Andrea, in addition to making the numeric input accept negative numbers, would it be possible for you to add a workflow action for toggling the icon state on/off (currently I believe this state can only be controlled by clicking the icon). That would be a huge help in the application I am building.

Be patient I’m working for that.

Give me an example and how that can be useful for more people. Tnx.

Released version 2.9.4.

Hi!
Added negative numbers feature in my Material Design UI Kit - Bubble plugin.

Bye.

1 Like

I’m sure at 99.9% that your needs can be made in another way. I can help you if you want. Bye.

There is a bug where if you update to 2.11 or higher the BDK Tooltip plugin’s font defaults to times new roman (or similar).

Hi @chris.williamson1996
Don’t worry. Solved in version 2.11.1. Look below.
http://forum.bubble.io/t/create-a-nice-interface-in-material-design-with-your-preferred-font/130737/4?u=studio.purracchio

Shot you a DM, still seems to be an issue.

Before the last upgrade of my plugin, your whole app’s font was the Roboto like I have put in my code when my plugin needed that. With new version you can choose your preferred font to every single component of my plugin and then I had to remove general font attribution.

That is not my fault but a bad font definition in other components or plugins, because, before, they depended from my settings.

To solve it, you can add the code below in your App settings at SETTINGS -> SEO/METATAGS tab, Script in the body:

<style>
    body: {
       font-family: "Roboto" ; //...(or what you want)
    }
</style>

Thank you for your notice. Bye.

1 Like

Love this component! I have a question:

How can I use the Number type to enter and display a dollar value? The input and the initial value only take a numeric, so I cannot specify the initial value with a format of “$ 9,999.99”. Of course, we don’t need the currency units while editing, but it would be nice for display purposes.
See: Text fields – Material Design 3


Paul

Hi @paulwolf72 ,
your right!

I had already tried to do that, with some complication. It was not designed for this function, you know. However, I try to implement it in the next release that will fix also responsiveness adaptation.
Bye.

Sr. Purrachhio, I got the 2.12 with responsive, very nice!

I’m having trouble getting the MDUI-Chips-Choice to show the value in my database when it’s from an Option Set element.

The Option Set is “Pet Sex” and the values are Pet Sex.Male and Pet Sex.Female. The Captions and Value work fine. (I have even come up with a formula to save where I search for the Option Set value based on the Display Name matching the selected Chips-Choice value - not elegant but it works.)

But, the “Init value” does not result in the proper element being selected. It’s as if I have to “clear” something before setting. This would be very bad in a repeating group. Nevertheless, can you help me?

THE “Init value” ASPECT IS NOT WORKING AS EXPECTED
image

Note that I tried the MDUI-Chips-Thing

And I have a new bug when setting the initial value of a MDUI-Select:

When I set a workflow (where I am effectively doing a Display data into a group by calling a custom workflow that sets state and other values before the floating group shows. As you can see, there a couple of steps where it sets some custom states just fine (because with a repeating group, I use a custom state to help me identify which element is “selected”, using conditionals – a travesty of missing features in repeating group, I dare say). But anyway, with the beautiful MDUI components, integration with the database to show/save values from selectors is really key.:

I get this error:

What I really needed to do was this:

image
which threw a similar but different error.

Hi @paulwolf72
I’m on vacation however I will try to work on your requests as soon as possible.
See you.

1 Like

Hi Paul.

Compliments for your smart solution to override the difference between 2 types: Text and Option Set’s Display.

OK, it works very well for me. How I did it:

  1. Add a thing Pet with Sex field to replicate your set

  1. A workflow to save the correct pet’s sex according with the value of the [MDUI Chips Choice] in a similar way you did it.

  1. The MDUI Chips Choice exactly like yours.

My advice is to verify all the steps, especially the saving method.
Let me know.

Hi @paulwolf72
these errors occurs when you try to assign values or change properties of a MDUI component that is not actually displayed.

Try to change the position of the action “Set value of MDUI…” when, in workflow, the component is visible …eg: when Floating Group is loaded and completely visible.

Available the new 2.12.1 release …some weird error warnings fixed.

1 Like

I have checked all the steps you indicate. Here is a Loom with all the details: