QTabBar-like list of "x-clickable" buttons?
-
There's a common pattern in web UIs where they show a list of items via "buttons" (more precisely, "labels" in the Qt sense because the widget as a whole is not clickable) with a small, clickable "x" in the top-left corner. Clicking on the "x" removes the label from the list. The label is usually in a flat-button style with a thin border. In Qt, one might add labels to the list by choosing from a QComboBox.
As far as I know, Qt has no native buttons/labels with this kind of functionality. However, it is similar to how QTabBar works with tabsClosable set to true. So maybe a list of such buttons could be implemented via an ordinary QTabBar and changing the styling. However, this is obviously an atypical use of QTabBar and it might take a lot of work to get the style right so it doesn't confuse the user; there's no QStackWidget being controlled by the tab bar.
Is there a 3rd party library that might have such as QLabel subclass implemented already?
-
The common name for the kind of component you describe is a "Tags Input". Just so you can more easily search for it. A quick search finds some previous efforts to build one for Qt Widgets.
If I had to do something like this myself, the initial approach I would have taken is to subclass
QLineEditand override thepaintEventto draw the tag pills in a margin (the margins are customizable). A rectangle with an X and a little bit of text is relatively easy to draw yourself with theQPainterAPI, there is no need to reach for QLabel. Detecting clicks can be done in an override of mouse down events. You can go fancy with making the backspace key work deleting tags when at the beginning of the line edit area, and what not. -
The common name for the kind of component you describe is a "Tags Input". Just so you can more easily search for it. A quick search finds some previous efforts to build one for Qt Widgets.
If I had to do something like this myself, the initial approach I would have taken is to subclass
QLineEditand override thepaintEventto draw the tag pills in a margin (the margins are customizable). A rectangle with an X and a little bit of text is relatively easy to draw yourself with theQPainterAPI, there is no need to reach for QLabel. Detecting clicks can be done in an override of mouse down events. You can go fancy with making the backspace key work deleting tags when at the beginning of the line edit area, and what not. -
@IgKh
I know nothing about this. Ooi why do you want aQLineEdit, which is ostensibly for text input, rather than aQLabel?@JonB A text edit (often with a completer and/or a combo box style drop down menu) is a typical part of such a component, as the UX for adding a tag is to type it and hit return. You can see a live example like https://www.chakra-ui.com/docs/components/tags-input.
-
@JonB A text edit (often with a completer and/or a combo box style drop down menu) is a typical part of such a component, as the UX for adding a tag is to type it and hit return. You can see a live example like https://www.chakra-ui.com/docs/components/tags-input.
@IgKh said in QTabBar-like list of "x-clickable" buttons?:
adding a tag is to type it and hit return
Fair enough. I think different from what I took from the OP's description. At least I understand.
(I get it now. Your "Tags Input" is those adding a bunch of tags to a topic by typing in words on little "cards", and "x" to delete one.)
