安装

如果使用 @nativescript

• tns plugin add nativescript-material-cardview

如果使用 tns-core-modules

• tns plugin add [email protected]

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

Android 迁移到 AndroidX

为了让材料组件与 {N} 6 和 AndroidX 正确工作，您需要更新您的 Android 应用主题。在 App_ressources/android/res/values/styles.xml 中，将所有 Theme.AppCompat 替换为 Theme.MaterialComponents

材料设计规范

用法

纯 NativeScript

重要： 确保在 Page 元素中包含 xmlns:mdc="nativescript-material-cardview"

XML

<Page xmlns:mdc="nativescript-material-cardview">
    <StackLayout horizontalAlignment="center">
        <mdc:CardView width="100" height="100"/>
        <mdc:CardView elevation="5" rippleColor="red"  width="100" height="100"/>
   </StackLayout>
</Page>

CSS

mdccardview {
    ripple-color: blue;
    elevation: 4;
}

NativeScript + Angular

import { NativeScriptMaterialCardViewModule } from "nativescript-material-cardview/angular";

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

<MDCardView rippleColor="blue"  width="100" height="100"></MDCardView>

NativeScript + Vue

import Vue from 'nativescript-vue';
import CardViewPlugin from 'nativescript-material-cardview/vue';

Vue.use(CardViewPlugin);

<MDCardView rippleColor="blue"  width="100" height="100"/>

属性

继承自 Nativescript StackLayout

属性

• elevation 可选

设置卡片视图高度的属性。这将增加卡片视图的 'drop-shadow'。

• rippleColor 可选

设置卡片视图涟漪颜色的属性。