summaryrefslogtreecommitdiffstats
path: root/examples/declarative/tutorials/contacts/Final/ContactField.qml
blob: fe9329a132ab6101b319ad6eb617850fc3887cef (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<Item id="contactField"
    clip="true"
    height="30">
    <properties>
        <Property name="label"/>
        <Property name="icon"/>
        <Property name="value" onValueChanged="fieldText.text=field.value"/>
    </properties>
    <RemoveButton id="removeButton"
        anchors.right="{parent.right}"
        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
        expandedWidth="{contactField.width}"
        onConfirmed="print('Clear field text'); fieldText.text=''"/>
    <FieldText id="fieldText"
        width="{contactField.width-70}"
        anchors.right="{removeButton.left}" anchors.rightMargin="5"
        anchors.verticalCenter="{parent.verticalCenter}"
        label="{contactField.label}"
        text="{contactField.value}"
        onConfirmed="contactField.value=fieldText.text"/>
    <Image
        anchors.right="{fieldText.left}" anchors.rightMargin="5"
        anchors.verticalCenter="{parent.verticalCenter}"
        src="{contactField.icon}"/>
    <states>
        <State name="editingText" when="{fieldText.state == 'editing'}">
            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
        </State>
    </states>
    <transitions>
        <Transition fromState='' toState="*" reversible="true">
            <NumericAnimation properties="width,rightMargin" duration="200"/>
        </Transition>
    </transitions>
</Item>