Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-83903

Floating label in TextEdit (with proposed implementation)

    XMLWordPrintable

Details

    • All

    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

          No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

              qt.team.quick.subscriptions Qt Quick and Widgets Team
              ceperez1996 Carlos Pérez
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Gerrit Reviews

                  There are no open Gerrit changes