diff options
| -rw-r--r-- | doc/src/snippets/code/doc_src_stylesheet.qdoc | 84 | ||||
| -rw-r--r-- | doc/src/widgets-and-layouts/stylesheet.qdoc | 306 |
2 files changed, 195 insertions, 195 deletions
diff --git a/doc/src/snippets/code/doc_src_stylesheet.qdoc b/doc/src/snippets/code/doc_src_stylesheet.qdoc index 08729e8..4046d85 100644 --- a/doc/src/snippets/code/doc_src_stylesheet.qdoc +++ b/doc/src/snippets/code/doc_src_stylesheet.qdoc @@ -165,7 +165,7 @@ LI {} /* a=0 b=0 c=1 -> specificity = 1 */ UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */ UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */ H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */ -UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */ +UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */ #x34y {} /* a=1 b=0 c=0 -> specificity = 100 */ //! [20] @@ -260,7 +260,7 @@ QTextEdit { background: yellow } //! [35] -QLabel { +QLabel { background-image: url(dense6pattern.png); background-repeat: repeat-xy; } @@ -596,9 +596,9 @@ QTextEdit { /* radial gradient from white to green */ QTextEdit { - background: qradialgradient(cx:0, cy:0, radius: 1, + background: qradialgradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green) -} +} //! [85] @@ -871,7 +871,7 @@ QComboBox::down-arrow { QComboBox::down-arrow:on { /* shift the arrow when popup is open */ top: 1px; left: 1px; -} +} //! [109] @@ -1002,8 +1002,8 @@ QGroupBox::indicator:unchecked { //! [116] QHeaderView::section { - background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, - stop:0 #616161, stop: 0.5 #505050, + background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, + stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565); color: white; padding-left: 4px; @@ -1066,17 +1066,17 @@ QListView::item:selected { } QListView::item:selected:!active { - background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ABAFE5, stop: 1 #8588B2); } QListView::item:selected:active { - background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9); } QListView::item:hover { - background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1); } //! [121] @@ -1098,13 +1098,13 @@ QMainWindow::separator:hover { //! [123] QMenu { background-color: #ABABAB; /* sets background of the menu */ - border: 1px solid black; + border: 1px solid black; } QMenu::item { - /* sets background of menu item. set this to something non-transparent + /* sets background of menu item. set this to something non-transparent if you want menu color and menu item color to be different */ - background-color: transparent; + background-color: transparent; } QMenu::item:selected { /* when user selects item using mouse or keyboard */ @@ -1133,16 +1133,16 @@ QMenu::icon:checked { /* appearance of a 'checked' icon */ background: gray; border: 1px inset gray; position: absolute; - top: 1px; - right: 1px; - bottom: 1px; + top: 1px; + right: 1px; + bottom: 1px; left: 1px; } QMenu::separator { height: 2px; background: lightblue; - margin-left: 10px; + margin-left: 10px; margin-right: 5px; } @@ -1246,13 +1246,13 @@ QProgressBar::chunk { QPushButton { border: 2px solid #8f8f91; border-radius: 6px; - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde); min-width: 80px; } QPushButton:pressed { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); } @@ -1268,18 +1268,18 @@ QPushButton:default { //! [130] QPushButton:open { /* when the button has its menu open */ - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); } -QPushButton::menu-indicator { +QPushButton::menu-indicator { image: url(menu_indicator.png); - subcontrol-origin: padding; + subcontrol-origin: padding; subcontrol-position: bottom right; } QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open { - position: relative; + position: relative; top: 2px; left: 2px; /* shift the arrow by 2 px */ } //! [130] @@ -1615,11 +1615,11 @@ QTabWidget::tab-bar { left: 5px; /* move to the right by 5px */ } -/* Style the tab using the tab sub-control. Note that +/* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */ QTabBar::tab { - background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, - stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border: 2px solid #C4C4C3; border-bottom-color: #C2C7CB; /* same as the pane color */ @@ -1630,8 +1630,8 @@ QTabBar::tab { } QTabBar::tab:selected, QTabBar::tab:hover { - background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, - stop: 0 #fafafa, stop: 0.4 #f4f4f4, + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); } @@ -1655,11 +1655,11 @@ QTabWidget::tab-bar { left: 5px; /* move to the right by 5px */ } -/* Style the tab using the tab sub-control. Note that +/* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */ QTabBar::tab { - background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, - stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border: 2px solid #C4C4C3; border-bottom-color: #C2C7CB; /* same as the pane color */ @@ -1670,8 +1670,8 @@ QTabBar::tab { } QTabBar::tab:selected, QTabBar::tab:hover { - background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, - stop: 0 #fafafa, stop: 0.4 #f4f4f4, + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); } @@ -1708,19 +1708,19 @@ QTabBar::tab:only-one { //! [147] QTabWidget::pane { /* The tab widget frame */ border-top: 2px solid #C2C7CB; - position: absolute; - top: -0.5em; + position: absolute; + top: -0.5em; } -QTabWidget::tab-bar { - alignment: center; +QTabWidget::tab-bar { + alignment: center; } -/* Style the tab using the tab sub-control. Note that +/* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */ QTabBar::tab { - background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, - stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border: 2px solid #C4C4C3; border-bottom-color: #C2C7CB; /* same as the pane color */ @@ -1731,8 +1731,8 @@ QTabBar::tab { } QTabBar::tab:selected, QTabBar::tab:hover { - background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, - stop: 0 #fafafa, stop: 0.4 #f4f4f4, + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, + stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); } diff --git a/doc/src/widgets-and-layouts/stylesheet.qdoc b/doc/src/widgets-and-layouts/stylesheet.qdoc index 6a3fcb2..5fd57a5 100644 --- a/doc/src/widgets-and-layouts/stylesheet.qdoc +++ b/doc/src/widgets-and-layouts/stylesheet.qdoc @@ -158,7 +158,7 @@ Qt Style Sheet terminology and syntactic rules are almost identical to those of HTML CSS. If you already know CSS, you can probably skim quickly through this section. - + \tableofcontents \section1 Style Rules @@ -176,8 +176,8 @@ QPushButton and its subclasses (e.g., \c MyPushButton) should use red as their foreground color. - Qt Style Sheet is generally case insensitive (i.e., \c color, - \c Color, \c COLOR, and \c cOloR refer to the same property). + Qt Style Sheet is generally case insensitive (i.e., \c color, + \c Color, \c COLOR, and \c cOloR refer to the same property). The only exceptions are class names, \l{QObject::setObjectName()}{object names}, and Qt property names, which are case sensitive. @@ -233,7 +233,7 @@ for any Qt property specified using Q_PROPERTY(). In addition, the special \c class property is supported, for the name of the class. - + This selector may also be used to test dynamic properties. For more information on customization using dynamic properties, refer to \l{Customizing Using Dynamic Properties}. @@ -287,7 +287,7 @@ Although the double-colon (\c{::}) syntax is reminiscent of CSS3 Pseudo-Elements, Qt Sub-Controls differ conceptually from these and have different cascading semantics. - + Sub-controls are always positioned with respect to another element - a reference element. This reference element could be the widget or another Sub-control. For example, the \l{Qt Style Sheets Reference#drop-down-sub} @@ -304,10 +304,10 @@ property. For example, if we want to place the drop-down in the margin rectangle of the QComboBox instead of the default Padding rectangle, we can specify: - + \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 6 - - The alignment of the drop-down within the Margin rectangle is changed + + The alignment of the drop-down within the Margin rectangle is changed using \l{Qt Style Sheets Reference#subcontrol-position-prop} {subcontrol-position} property. @@ -514,7 +514,7 @@ The QPushButton does not have an explicit color set. Hence, instead of inheriting color of its parent QGroupBox, it has the system color. - If we want to set the color on a QGroupBox and its children, + If we want to set the color on a QGroupBox and its children, we can write: \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 25 @@ -523,26 +523,26 @@ QWidget::setPalette() propagates to child widgets. \section1 Widgets inside C++ namespaces - + The Type Selector can be used to style widgets of a particular type. For example, \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 26 Qt Style Sheet uses QObject::className() of the widget to determine - when to apply the Type Selector. When custom widgets are inside namespaces, + when to apply the Type Selector. When custom widgets are inside namespaces, the QObject::className() returns <namespace>::<classname>. This conflicts - with the syntax for \l{Sub-Controls}. To overcome this problem, + with the syntax for \l{Sub-Controls}. To overcome this problem, when using the Type Selector for widgets inside namespaces, we must replace the "::" with "--". For example, \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 27 \section1 Setting QObject properties - - From 4.3 and above, any designable Q_PROPERTY + + From 4.3 and above, any designable Q_PROPERTY can be set using the qproperty-<property name> syntax. - + For example, \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 28 @@ -615,12 +615,12 @@ properties all default to zero. In that case, all four rectangles (\c margin, \c border, \c padding, and \c content) coincide exactly. - You can specify a background for the widget using the - \l{Qt Style Sheets Reference#background-image-prop}{background-image} - property. By default, the background-image is drawn only for the area - inside the border. This can be changed using the + You can specify a background for the widget using the + \l{Qt Style Sheets Reference#background-image-prop}{background-image} + property. By default, the background-image is drawn only for the area + inside the border. This can be changed using the \l{Qt Style Sheets Reference#background-clip-prop}{background-clip} - property. You can use + property. You can use \l{Qt Style Sheets Reference#background-repeat-prop}{background-repeat} and \l{Qt Style Sheets Reference#background-origin-prop}{background-origin} @@ -632,14 +632,14 @@ \l{Qt Style Sheets Reference#border-image-prop}{border-image}. Since the border-image property provides an alternate background, it is not required to specify a background-image when border-image is specified. In the case, - when both of them are specified, the border-image draws over the + when both of them are specified, the border-image draws over the background-image. In addition, the \l{Qt Style Sheets Reference#image-prop}{image} property may be used to draw an image over the border-image. The image specified does not tile or stretch and when its size does not match the size of the widget, its alignment is specified using the - \l{Qt Style Sheets Reference#image-position-prop}{image-position} + \l{Qt Style Sheets Reference#image-position-prop}{image-position} property. Unlike background-image and border-image, one may specify a SVG in the image property, in which case the image is scaled automatically according to the widget size. @@ -672,7 +672,7 @@ {subcontrol-position} and \l{Qt Style Sheets Reference#subcontrol-origin-prop}{subcontrol-origin} properties. - + Once positioned, sub-controls can be styled using the \l{box model}. \note With complex widgets such as QComboBox and QScrollBar, if one @@ -710,7 +710,7 @@ All derivatives of QAbstractScrollArea, including QTextEdit, and QAbstractItemView (all item view classes), support - scrollable backgrounds using + scrollable backgrounds using \l{Qt Style Sheets Reference#background-attachment-prop} {background-attachment}. Setting the background-attachment to \c{fixed} provides a background-image that does not scroll with the @@ -737,22 +737,22 @@ \row \o QColumnView \target qcolumnview-widget \o The grip can be styled be using the \l{image-prop}{image} property. - The arrow indicators can by styled using the - \l{left-arrow-sub}{::left-arrow} subcontrol and the + The arrow indicators can by styled using the + \l{left-arrow-sub}{::left-arrow} subcontrol and the \l{right-arrow-sub}{::right-arrow} subcontrol. \row \o QComboBox \target qcombobox-widget - \o The frame around the combobox can be styled using the + \o The frame around the combobox can be styled using the \l{box model}. The drop-down button can be styled using the \l{#drop-down-sub}{::drop-down} subcontrol. By default, the drop-down button is placed in the top right corner of the padding - rectangle of the widget. The arrow mark inside the drop-down button - can be styled using the \l{#down-arrow-sub}{::down-arrow} - subcontrol. By default, the arrow is placed in the center of the + rectangle of the widget. The arrow mark inside the drop-down button + can be styled using the \l{#down-arrow-sub}{::down-arrow} + subcontrol. By default, the arrow is placed in the center of the contents rectangle of the drop-down subcontrol. - See \l{Qt Style Sheets Examples#Customizing QComboBox}{Customizing QComboBox} + See \l{Qt Style Sheets Examples#Customizing QComboBox}{Customizing QComboBox} for an example. \row @@ -784,11 +784,11 @@ The dock widget border can be styled using the \l{#border-prop}{border} property. The \l{#title-sub}{::title} subcontrol can be used to customize the title bar. The close and float buttons are positioned with respect - to the \l{title-sub}{::title} subcontrol using the + to the \l{title-sub}{::title} subcontrol using the \l{#close-button-sub}{::close-button} and \l{#float-button-sub}{::float-button} respectively. - When the title bar is vertical, the \l{#vertical-ps}{:vertical} pseudo + When the title bar is vertical, the \l{#vertical-ps}{:vertical} pseudo class is set. In addition, depending on QDockWidget::DockWidgetFeature, the \l{#closable-ps}{:closable}, \l{#floatable-ps}{:floatable} and \l{#movable-ps}{:movable} pseudo states are set. @@ -822,8 +822,8 @@ depending on QGroupBox::textAlignment. In the case of a checkable QGroupBox, the title includes the - check indicator. The indicator is styled using the - the \l{#indicator-sub}{::indicator} subcontrol. The + check indicator. The indicator is styled using the + the \l{#indicator-sub}{::indicator} subcontrol. The \l{#spacing-prop}{spacing} property can be used to control the spacing between the text and indicator. @@ -835,13 +835,13 @@ \o Supports the \l{box model}. The sections of the header view are styled using the \l{#section-sub}{::section} sub control. The \c{section} Sub-control supports the \l{#middle-ps}{:middle}, - \l{#first-ps}{:first}, \l{#last-ps}{:last}, + \l{#first-ps}{:first}, \l{#last-ps}{:last}, \l{#only-one-ps}{:only-one}, \l{#next-selected-ps}{:next-selected}, - \l{#previous-selected-ps}{:previous-selected}, + \l{#previous-selected-ps}{:previous-selected}, \l{#selected-ps}{:selected} pseudo states. - Sort indicator in can be styled using the - \l{#up-arrow-sub}{::up-arrow} and the + Sort indicator in can be styled using the + \l{#up-arrow-sub}{::up-arrow} and the \l{#down-arrow-sub}{::down-arrow} Sub-control. See \l{Qt Style Sheets Examples#Customizing QHeaderView}{Customizing QHeaderView} @@ -850,7 +850,7 @@ \row \o QLabel \target qlabel-widget \o Supports the \l{box model}. Does not support the - \l{#hover-ps}{:hover} pseudo-state. + \l{#hover-ps}{:hover} pseudo-state. Since 4.3, setting a stylesheet on a QLabel automatically sets the QFrame::frameStyle property to QFrame::StyledPanel. @@ -876,9 +876,9 @@ \row \o QListView \target qlistview-widget - \o Supports the \l{box model}. When - \l{QAbstractItemView::alternatingRowColors}{alternating row colors} - is enabled, the alternating colors can be styled using the + \o Supports the \l{box model}. When + \l{QAbstractItemView::alternatingRowColors}{alternating row colors} + is enabled, the alternating colors can be styled using the \l{#alternate-background-color-prop}{alternate-background-color} property. @@ -915,14 +915,14 @@ \row \o QMenu \target qmenu-widget - \o Supports the \l{box model}. + \o Supports the \l{box model}. - Individual items are styled using the \l{#item-sub}{::item} + Individual items are styled using the \l{#item-sub}{::item} subcontrol. In addition to the usually supported pseudo states, - \c{item} subcontrol supports the + \c{item} subcontrol supports the \l{#selected-ps}{:selected}, \l{#default-ps}{:default}, - \l{#exclusive-ps}{:exclusive} and the - \l{#non-exclusive-ps}{non-exclusive} pseudo states. + \l{#exclusive-ps}{:exclusive} and the + \l{#non-exclusive-ps}{non-exclusive} pseudo states. The indicator of checkable menu items is styled using the \l{#indicator-sub}{::indicator} subcontrol. @@ -931,7 +931,7 @@ subcontrol. For items with a sub menu, the arrow marks are styled using the - \l{::right-arrow-sub}{right-arrow} and + \l{::right-arrow-sub}{right-arrow} and \l{::left-arrow-sub}{left-arrow}. The scroller is styled using the \l{#scroller-sub}{::scroller}. @@ -969,7 +969,7 @@ If the progress bar displays text, use the \l{text-align-prop}{text-align} property to position the text. - Indeterminate progress bars have the + Indeterminate progress bars have the \l{#indeterminate-ps}{:indeterminate} pseudo state set. See \l{Qt Style Sheets Examples#Customizing QProgressBar}{Customizing QProgressBar} @@ -983,7 +983,7 @@ For QPushButton with a menu, the menu indicator is styled using the \l{#menu-indicator-sub}{::menu-indicator} subcontrol. Appearance of checkable push buttons can be - customized using the \l{#open-ps}{:open} and + customized using the \l{#open-ps}{:open} and \l{#closed-ps}{:closed} pseudo-states. \warning If you only set a background-color on a QPushButton, the background @@ -1016,7 +1016,7 @@ is considered to be the groove over which the slider moves. The extent of the QScrollBar (i.e the width or the height depending on the orientation) is set using the \l{#width-prop}{width} or \l{#height-prop}{height} property - respectively. To determine the orientation, use the + respectively. To determine the orientation, use the \l{#horizontal-ps}{:horizontal} and the \l{vertical-ps}{:vertical} pseudo states. @@ -1025,24 +1025,24 @@ provides size contraints for the slider depending on the orientation. The \l{add-line-sub}{::add-line} subcontrol can be used to style the - button to add a line. By default, the add-line subcontrol is placed in + button to add a line. By default, the add-line subcontrol is placed in top right corner of the Border rectangle of the widget. Depending on the - orientation the \l{#right-arrow-sub}{::right-arrow} or - \l{#down-arrow-sub}{::down-arrow}. By default, the arrows are placed in - the center of the Contents rectangle of the add-line subcontrol. + orientation the \l{#right-arrow-sub}{::right-arrow} or + \l{#down-arrow-sub}{::down-arrow}. By default, the arrows are placed in + the center of the Contents rectangle of the add-line subcontrol. The \l{sub-line-sub}{::sub-line} subcontrol can be used to style the - button to subtract a line. By default, the sub-line subcontrol is placed in + button to subtract a line. By default, the sub-line subcontrol is placed in bottom right corner of the Border rectangle of the widget. Depending on the - orientation the \l{#left-arrow-sub}{::left-arrow} or - \l{#up-arrow-sub}{::up-arrow}. By default, the arrows are placed in - the center of the Contents rectangle of the sub-line subcontrol. + orientation the \l{#left-arrow-sub}{::left-arrow} or + \l{#up-arrow-sub}{::up-arrow}. By default, the arrows are placed in + the center of the Contents rectangle of the sub-line subcontrol. The \l{sub-page-sub}{::sub-page} subcontrol can be used to style the region of the slider that subtracts a page. The \l{add-page-sub}{::add-page} subcontrol can be used to style the region of the slider that adds a page. - See \l{Qt Style Sheets Examples#Customizing QScrollBar}{Customizing QScrollBar} + See \l{Qt Style Sheets Examples#Customizing QScrollBar}{Customizing QScrollBar} for an example. \row @@ -1056,15 +1056,15 @@ \row \o QSlider \target qslider-widget - \o Supports the \l{box model}. For horizontal slides, the + \o Supports the \l{box model}. For horizontal slides, the \l{min-width-prop}{min-width} and \l{height-prop}{height} - properties must be provided. For vertical sliders, the + properties must be provided. For vertical sliders, the \l{min-height-prop}{min-height} and \l{width-prop}{width} properties must be provided. - The groove of the slider is styled - using the \l{#groove-sub}{::groove}. The groove is - positioned by default in the Contents rectangle of the widget. + The groove of the slider is styled + using the \l{#groove-sub}{::groove}. The groove is + positioned by default in the Contents rectangle of the widget. The thumb of the slider is styled using \l{#handle-sub}{::handle} subcontrol. The subcontrol moves in the Contents rectangle of the groove subcontrol. @@ -1075,21 +1075,21 @@ \row \o QSpinBox \target qspinbox-widget \o The frame of the spin box can be styled using the \l{box - model}. + model}. - The up button and arrow can be styled using the + The up button and arrow can be styled using the \l{#up-button-sub}{::up-button} and \l{#up-arrow-sub}{::up-arrow} subcontrols. By default, - the up-button is placed in the top right corner in the + the up-button is placed in the top right corner in the Padding rectangle of the widget. Without an explicit size, it occupies half the height of its reference rectangle. The up-arrow is placed in the center of the Contents rectangle of the up-button. - The down button and arrow can be styled using the + The down button and arrow can be styled using the \l{#down-button-sub}{::down-button} and \l{#down-arrow-sub}{::down-arrow} subcontrols. By default, - the down-button is placed in the bottom right corner in the + the down-button is placed in the bottom right corner in the Padding rectangle of the widget. Without an explicit size, it occupies half the height of its reference rectangle. The bottom-arrow is placed in the center of the Contents @@ -1100,7 +1100,7 @@ \row \o QSplitter \target qsplitter-widget - \o Supports the \l{box model}. The handle of the splitter + \o Supports the \l{box model}. The handle of the splitter is styled using the \l{#handle-sub}{::handle} subcontrol. See \l{Qt Style Sheets Examples#Customizing QSplitter}{Customizing QSplitter} @@ -1133,16 +1133,16 @@ Overlapping tabs for the selected state are created by using negative margins or using the \c{absolute} position scheme. - The tear indicator of the QTabBar is styled using the + The tear indicator of the QTabBar is styled using the \l{#tear-sub}{::tear} subcontrol. QTabBar used two QToolButtons for its scrollers that can be styled using the \c{QTabBar QToolButton} selector. To specify the width - of the scroll button use the \l{#scroller-sub}{::scroller} + of the scroll button use the \l{#scroller-sub}{::scroller} subcontrol. The alignment of the tabs within the QTabBar is styled - using the \l{#Alignment}{alignment} property. \warning + using the \l{#Alignment}{alignment} property. \warning To change the position of the QTabBar within a QTabWidget, use the \l{#tab-bar-sub}{tab-bar} subcontrol (and set subcontrol-position). @@ -1152,14 +1152,14 @@ \row \o QTabWidget \target qtabwidget-widget - \o The frame of the tab widget is styled using the + \o The frame of the tab widget is styled using the \l{#pane-sub}{::pane} subcontrol. The left and right corners are styled using the \l{#left-corner-sub}{::left-corner} and \l{#right-corner-sub}{::right-corner} respectively. The position of the tab bar is controlled using the \l{#tab-bar-sub}{::tab-bar} subcontrol. - By default, the subcontrols have positions of a QTabWidget in + By default, the subcontrols have positions of a QTabWidget in the QWindowsStyle. To place the QTabBar in the center, set the subcontrol-position of the tab-bar subcontrol. @@ -1173,8 +1173,8 @@ \row \o QTableView \target qtableview-widget \o Supports the \l{box model}. When - \l{QAbstractItemView::alternatingRowColors}{alternating row colors} - is enabled, the alternating colors can be styled using the + \l{QAbstractItemView::alternatingRowColors}{alternating row colors} + is enabled, the alternating colors can be styled using the \l{#alternate-background-color-prop}{alternate-background-color} property. @@ -1187,10 +1187,10 @@ and can be styled using the "QTableView QTableCornerButton::section" selector. - \warning If you only set a background-color on a QTableCornerButton, - the background may not appear unless you set the border property to - some value. This is because, by default, the QTableCornerButton draws a - native border which completely overlaps the background-color. + \warning If you only set a background-color on a QTableCornerButton, + the background may not appear unless you set the border property to + some value. This is because, by default, the QTableCornerButton draws a + native border which completely overlaps the background-color. The color of the grid can be specified using the \l{#gridline-color-prop}{gridline-color} property. @@ -1223,7 +1223,7 @@ \row \o QToolBar \target qtoolbar-widget - \o Supports the \l{box model}. + \o Supports the \l{box model}. The \l{#top-ps}{:top}, \l{#left-ps}{:left}, \l{#right-ps}{:right}, \l{#bottom-ps}{:bottom} pseudo states depending on the area in @@ -1231,23 +1231,23 @@ The \l{#first-ps}{:first}, \l{#last-ps}{:last}, \l{#middle-ps}{:middle}, \l{#only-one-ps}{:only-one} pseudo states indicator the position - of the tool bar within a line group (See + of the tool bar within a line group (See QStyleOptionToolBar::positionWithinLine). - The separator of a QToolBar is styled using the + The separator of a QToolBar is styled using the \l{#separator-sub}{::separator} subcontrol. The handle (to move the toolbar) is styled using the \l{#handle-sub}{::handle} subcontrol. - See \l{Qt Style Sheets Examples#Customizing QToolBar}{Customizing QToolBar} + See \l{Qt Style Sheets Examples#Customizing QToolBar}{Customizing QToolBar} for an example. \row \o QToolButton \target qtoolbutton-widget \o Supports the \l{box model}. - If the QToolButton has a menu, is + If the QToolButton has a menu, is \l{#menu-indicator-sub}{::menu-indicator} subcontrol can be used to style the indicator. By default, the menu-indicator is positioned at the bottom right of the Padding rectangle of the widget. @@ -1275,9 +1275,9 @@ \row \o QToolBox \target qtoolbox-widget - \o Supports the \l{box model}. + \o Supports the \l{box model}. - The individual tabs can by styled using the + The individual tabs can by styled using the \l{#tab-sub}{::tab} subcontrol. The tabs support the \l{#only-one-ps}{:only-one}, \l{#first-ps}{:first}, \l{#last-ps}{:last}, \l{#middle-ps}{:middle}, @@ -1295,9 +1295,9 @@ \row \o QTreeView \target qtreeview-widget - \o Supports the \l{box model}. When - \l{QAbstractItemView::alternatingRowColors}{alternating row colors} - is enabled, the alternating colors can be styled using the + \o Supports the \l{box model}. When + \l{QAbstractItemView::alternatingRowColors}{alternating row colors} + is enabled, the alternating colors can be styled using the \l{#alternate-background-color-prop}{alternate-background-color} property. @@ -1309,11 +1309,11 @@ The selection behavior is controlled by the \l{#show-decoration-selected-prop}{show-decoration-selected} property. - The branches of the tree view can be styled using the + The branches of the tree view can be styled using the \l{#branch-sub}{::branch} subcontrol. The ::branch Sub-control supports the \l{open-ps}{:open}, \l{closed-ps}{:closed}, \l{has-siblings-ps}{:has-sibling} and - \l{has-children-ps}{:has-children} pseudo states. + \l{has-children-ps}{:has-children} pseudo states. Use the \l{#item-sub}{::item} subcontrol for more fine grained control over the items in the QTreeView. @@ -1340,7 +1340,7 @@ The above code is a no-operation if there is no stylesheet set. - \warning Make sure you define the Q_OBJECT macro for your custom + \warning Make sure you define the Q_OBJECT macro for your custom widget. \endtable @@ -1398,7 +1398,7 @@ Often, it is required to set a fill pattern similar to the styles in Qt::BrushStyle. You can use the background-color property for Qt::SolidPattern, Qt::RadialGradientPattern, Qt::LinearGradientPattern - and Qt::ConicalGradientPattern. The other patterns are easily achieved + and Qt::ConicalGradientPattern. The other patterns are easily achieved by creating a background image that contains the pattern. Example: @@ -1491,7 +1491,7 @@ \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 41 - See also \l{Qt Style Sheets Reference#background-prop}{background}, + See also \l{Qt Style Sheets Reference#background-prop}{background}, \l{#background-origin-prop}{background-origin} and \l{The Box Model}. \row @@ -1633,7 +1633,7 @@ border-top-right-radius, \c border-bottom-right-radius, and \c border-bottom-left-radius. - The border-radius clips the element's + The border-radius clips the element's \l{Qt Style Sheets Reference#background-prop}{background}. This property is supported by QAbstractItemView @@ -1799,7 +1799,7 @@ \row \o \bold{\c color} \target color-prop - \o \l{#Brush}{Brush} \BR + \o \l{#Brush}{Brush} \BR \o The color used to render text. This property is supported by all widgets that respect @@ -1877,7 +1877,7 @@ \row \o \c font-size \o \l{#Font Size}{Font Size} - \o The font size. In this version of Qt, only pt and px metrics are + \o The font size. In this version of Qt, only pt and px metrics are supported. Example: @@ -1919,9 +1919,9 @@ If this property is not specified, it defaults to a value that depends on the subcontrol/widget and on the current style. - \warning Unless otherwise specified, this property has no effect + \warning Unless otherwise specified, this property has no effect when set on widgets. If you want a widget with a fixed height, set - the \l{#min-width-prop}{min-height} and + the \l{#min-width-prop}{min-height} and \l{#max-width-prop}{max-height} to the same value. Example: @@ -1935,7 +1935,7 @@ \o \l{#Length}{Length} \o The width and height of the icon in a widget. - The icon size of the following widgets can be set using this + The icon size of the following widgets can be set using this property. \list \i QCheckBox @@ -1951,20 +1951,20 @@ \row \o \bold{\c image}* \target image-prop \o \l{#Url}{Url}+ - \o The image that is drawn in the contents rectangle of a - \l{subcontrol}. + \o The image that is drawn in the contents rectangle of a + \l{subcontrol}. - The image property accepts a list of \l{#Url}{Url}s or + The image property accepts a list of \l{#Url}{Url}s or an \c{svg}. The actual image that is drawn is determined using the same algorithm as QIcon (i.e) the image is never scaled up but always scaled down if necessary. If a \c{svg} is specified, the image is scaled to the size of the contents rectangle. - Setting the image property on sub controls implicitly sets the + Setting the image property on sub controls implicitly sets the width and height of the sub-control (unless the image in a SVG). In Qt 4.3 and later, the alignment of the - image within the rectangle can be specified using + image within the rectangle can be specified using \l{image-position-prop}{image-position}. \warning The QIcon SVG plugin is needed to render SVG images. @@ -2204,10 +2204,10 @@ \o The widget's left padding. \row - \o \bold{\c paint-alternating-row-colors-for-empty-area} + \o \bold{\c paint-alternating-row-colors-for-empty-area} \target paint-alternating-row-colors-for-empty-area-prop \o \c bool - \o Whether the QTreeView paints alternating row colors for the empty + \o Whether the QTreeView paints alternating row colors for the empty area (i.e the area where there are no items) \row @@ -2360,10 +2360,10 @@ \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 77 - This property is currently supported only by QPushButton + This property is currently supported only by QPushButton and QProgressBar. - \row + \row \o \bold{\c text-decoration} \o \c none \BR \c underline \BR @@ -2400,9 +2400,9 @@ If this property is not specified, it defaults to a value that depends on the subcontrol/widget and on the current style. - \warning Unless otherwise specified, this property has no effect + \warning Unless otherwise specified, this property has no effect when set on widgets. If you want a widget with a fixed width, set - the \l{#min-width-prop}{min-width} and + the \l{#min-width-prop}{min-width} and \l{#max-width-prop}{max-width} to the same value. Example: @@ -2735,7 +2735,7 @@ {CSS3 Draft Specification} for details. \row - \o \bold{Box \target Box Colors + \o \bold{Box \target Box Colors Colors} \o \l{#Brush}{Brush}\{1,4\} \o One to four occurrences of \l{#Brush}{Brush}, specifying the top, @@ -2782,10 +2782,10 @@ | \tt{#\e{rrggbb}} \BR | \l{QColor::setNamedColor()}{Color Name} \BR \o Specifies a color as RGB (red, green, blue) or RGBA - (red, green, blue, alpha) or HSV (hue, saturation, value) or HSVA + (red, green, blue, alpha) or HSV (hue, saturation, value) or HSVA (hue, saturation, value, alpha) or a named color. The \c rgb() or \c rgba() syntax can be used with integer values between 0 and 255, or with - percentages. The value of s, v, and a in \c hsv() or \c hsva() must all + percentages. The value of s, v, and a in \c hsv() or \c hsva() must all be in the range 0-255; the value of h must be in the range 0-359. Examples: @@ -2794,7 +2794,7 @@ \note The RGB colors allowed are the same as those allowed with CSS 2.1, as listed - \l{http://www.w3.org/TR/CSS21/syndata.html#color-units}{here}. + \l{http://www.w3.org/TR/CSS21/syndata.html#color-units}{here}. \row \o \bold Font \target Font @@ -2842,10 +2842,10 @@ point. \endlist - Gradients are specified in Object Bounding Mode. Imagine the box + Gradients are specified in Object Bounding Mode. Imagine the box in which the gradient is rendered, to have its top left corner at (0, 0) and its bottom right corner at (1, 1). Gradient parameters are - then specified as percentages from 0 to 1. These values are + then specified as percentages from 0 to 1. These values are extrapolated to actual box coordinates at runtime. It is possible specify values that lie outside the bounding box (-0.6 or 1.8, for instance). @@ -2869,11 +2869,11 @@ \o \bold Length \target Length \o \l{#Number}{Number} (\c px | \c pt | \c em | \c ex)? \o A number followed by a measurement unit. The CSS standard recommends - that user agents must + that user agents must \l{http://www.w3.org/TR/CSS21/syndata.html#illegalvalues}{ignore} - a declaration with an illegal value. In Qt, it is mandatory to - specify measurement units. For compatibility with earlier versions - of Qt, numbers without measurement units are treated as pixels + a declaration with an illegal value. In Qt, it is mandatory to + specify measurement units. For compatibility with earlier versions + of Qt, numbers without measurement units are treated as pixels in most contexts. The supported units are: \list @@ -2928,7 +2928,7 @@ | \c text \BR | \c window \BR | \c window-text \BR - \o These values correspond the \l{QPalette::ColorRole}{Color roles} + \o These values correspond the \l{QPalette::ColorRole}{Color roles} in the widget's QPalette. For example, @@ -2997,7 +2997,7 @@ \row \o \c :checked \target checked-ps - \o The item is checked. For example, the + \o The item is checked. For example, the \l{QAbstractButton::checked}{checked} state of QAbstractButton. \row @@ -3007,12 +3007,12 @@ \row \o \c :closed \target closed-ps - \o The item is in the closed state. For example, an non-expanded + \o The item is in the closed state. For example, an non-expanded item in a QTreeView \row \o \c :default \target default-ps - \o The item is the default. For example, a + \o The item is the default. For example, a \l{QPushButton::default}{default} QPushButton or a default action in a QMenu. @@ -3026,7 +3026,7 @@ \row \o \c :edit-focus \target edit-focus-ps - \o The item has edit focus (See QStyle::State_HasEditFocus). This state + \o The item has edit focus (See QStyle::State_HasEditFocus). This state is available only for Qt Extended applications. \row @@ -3077,7 +3077,7 @@ \row \o \c :indeterminate \target indeterminate-ps - \o The item has indeterminate state. For example, a QCheckBox + \o The item has indeterminate state. For example, a QCheckBox or QRadioButton is \l{Qt::PartiallyChecked}{partially checked}. \row @@ -3126,7 +3126,7 @@ \row \o \c :on \target on-ps \o For items that can be toggled, this applies to widgets - in the "on" state. + in the "on" state. \row \o \c :only-one \target only-one-ps @@ -3135,7 +3135,7 @@ \row \o \c :open \target open-ps - \o The item is in the open state. For example, an expanded + \o The item is in the open state. For example, an expanded item in a QTreeView, or a QComboBox or QPushButton with an open menu. @@ -3163,7 +3163,7 @@ \o The item is positioned at the right. For example, a QTabBar that has its tabs positioned at the right. - \row + \row \o \c :selected \target selected-ps \o The item is selected. For example, the selected tab in a QTabBar or the selected item in a QMenu. @@ -3246,7 +3246,7 @@ \row \o \c ::indicator \target indicator-sub - \o The indicator of a QAbstractItemView, a QCheckBox, a QRadioButton, + \o The indicator of a QAbstractItemView, a QCheckBox, a QRadioButton, a checkable QMenu item or a checkable QGroupBox. \row @@ -3259,7 +3259,7 @@ \row \o \c ::item \target item-sub - \o An item of a QAbstractItemView, a QMenuBar, a QMenu, or + \o An item of a QAbstractItemView, a QMenuBar, a QMenu, or a QStatusBar. \row @@ -3345,7 +3345,7 @@ \row \o \c ::up-arrow \target up-arrow-sub - \o The up arrow of a QHeaderView (sort indicator), QScrollBar + \o The up arrow of a QHeaderView (sort indicator), QScrollBar or a QSpinBox. \row @@ -3534,7 +3534,7 @@ \section2 Customizing QAbstractScrollArea - The background of any QAbstractScrollArea (Item views, QTextEdit + The background of any QAbstractScrollArea (Item views, QTextEdit and QTextBrowser) can be set using the background properties. For example, to set a background-image that scrolls with the scroll bar: \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 106 @@ -3556,13 +3556,13 @@ \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 109 - The pop-up of the QComboBox is a QAbstractItemView and is styled using + The pop-up of the QComboBox is a QAbstractItemView and is styled using the descendant selector: \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 110 \section2 Customizing QDockWidget - The title bar and the buttons of a QDockWidget can be customized as + The title bar and the buttons of a QDockWidget can be customized as follows: \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 111 @@ -3582,7 +3582,7 @@ \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 113 \section2 Customizing QGroupBox - + Let us look at an example that moves the QGroupBox's title to the center. @@ -3631,8 +3631,8 @@ \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 122 \section2 Customizing QMenu - - Individual items of a QMenu are styled using the 'item' subcontrol as + + Individual items of a QMenu are styled using the 'item' subcontrol as follows: \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 123 @@ -3684,8 +3684,8 @@ A QPushButton is styled as follows: \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 129 - For a QPushButton with a menu, use the - \l{Qt Style Sheets Reference#menu-indicator-sub}{::menu-indicator} + For a QPushButton with a menu, use the + \l{Qt Style Sheets Reference#menu-indicator-sub}{::menu-indicator} subcontrol. \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 130 @@ -3729,7 +3729,7 @@ (instead of the edges) like on Mac OS X, you can use the following stylesheet: \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 136 - + The scroll bar using the above stylesheet looks like this: \image stylesheet-scrollbar2.png @@ -3762,8 +3762,8 @@ \section2 Customizing QSplitter - A QSplitter derives from a QFrame and hence can be styled like a QFrame. - The grip or the handle is customized using the + A QSplitter derives from a QFrame and hence can be styled like a QFrame. + The grip or the handle is customized using the \l{Qt Style Sheets Reference#handle-sub}{::handle} subcontrol. \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 142 @@ -3789,7 +3789,7 @@ Often we require the tabs to overlap to look like below: \image tabWidget-stylesheet2.png - For a tab widget that looks like above, we make use of + For a tab widget that looks like above, we make use of \l{http://www.communitymx.com/content/article.cfm?cid=B0029} {negative margins}. The resulting stylesheet looks like this: @@ -3821,7 +3821,7 @@ \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 150 \section2 Customizing QToolBar - + The background and the handle of a QToolBar is customized as below: \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 151 @@ -3836,7 +3836,7 @@ There are three types of QToolButtons. \list \i The QToolButton has no menu. In this case, the QToolButton is styled - exactly like QPushButton. See + exactly like QPushButton. See \l{#Customizing QPushButton}{Customizing QPushButton} for an example. @@ -3872,13 +3872,13 @@ \l{item-sub}{::item} subcontrol. For example, \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 156 - The branches of a QTreeView are styled using the + The branches of a QTreeView are styled using the \l{Qt Style Sheets Reference#branch-sub}{::branch} subcontrol. The following stylesheet color codes the various states when drawing a branch. \snippet doc/src/snippets/code/doc_src_stylesheet.qdoc 157 - + Colorful, though it is, a more useful example can be made using the following images: |