CODEWITHSUNDEEP
qtpyside
Azeirah
Azeirah

Reputation: 6338

Creating a toggleable text widget in qt

Instead of using a traditional checkbox, I'd like to display my options using a more human-readable format. To show exactly what I want, I have implemented it in a language I'm very familiar with.

Would it be possible to recreate the following example using Qt? If so, I would like some pointers on how to do it, it's not obvious to me how to do this in a non-hacky fashion.

var $ = document.querySelector.bind(document);

var toggle = $('.toggle');
var first = toggle.firstChild;
var last = toggle.lastChild;
last.style.display = "none";

function hide(el) {
  el.style.display = "none";
}

function show(el) {
  el.style.display = "inherit";
}

var current = false;
toggle.addEventListener("click", function () {
  current = !current;
  if (!current) {
    hide(last);
    show(first);
  } else {
    show(last);
    hide(first);
  }
});
span.toggle {
  border-bottom: 1px dashed;
}

span.toggle:hover {
  cursor: pointer;
}
<p class="example">I will start <span class="toggle"><span>minimized</span><span>maximized</span></span>!</p>

Upvotes: 0

Views: 125

Answers (1)

three_pineapples
three_pineapples

Reputation: 11869

You can achieve this by connecting to the linkActivated signal of a QLabel. A QLabel can contain rich text, like URLs, which when clicked, emit the linkActivated signal. A minimal example is included below.

In this example we create a QLabel with some rich text containing an anchor around the clickable text (I've called the anchor #toggle but it could be anything). When clicked, it triggers the linkclicked method which changes the text based on the anchor. So we swap between two anchors, #toggle and #toggle2, while also changing the text.

from PySide import QtGui, QtCore
import sys

app = QtGui.QApplication(sys.argv)
win = QtGui.QMainWindow()
label = QtGui.QLabel('I will start <a href="#toggle">minimized</a>!')
def linkclicked(url):
    if url == '#toggle':
        label.setText('I will start <a href="#toggle2">maximized</a>!')
    else:        
        label.setText('I will start <a href="#toggle">minimized</a>!')

label.linkActivated.connect(linkclicked)
win.setCentralWidget(label)
win.show()
sys.exit(app.exec_())

This is obviously a minimal example. You could store the current state in a boolean variable and toggle the text based on that (without needing multiple anchor names) or all sort of other things! Hopefully this gives you a basic idea which you can expand upon.

Upvotes: 1

Related Questions