Skip to content

Instantly share code, notes, and snippets.

@cyberbobs
Created September 21, 2014 23:50
Show Gist options
  • Save cyberbobs/30b6555e7c54ec1b6d2e to your computer and use it in GitHub Desktop.
Save cyberbobs/30b6555e7c54ec1b6d2e to your computer and use it in GitHub Desktop.
Material-like floating placeholder text transition mockup in QML. Buggy as hell, bit it gets the point.
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Window 2.2
Window {
title: qsTr("Hello World")
width: 640
height: 480
TextField {
id: user
placeholderText: "User name or email"
anchors.centerIn: parent
style: TextFieldStyle {
background: Rectangle {
height: Math.max(30, Math.round(control.__contentHeight * 1.5))
Text {
id: floatingPlaceholder
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: 4
anchors.leftMargin: 6
transformOrigin: Item.TopLeft
visible: false
color: placeholderTextColor
states: [
State {
name: "shown"
when: control.text.length !== 0
PropertyChanges { target: floatingPlaceholder; scale: 0.6 }
PropertyChanges { target: floatingPlaceholder; anchors.topMargin: 0 }
}
]
transitions: [
Transition {
to: "shown"
SequentialAnimation {
PropertyAction { target: floatingPlaceholder; property: "text"; value: control.placeholderText }
PropertyAction { target: floatingPlaceholder; property: "visible"; value: true }
PropertyAction { target: control; property: "placeholderText"; value: "" }
ParallelAnimation {
NumberAnimation { target: floatingPlaceholder; property: "scale"; duration: 250; easing.type: Easing.InOutQuad }
NumberAnimation { target: floatingPlaceholder; property: "anchors.topMargin"; duration: 250; easing.type: Easing.InOutQuad }
}
}
},
Transition {
from: "shown"
SequentialAnimation {
ParallelAnimation {
NumberAnimation { target: floatingPlaceholder; property: "scale"; duration: 250; easing.type: Easing.InOutQuad }
NumberAnimation { target: floatingPlaceholder; property: "anchors.topMargin"; duration: 250; easing.type: Easing.InOutQuad }
}
PropertyAction { target: control; property: "placeholderText"; value: floatingPlaceholder.text }
PropertyAction { target: floatingPlaceholder; property: "visible"; value: false }
}
}
]
}
}
}
}
}
@khalili-mahdi
Copy link

i made a little changes to this code :

TextField{
    property string hintText : ""
    height: parent.height
    id:field
    Text{
        id:placeholdersection
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        text: hintText
        color:"gray"
    }
    Text{
        text: hintText
        id: floatingPlaceholder
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: 4
        anchors.leftMargin: 6
        transformOrigin: Item.TopRight
        color: placeholderTextColor
        visible: false
        states: [
            State {
                name: "shown"
                when: field.text.length != 0
                PropertyChanges { target: floatingPlaceholder; scale: 0.6 }
                PropertyChanges { target: floatingPlaceholder; anchors.topMargin: -25 }
            }
        ]

        transitions: [
            Transition {
                to: "shown"
                SequentialAnimation {
                    PropertyAction { target: floatingPlaceholder; property: "visible"; value: true }
                    PropertyAction {target:placeholdersection; property:"visible"; value : false }
                    ParallelAnimation {
                        NumberAnimation { target: floatingPlaceholder; property: "scale"; duration: 250; easing.type: Easing.InOutQuad }
                        NumberAnimation { target: floatingPlaceholder; property: "anchors.topMargin"; duration: 250; easing.type: Easing.InOutQuad }
                    }
                }
            },
            Transition {
                from: "shown"
                SequentialAnimation {
                    ParallelAnimation {
                        NumberAnimation { target: floatingPlaceholder; property: "scale"; duration: 250; easing.type: Easing.InOutQuad }
                        NumberAnimation { target: floatingPlaceholder; property: "anchors.topMargin"; duration: 250; easing.type: Easing.InOutQuad }
                    }
                    PropertyAction { target: floatingPlaceholder; property: "visible"; value: false }
                    PropertyAction { target: placeholdersection ; property :"visible"; value : true }
                }
            }
        ]
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment