Skip to content

Instantly share code, notes, and snippets.

@alopix
Created April 24, 2014 18:59
Show Gist options
  • Save alopix/11265590 to your computer and use it in GitHub Desktop.
Save alopix/11265590 to your computer and use it in GitHub Desktop.
import bb.cascades 1.2
Container {
property string text: ""
property string hint: ""
property variant hintTextColor: Color.Gray
property variant hintTextFocusColor: Color.create("#47BEE6")
property variant inputMode: TextFieldInputMode.Default
id: floating
layout: DockLayout {
}
Container {
topPadding: 35
TextField {
id: inputField
text: floating.text
horizontalAlignment: HorizontalAlignment.Fill
verticalAlignment: VerticalAlignment.Fill
hintText: floating.hint
inputMode: floating.inputMode
onFocusedChanged: hintLabel.textStyle.color = focused ? floating.hintTextFocusColor : floating.hintTextColor
onTextChanging: hintLabel.visibility = text.length > 0
}
}
Container {
leftPadding: 20
Label {
property bool visibility: inputField.text.length > 0
id: hintLabel
text: floating.hint
textStyle {
fontSize: FontSize.Small
color: floating.hintTextColor
}
animations: [
ParallelAnimation {
id: visibleAnimation
FadeTransition {
duration: 50
fromOpacity: 0
toOpacity: 1
}
TranslateTransition {
duration: 150
fromY: 15
toY: 0
}
onStarted: hintLabel.visible = true
},
ParallelAnimation {
id: invisibleAnimation
TranslateTransition {
duration: 150
fromY: 0
toY: 15
}
FadeTransition {
delay: 100
duration: 50
fromOpacity: 1
toOpacity: 0
}
onEnded: hintLabel.visible = false
}
]
onCreationCompleted: hintLabel.visible = floating.text.length > 0
onVisibilityChanged: {
if (visibility) {
visibleAnimation.play();
} else {
invisibleAnimation.play();
}
}
}
}
}
import bb.cascades 1.2
Page {
Container {
leftPadding: 15
rightPadding: 15
FloatingLabelTextField {
hint: "E-Mail"
}
FloatingLabelTextField {
hint: "Password"
inputMode: TextFieldInputMode.Password
}
Divider {
}
FloatingLabelTextField {
hint: "Firstname"
}
FloatingLabelTextField {
hint: "Lastname"
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment