NativeScript 材料文本视图

为 NativeScript 提供的 Material Design 文本视图组件。

内容

1. 安装
2. 变更日志
3. 常见问题解答
4. 使用方法
   • 纯 NativeScript
   • Angular
   • Vue
5. API

安装

适用于 NativeScript 7.0+

• tns plugin add @nativescript-community/ui-material-textview

适用于 NativeScript 6.x

• tns plugin add nativescript-material-textview

如果使用 tns-core-modules

• tns plugin add [email protected]

确保在添加插件后运行新的构建，以避免任何问题。

变更日志

常见问题解答

使用方法

纯 NativeScript

重要： 请确保在 Page 元素上包含 xmlns:mdt="@nativescript-community/ui-material-textview"。

XML

<Page xmlns:mdt="@nativescript-community/ui-material-textview">
    <StackLayout horizontalAlignment="center">
        <mdt:TextView text="raised textview"/>
        <mdt:TextView variant="flat" text="flat textview"/>
        <mdt:TextView variant="text" text="text textview"/>
        <mdt:TextView elevation="5" rippleColor="red" text="raised custom textview"/>
   </StackLayout>
</Page>

CSS

mdtextview {
    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 { NativeScriptMaterialTextViewModule } from "@nativescript-community/ui-material-textview/angular";

@NgModule({
    imports: [
        NativeScriptMaterialTextViewModule,
        ...
    ],
    ...
})

<MDTextView  helper="example helper" placeholderColor="green" keyboardType="datetime"
        hint="i am an hint" returnKeyType="next" (focus)="onFocus($event)" (blur)="onBlur($event)"
        (textChange)="onTextChange($event)"></MDTextView>

NativeScript + Vue

import TextViewPlugin from '@nativescript-community/ui-material-textview/vue';

Vue.use(TextViewPlugin);

<MDTextView helper="example helper" placeholderColor="green" keyboardType="datetime"
        hint="i am an hint" returnKeyType="next" @focus="onFocus" @blur="onBlur"
        @textChange="onTextChange"/>

您还可以使用 v-model 指令将文本绑定到某些实例数据。

<MDTextView v-model="value" />

API

属性

继承自 NativeScript TextView，因此它已经具有所有相同的属性。

• variant 可选

用于设置文本视图变体的属性。可以是 outline、underline 或 filled。没有值表示 underline 文本视图

• errorColor 可选

用于设置文本视图错误颜色的属性。

• helper 可选

用于设置文本视图辅助文本的属性。

• floating 可选

用于设置文本视图浮动状态的布尔属性。