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

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

background 델리게이트는 일반적으로 컨트롤 뒤쪽에 위치한 주요 시각적 사각형입니다. 이 델리게이트를 사용하여 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 의 경우, 표시기는 홈이며, ‘foreground’는 채우기입니다.

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 는 컨트롤이 새로운 상태(예: hovered 또는 pressed)로 전환될 때 스타일 속성을 애니메이션 처리하는 데 사용됩니다. 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
        }
    }
}