Utility reference: MaterialTextBox​
MaterialTextBox utility lets you overcome the quirks between Android and iOS.
By default, MaterialTextBox is added to the projects as a library component.
It can be used normally as a library component. More info can be found at page below:
Sample login page using the MaterialTextBox utility.
Variables mtbLogin and mtbPassword are assigned to page. More info:
Using materialtextbox utility, two textboxes are added with a few lines of code. Example code:
scripts/page1.tsimport Page1Design from 'generated/pages/page1';import componentContextPatch from "@smartface/contx/lib/smartface/componentContextPatch";import PageTitleLayout from "components/PageTitleLayout";import System from "sf-core/device/system";​export default class Page1 extends Page1Design {router: any;constructor() {super();this.onShow = onShow.bind(this, this.onShow.bind(this));this.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.btnNext.onPress = () => {this.router.push("/pages/page2", { message: "Hello World!" });}}initMaterialTextBoxes() {this.mtbLogin.options = {hint: "Username"};this.mtbPassword.options = {hint: "Password"};this.mtbPassword.materialTextBox.isPassword = true;}}​function onShow(superOnShow) {superOnShow();this.headerBar.titleLayout.applyLayout();}​function onLoad(superOnLoad) {superOnLoad();console.info('Onload page1');this.headerBar.leftItemEnabled = false;this.headerBar.titleLayout = new PageTitleLayout();componentContextPatch(this.headerBar.titleLayout, "titleLayout");if (System.OS === "Android") {this.headerBar.title = "";}this.initMaterialTextBoxes();}​