ControlStyleProperties QML Type

Define las propiedades estilizables de un control. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• background : DelegateStyle
• bottomPadding : real
• handle : HandleStyle
• indicator : IndicatorStyle
• leftPadding : real
• padding : real
• rightPadding : real
• spacing : real
• text : TextStyle
• topPadding : real
• transition : Transition

Descripción detallada

ControlStyleProperties define las propiedades estilizables de un control: los bloques visuales background, indicator, handle, y text, así como propiedades de diseño como padding, spacing, y transition.

A las propiedades de estilo se accede a través de tipos heredados como ControlStyle y StyleReader.

Véase también ControlStyle, StyleReader, ControlStateStyle, y DelegateStyle.

Documentación de propiedades

background : DelegateStyle

Propiedad agrupada para estilizar el fondo de un control.

El delegado de fondo es típicamente el rectángulo visual principal detrás del control. Utilícelo para establecer colors, borders, radii, shadows, gradients, y images.

bottomPadding : real

La dirección bottom padding del control. Si no se establece, vuelve a padding.

Véase también padding, topPadding, leftPadding, y rightPadding.

handle : HandleStyle

Propiedad agrupada para estilizar el handle de un control.

El manejador es utilizado por controles como Switch, Slider, y RangeSlider. En el caso de RangeSlider, los dos manejadores pueden estilizarse individualmente a través de handle.first y handle.second.

Véase también HandleStyle y DelegateStyle.

indicator : IndicatorStyle

Propiedad agrupada para dar estilo al indicador de un control. Para un checkBox, el indicador es el marco, y su foreground es la marca de verificación. Para un slider, el indicador es la ranura, y su primer plano es el relleno.

Véase también DelegateStyle.

leftPadding : real

La dirección left padding del control. Si no se establece, vuelve a padding.

Véase también padding, rightPadding, topPadding, y bottomPadding.

padding : real

El espaciado uniforme entre los control's content area and the bounds of the control. Al establecerlo se obtiene un valor predeterminado para leftPadding, rightPadding, topPadding, y bottomPadding. Cada lado puede anularse individualmente.

Véase también leftPadding, rightPadding, topPadding, y bottomPadding.

rightPadding : real

La dirección right padding del control. Si no se establece, vuelve a padding.

Véase también padding, leftPadding, topPadding, y bottomPadding.

spacing : real

El espacio entre elementos visuales dentro del control, por ejemplo entre un indicador y una etiqueta.

text : TextStyle

Propiedad agrupada para dar estilo a la etiqueta de texto de un control.

topPadding : real

La dirección top padding del control. Si no se establece, vuelve a padding.

Véase también padding, bottomPadding, leftPadding, y rightPadding.

transition : Transition

Transition se utiliza para animar las propiedades de estilo cuando el control entra en un nuevo estado, como cuando se pasa el ratón por encima o se pulsa. Si se establece en null (el valor predeterminado), los cambios en las propiedades se aplican inmediatamente sin animación.

button {
    background.color: "mistyrose"
    hovered.background.color: "plum"
    transition: Transition {
        ColorAnimation {
            properties: "background.color, background.shadow.color, handle.color"
            easing.type: Easing.OutQuad
            duration: 500
        }
        NumberAnimation {
            properties: "background.leftRadius, background.rightRadius"
            easing.type: Easing.OutQuad
            duration: 500
        }
    }

    // I only want a fade-out effect (not fade-in). So while the button
    // is hovered, remove the transition, so that it only applies in the
    // normal state. In other words, it's the state being entered that
    // determines the transition, not the state that is left.
    hovered.transition: null
}

Para evitar la repetición de las mismas propiedades de destino para cada delegado, StyleKit proporciona StyleAnimation por conveniencia, que se puede utilizar en lugar de, o en combinación con, las animaciones estándar:

comboBox {
    background.color: "mistyrose"
    hovered.background.color: "plum"
    transition: Transition {
        StyleAnimation {
            animateColors: true
            animateBackgroundRadii: true
            animateIndicatorRadii: true
            animateBackgroundShadow: true
            easing.type: Easing.OutQuad
            duration: 500
        }
    }
}

También tenga en cuenta que ColorAnimation tiene una característica especial que anima todas las propiedades de color que cambiaron durante un cambio de estado si property y properties se dejan sin establecer.