Posts Tagged "textinput"

Comment mettre un background à un 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