- Version: 7.2.66
- GitHub: https://github.com/nativescript-community/ui-material-components/tree/master
- NPM: https://www.npmjs.com/package/%40nativescript-community%2Fui-material-textfield
- Downloads:
- Last Day: 26
- Last Week: 643
- Last Month: 9258
NativeScript Material Text field
Material Design's Text field component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-textfield
For NativeScript 6.x
tns plugin add nativescript-material-textfield
If using tns-core-modules
tns plugin add [email protected]
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textfield"
on the Page element.
XML
<Page xmlns:mdt="@nativescript-community/ui-material-textfield">
<StackLayout horizontalAlignment="center">
<mdt:TextField text="raised textfield"/>
<mdt:TextField variant="flat" text="flat textfield"/>
<mdt:TextField variant="text" text="text textfield"/>
<mdt:TextField elevation="5" rippleColor="red" text="raised custom textfield"/>
</StackLayout>
</Page>
CSS
mdtextfield {
ripple-color: blue;
elevation: 4;
stroke-color: blue; /* the border color when active */
stroke-inactive-color: green; /* the border color when inactive */
floating-color: blue; /* the floating placeholder color when active */
floating-inactive-color: green; /* the floating placeholder color when inactive */
}
NativeScript + Angular
import { NativeScriptMaterialTextFieldModule } from "@nativescript-community/ui-material-textfield/angular";
@NgModule({
imports: [
NativeScriptMaterialTextFieldModule,
...
],
...
})
<MDTextField helper="example helper" placeholderColor="green" keyboardType="datetime"
hint="i am an hint" returnKeyType="next" (focus)="onFocus($event)" (blur)="onBlur($event)"
(textChange)="onTextChange($event)"></MDTextField>
NativeScript + Vue
import TextFieldPlugin from '@nativescript-community/ui-material-textfield/vue';
Vue.use(TextFieldPlugin);
<MDTextField helper="example helper" placeholderColor="green" keyboardType="datetime"
hint="i am an hint" returnKeyType="next" @focus="onFocus" @blur="onBlur"
@textChange="onTextChange"/>
Also, you can bind the text to some instance data using the v-model
directive:
<MDTextField v-model="value" />
API
Attributes
Inherite from NativeScript TextField so it already has all the same attributes.
- variant optional
An attribute to set the variant of the textfield. Can be outline
or underline
or filled
. No value means underline
textfield
- errorColor optional
An attribute to set the error color of the textfield.
- helper optional
An attribute to set the helper text of the textfield.
- floating optional
A boolean attribute to set the floating state of the textfield.