TextFieldRow

A row with a label and an AppTextField. More...

Import Statement:	import Felgo 4.0
Since:	Felgo 3.3.0
Inherits:	Rectangle

List of all members, including inherited members

Properties

clickEnabled : alias
label : alias
labelWidth : real
placeHolder : alias
style : StyleSimpleRow
textFieldItem : alias
textItem : alias
value : alias

Signals

clicked()

Detailed Description

This item is intended to construct basic input forms on pages. It displays a label based on AppText together with a text field based on AppTextField.

For convenience, several properties of the internal items are aliased, however you can always access the internal items with textItem and textFieldItem.

It uses the theming options as SimpleRow.

 import QtQuick
 import Felgo

 App {
   NavigationStack {
     AppPage {
       title: "TextFieldRow"

       Column {
         id: column
         width: parent.width

         TextFieldRow {
           width: parent.width
           label: "Text"
           placeHolder: "Add some text"
         }

         TextFieldRow {
           id: dateRow
           width: parent.width
           label: "Date"
           placeHolder: "Select date"
           clickEnabled: true
           onClicked: {
             NativeUtils.displayDatePicker()
           }

           Connections {
             target: NativeUtils
             onDatePickerFinished: {
               if(accepted) dateRow.value = date
             }
           }
         }
       }
     }
   }
 }

Property Documentation

clickEnabled : alias

Conveniencs alias to the internal AppTextField::clickEnabled property.

This property is used for text fields without manual input. When the user selects this text field, the clicked signal is fired instead of setting focus to the text field. This makes sense e.g. for date input fields, where you can show a date picker when the field is selected.

label : alias

Conveniencs alias to the internal AppText text property. Use this property to set the label.

labelWidth : real

This property is used to set the width of the label. The text field will use the remaining space to fill the row.

By default, it will use 20% of the row width. If the label text is longer than this, it will adept to the width of the label.

placeHolder : alias

Conveniencs alias to the internal AppTextField placeholderText property. Use this property to set the placeholder text of the text field.

style : StyleSimpleRow

The StyleSimpleRow configuration sets the colors and sizes to be used for the TextFieldRow. The default style uses the standard configuration of the Theme::listItem property.

textFieldItem : alias

Alias to the internal AppTextField item.

textItem : alias

Alias to the internal AppText item.

value : alias

Conveniencs alias to the internal AppTextField text property. Use this property to set the text of the text field.

Signal Documentation

clicked()

This signal is fired if the text field uses clickEnabled and is selected.

Note: The corresponding handler is onClicked.

Contents