Les flèches QSpinbox Placent la ligne extérieure Edit (CSS)
-
29-10-2019 - |
Question
(la source: metrotek.spb.ru)
Comment le faire avec l'aide QT CSS?
J'ai essayé d'utiliser
subcontrol-origin: margin;
position: absolute;
Mais pas de succès.
Merci pour toute aide
Éditer
Merci pour l'aide et le CSS final pour mon problème est:
QSpinBox#spin {
margin-left: 20px; /* make room for the arrows */
margin-right: 20px; /* make room for the arrows */
width: 20px;
border: 2 solid #515151;
background-color: #434343;
}
QSpinBox#spin::up-button {
subcontrol-origin: margin;
subcontrol-position: center left;
width: 19px;
border-width: 1px;
}
QSpinBox#spin::up-arrow {
image: url(:/res/images/up.png);
min-width: 19px;
min-height: 14px;
max-width: 19px;
max-height: 14px;
height: 19px;
width: 14px;
}
QSpinBox#spin::up-button:pressed {
top: 1px;
right: 1px;
}
QSpinBox#spin::down-button {
subcontrol-origin: margin;
subcontrol-position: center right;
width: 19px;
border-width: 1px;
}
QSpinBox#spin::down-arrow {
image: url(:/res/images/down.png);
min-width: 19px;
min-height: 14px;
max-width: 19px;
max-height: 14px;
height: 19px;
width: 14px;
}
QSpinBox#spin::down-button:pressed {
top: 1px;
left: 1px;
}
Et CSS supplémentaire comme un bonus :) Si vous aimez configurer la position pour "Up, Down" flèches en dehors de la modification du côté droit uniquement:
QSpinBox#spin {
margin-right: 40px; /* make room for the arrows */
width: 20px;
border: 2 solid #515151;
background-color: #434343;
}
QSpinBox#spin::up-button {
subcontrol-origin: margin;
subcontrol-position: center right;
position: relative;
left: -20px; /* shift position back*/
width: 19px;
border-width: 1px;
}
QSpinBox#spin::down-button {
subcontrol-origin: margin;
subcontrol-position: center right;
width: 19px;
border-width: 1px;
}
La solution
Avez-vous jeté un coup d'œil au Guide de feuille de style QT? Ils ont un exemple vraiment spécifique de la façon de positionner vos flèches de haut en bas:
QSpinBox {
padding-right: 15px; /* make room for the arrows */
border-image: url(:/images/frame.png) 4;
border-width: 3;
}
QSpinBox::up-button {
subcontrol-origin: border;
subcontrol-position: top right; /* position at the top right corner */
width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
border-image: url(:/images/spinup.png) 1;
border-width: 1px;
}
QSpinBox::down-button {
subcontrol-origin: border;
subcontrol-position: bottom right; /* position at bottom right corner */
width: 16px;
border-image: url(:/images/spindown.png) 1;
border-width: 1px;
border-top-width: 0;
}
Ajustez simplement la position sous-contrôle. Et ajustez également le rembourrage pour la QSPinbox pour lui donner également un rembourrage sur la gauche.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow