• Home
• Felgo
• AppTextEdit

AppTextEdit

A multi-line TextEdit with a given placeholder text. More...

• List of all members, including inherited members

Properties

• cursorColor : color
• cursorInView : bool
• cursorInViewBottomPadding : real
• cursorInViewTopPadding : real
• flickable : Flickable
• fontSize : int
• placeholderColor : color
• placeholderText : string
• placeholderTextItem : alias

Detailed Description

AppTextEdit is an extension of the basic QML TextEdit for getting multi-line text input from the user. For single-line text input, use AppTextInput.

It adds the ability to display a placeholder text, which is visible as long as the text field is empty. The placeholder text's color and text can be configured using placeholderText and placeholderColor properties.

How do I set a placeholder for the text field?

Input controls like AppTextInput, AppTextField or AppTextEdit own a placeholderText property, which you can use for your placeholder text.

 import Felgo
 import QtQuick

 App {
   AppPage {

     // remove focus from textedit if background is clicked
     MouseArea {
       anchors.fill: parent
       onClicked: textEdit.focus = false
     }

     // background for input
     Rectangle {
       anchors.fill: textEdit
       anchors.margins: -dp(8)
       color: "lightgrey"
     }

     // input
     AppTextEdit {
       id: textEdit
       width: dp(200)
       placeholderText: "What's your name?"
       anchors.centerIn: parent
     }
   }
 }

Use AppTextEdit within a Flickable to create a scrollable fixed-height text field

This example shows how you could wrap an AppTextEdit with an AppFlickable, to create a scrollable multi-line text field. With the cursorInView property, you can also assure that the texf field will automatically scroll as soon as the cursor would leave the view while typing.

 import Felgo
 import QtQuick

 App {
   id: app

   NavigationStack {

     AppPage {
       title: "AppTextEdit"
       backgroundColor: Theme.secondaryBackgroundColor


       // Container for the text field
       Item {
         width: parent.width
         height: dp(150)

         // Background and bottom divider for the scrollable text field
         Rectangle {
           anchors.fill: parent
           color: "#fff"

           Rectangle {
             width: parent.width
             height: px(1)
             anchors.bottom: parent.bottom
             color: Theme.listItem.dividerColor
           }
         }

         // Flickable for scrolling, with text field inside
         AppFlickable {
           id: flick
           anchors.fill: parent
           contentWidth: width
           contentHeight: appTextEdit.height

           AppTextEdit {
             id: appTextEdit
             width: parent.width
             height: Math.max(appTextEdit.contentHeight, flick.height)
             verticalAlignment: TextEdit.AlignTop
             // This enables the text field to automatically scroll if cursor moves outside while typing
             cursorInView: true
             cursorInViewBottomPadding: dp(25)
             cursorInViewTopPadding: dp(25)
             flickable: flick

             text: "test1\ntest2\ntest3\ntest4\ntest5\ntest6\ntest7\ntest8\ntest9\ntest10"
           }
         }

         AppScrollIndicator {
           flickable: flick
         }
       }
     }
   }
 }

Property Documentation