ControlStyleProperties QML Type

컨트롤의 스타일 지정 가능한 속성을 정의합니다. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

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

상세 설명

ControlStyleProperties는 시각적 빌딩 블록인 background, indicator, handle, text 과 레이아웃 프로퍼티인 padding, spacing, transition 과 같은 컨트롤의 스타일 프로퍼티를 정의합니다.

스타일 프로퍼티는 ControlStyle 와 StyleReader 와 같은 상속된 타입을 통해 액세스됩니다.

ControlStyle, StyleReader, ControlStateStyle, 및 DelegateStyle 을참조하십시오 .

속성 문서

background : DelegateStyle

컨트롤의 배경을 스타일링하기 위한 그룹화된 속성입니다.

배경 델리게이트는 일반적으로 컨트롤 뒤에 있는 주요 시각적 사각형입니다. 이를 사용하여 colors, borders, radii, shadows, gradients, images 를 설정합니다.

bottomPadding : real

컨트롤의 bottom padding. 설정하지 않으면 padding 으로 돌아갑니다.

padding, topPadding, leftPadding, rightPadding도 참조하세요 .

handle : HandleStyle

컨트롤의 핸들 스타일을 지정하기 위한 그룹화된 속성입니다.

이 핸들은 Switch, Slider, RangeSlider 와 같은 컨트롤에서 사용됩니다. RangeSlider 의 경우 handle.first 과 handle.second 를 통해 두 개의 핸들을 개별적으로 스타일링할 수 있습니다.

HandleStyle 및 DelegateStyle도 참조하십시오 .

indicator : IndicatorStyle

컨트롤의 표시기 스타일을 지정하기 위한 그룹화된 속성입니다. checkBox 의 경우 표시기는 프레임이고 foreground 은 체크 표시입니다. slider 의 경우 표시기는 홈이고 전경은 채우기입니다.

DelegateStyle 를참조하세요 .

leftPadding : real

컨트롤의 left padding. 설정하지 않으면 padding 으로 돌아갑니다.

padding, rightPadding, topPadding, bottomPadding도 참조하세요 .

padding : real

control's content area and the bounds of the control 사이의 간격은 균일합니다. 이를 설정하면 leftPadding, rightPadding, topPadding, bottomPadding 의 기본값이 됩니다. 각 면은 개별적으로 재정의할 수 있습니다.

leftPadding, rightPadding, topPadding, bottomPadding도 참조하세요 .

rightPadding : real

컨트롤의 right padding. 설정하지 않으면 padding 으로 돌아갑니다.

padding, leftPadding, topPadding, bottomPadding도 참조하세요 .

spacing : real

컨트롤 내부의 시각적 요소 사이의 간격(예: 인디케이터와 레이블 사이)입니다.

text : TextStyle

컨트롤의 텍스트 레이블 스타일을 지정하기 위한 그룹화된 속성입니다.

topPadding : real

컨트롤의 top padding. 설정하지 않으면 padding 으로 돌아갑니다.

padding, bottomPadding, leftPadding, rightPadding도 참조하세요 .

transition : Transition

Transition 는 컨트롤이 마우스를 가리키거나 누르는 등 새로운 상태가 될 때 스타일 속성에 애니메이션을 적용하는 데 사용됩니다. null (기본값)로 설정하면 애니메이션 없이 속성 변경 사항이 즉시 적용됩니다.

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
}

각 델리게이트에 대해 동일한 대상 프로퍼티가 반복되는 것을 방지하기 위해 StyleKit 에서는 편의를 위해 StyleAnimation 을 제공하며, 표준 애니메이션 대신 또는 표준 애니메이션과 함께 사용할 수 있습니다:

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
        }
    }
}

또한 ColorAnimation 에는 property 및 properties 를 설정하지 않은 경우 상태 변경 중에 변경된 모든 색상 속성을 애니메이션으로 표시하는 특수 기능이 있습니다.