README
NativeScript Material Text field
Material Design's Text field component for NativeScript.
Contents
Installation
:warning: Warning :warning:
From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-textfield
For NativeScript 6.x
tns plugin add nativescript-material-textfield
tns-core-modules
tns plugin add nativescript-material-textfield@2.5.4
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.