Time for action – sizing the button properly
Our current panel definition still doesn't behave well when it comes to sizing the button. If the button content is very small (for example, the icon doesn't exist or the text is very short), the button will not look good. Typically, push buttons enforce a minimum size–if the content is smaller than a specified size, the button will be expanded to the minimum size allowed. Another problem is that the user might want to override the width or height of the item. In such cases, the content of the button should not overflow past the border of the button. Let's fix these two issues by replacing the width
and height
property bindings with the following code:
clip: true implicitWidth: Math.max(buttonContent.implicitWidth+8, 80) implicitHeight: buttonContent.implicitHeight+8
What just happened?
The implicitWidth
and implicitHeight
properties can contain the desired size the item wants to have. It's a direct equivalent...