Posts Tagged "textfield"
Comment mettre un background à un TextField
Bonjour à tous, aujourd’hui je vous fais découvrir une petite astuce, toute simple pour pouvoir mettre un background à un TextField. Ce petit trick ne casse pas des briques mais ça fais un bon petit aide mémoire. Il faut préférer l’utilisation d’un « TextField » plutôt qu’un « TextInput« , grâce à cela vous pourrez utiliser « TextFieldStyle » qui permet de personnalisé le TextField. JavaScript import QtQuick 2.0 import Ubuntu.Components 1.1 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.1 MainView { id: main width: 400 height: 300 Column { spacing: units.gu(2) anchors.centerIn: parent TextInput { text: "TextInput par defaut" cursorVisible: false width: main.width - units.gu(25) } TextField { placeholderText: "TextField par defaut" width: main.width - units.gu(25) } TextField { placeholderText: "TextField avec background" width: main.width - units.gu(25) text: "TextField avec background" style: TextFieldStyle { textColor: "black" background: Rectangle { radius: 5 color: "orange" implicitWidth: 100 implicitHeight: 24 border.color: "#333" border.width: 1 } } } } } 12345678910111213141516171819202122232425262728293031323334353637383940 import QtQuick 2.0import Ubuntu.Components 1.1import QtQuick.Controls 1.1import QtQuick.Controls.Styles 1.1 MainView { id: main width: 400 height: 300 Column { spacing: units.gu(2) anchors.centerIn: parent TextInput { text: "TextInput par defaut" cursorVisible: false width: main.width - units.gu(25) } TextField { placeholderText: "TextField par defaut" width: main.width - units.gu(25) } TextField { placeholderText: "TextField avec background" width: main.width - units.gu(25) text: "TextField avec background" style: TextFieldStyle { textColor: "black" background: Rectangle { radius: 5 color: "orange" implicitWidth: 100 implicitHeight: 24 border.color: "#333" border.width: 1 } } } }} Et voici le rendu : ...
Read More