New Plugin - Material Design UI Components

Released ver. 2.7.0

New component: MDUI Chips Filter

1 Like

This is great @studio.purracchio… thanks for building.

I’m looking for a better tooltip solution for bubble. This would be ideal, but many of the icons are near the border of groups and the tool tips end up hidden by elements below when hovered. Is there a way for the tool tips to show on top of all the elements on the page (ie native groupfocus behavior)?Screen Shot 2020-05-22 at 12.51.42 AM

@studio.purracchio is it possible to use custom colors? Would be perfect solution for labels w/ colors

1 Like

Released version 2.7.2

What’s new in Material Design User Interface Development Kit (MDUI Dev Kit):

Improved tooltips in buttons and icons:

  • Fixed positioning to avoid hiding by other components in page.
  • Now you can set long messages for multilines tooltips.
  • Now you can customize background color and font contrast accordingly.

Try it and let me know. Bye.

1 Like

Released version 2.7.3

WARNING - This is an error fixed version. I advice everybody to update to.

Released Material Design UI Dev Kit ver. 2.8 by Purracchio Andrea

Added Tabs !

2020-06-01 19.38.37

Really great plugin - thanks a ton!
Quick idea: It might be helpful to include “material” or “material design” in the name of your plugin, thus helping users find it in the bubble plugin browser (and you getting found).
Cheers

Thank you for your advice. I did it!

:+1:
(The reason I mentioned it was because I saw your plugin a few months back but could’t use it (pricing was also different) and when I wanted to search for it again later, I didn’t remember the name and couldn’t find it by searching for “material”:slight_smile:)

You mentioned you might release a version which is same bit not strict to material design only for customising, any idea how far away that is?

@studio.purracchio This plugin is super underrated (and under used)! Thank you for making this!! It solves so many small UI problems I’ve had in the past!

Question - do you plan to add support for scrollable tabs just like in the Material Design spec? That would solve another significant UI problem I’m having.

Yeah! My wallet has the same opinion !!! :stuck_out_tongue_winking_eye: …Really, thank you.

I’m not very sure I get it. Look at link below and tell me if I’ve just do what you wish.

Material Design UI Kit - Tabs

Look at “Tab in action” and imagine horizontal animation otherwise vertical.

Let me know. Bye.

@zelus_pudding, Ok I understand what you mean for “scrollable” …Tab bar is scrollable and in a next release will be scrollable with the same effect of original material design, in fact, tab bar, in future, can autoscroll to left depending if tapped button is partially visible on the right of screen.

Yes, that is exactly what I meant by scrollable - that extra menu tabs that don’t fit on screen overflow into the unviewable area either right/left of screen but are still accessible by swiping left/right or tapping on a partially shown tab item.

As for our “underrated” concern - maybe your plugin would get more purchases if you tossed the word “Google” in front of it. Kind of like how Bubble has their “Google Material Icons” plugin.

Also, I think it’s easy for Bubbler’s to accidentally gloss over your plugin listing because it doesn’t list the components available.

Something like the following description would catch my interest.

Collection of sleek Google Material Design components. Like having 5 plugins in 1. Contains customizable Buttons, Checkboxes, Chips, Date Fields, Date Picker, Icons, Number Fields, Dropdown Select, Spinners, Tabs. The custom Text Field component will make your credit card inputs look beautiful! New components added frequently.

Just my thoughts. Looking forward to that update :slight_smile:

1 Like

Hey Andrea,
I can’t seem to figure out how to validate an email address using your text input element.

How can I check that an email is entered in the correct format? If it is wrong, how can the error (red) state be toggled on? Thanks in advance,

@zelus_pudding,
Hi Andrew,
in “Validation pattern” field of Text field component you can validate every pattern you want, email as well.

Put in “Validation pattern” a RegExp string that validates emails like below.

(?:[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:.[a-z0-9!#$%&’*+/=?^_{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

Now you can use “is valid” state to create a right workflow, error messages …different colors …

For other RegExp you can find it at https://www.regexlib.com

Let me know If it works. Bye.

New release 2.9.1

Material Design Tabs component improved:

  • Capability to adding icons beside labels
  • Icons can be positioned on top of labels
  • Now you can hide sliding marker
  • Labels can be hided to leave icons alone

Try it at: https://picloud-mdui-landing.bubbleapps.io/tabs

Where do I see all the functionality of the plugin?

New release 2.9.4

Material Design Number Field component improved:

  • Allowed negative numbers
  • Added new component state: “…'s negative”

Am im using it wrong? The font size on a normal Macbook and lets say a 1440x900 screen is HUGE - I love the design but I can’t build a Desktop App with that front size?!

Thd
Dominik