Reputation: 14458
I have a CoolButton
which have a pressed
state:
// CoolButton.qml:
BorderImage {
...
states: State {
name: "pressed"
when: mouseArea.pressed == true
PropertyChanges { target: shade; opacity: 0.5 }
}
}
And the MenuButton
extends CoolButton
:
// MenuButton.qml:
CoolButton {
...
states: State {
name: "pressed"
PropertyChanges { ... }
}
}
However, the pressed
state defined in the MenuButton
seems not work at all. Is it hidden by the pressed
state defined in the CoolButton
? And how can I override it?
Should it be something like this?
// MenuButton.qml:
CoolButton {
...
states: State {
name: "pressed"
extend: "CoolButton.pressed"
PropertyChanges { ... }
}
}
Upvotes: 5
Views: 3340
Reputation: 32393
I am new to QML, but as far as I know you can't extend or override defined components. Instead you can encapsulate them, something like this:
// CoolButton.qml:
BorderImage {
...
states: State {
name: "pressed"
when: mouseArea.pressed == true
PropertyChanges { target: shade; opacity: 0.5 }
}
}
and encapsulation can look like this:
// MenuButton.qml:
CoolButton {
property alias cb: encapsulatedCB
CoolButton {id: encapsulatedCB; }
...
states: State {
name: "pressed"
PropertyChanges { ... }
}
}
Upvotes: 2