Details
-
Suggestion
-
Resolution: Duplicate
-
Not Evaluated
-
None
-
5.14.2
Description
Most Material implementations have a floating label as placeholder text in editable text controls. The one provided in QQC2 does not.
Without it, having redundant labels is mostly required in order to remember to the user what should be typed, because the tip dissapears after the user start typing, and if it gets interrupted for X reason, it may be unable to remember what it's typing in first instance.
A possible workaround can be using tool-tips, a "help" icon, but etc. But all of that are redundant and consume UI space, which cannot be tolerated in many cases. I have not checked if the Material specification involves a floating label or not; but still, it's a very useful and intuitive feature that can help users to save UI space, and it's implemented almost in every Material style.
In the other hand, using a floating label will increase the control's size, but since this will be target Qt 6, this should not be an issue.
For convenience, I've used a custom TextField on all my projects, now I improve it to match the QQC2 architecture/design. Such implementation is attached here, so you can save some work, I hope. Of course there are details that I don't wanted to go in, like the control's size (you will get a cropped floating label if you set the clip property to true).
The zip contains the TextField's source code as Qt 5.14.2 implements it, with some tiny modifications, indicated with a //! ADDED comment:
- A "float" state that changes the x, scale and color properties of the PlaceholderText.
- A Transition for that state.
- The property transformOrigin of the PlaceholderText is set to Item.TopLeft, to handle the x property appropriately.
- The PlaceholderText is shown even when the control's text is not empty.
Also contains an example that can be executed with qmlscene (pass the --style=material flag).
A screen-shot is also provided.
Hope this help you improve the amazing QQC2!!
Attachments
Issue Links
- duplicates
-
QTBUG-72554 Quick Controls 2 Material: Support for textField with floating label
- Closed
- is duplicated by
-
QTBUG-96971 Add animated label to QQC2 TextField
- Closed