Nerds Publishing Monstrosities

    nativescript-material-cardview
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.2 • Public • Published

    npm npm GitHub forks GitHub stars

    Installation

    If using @nativescript :

    • tns plugin add nativescript-material-cardview

    If using tns-core-modules

    • tns plugin add nativescript-material-cardview@2.5.4

    Be sure to run a new build after adding plugins to avoid any issues.

    Android migration to AndroidX

    For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme. inside App_ressources/android/res/values/styles.xml replace all occurences of Theme.AppCompat with Theme.MaterialComponents


    Material Design Spec

    Usage

    Plain NativeScript

    IMPORTANT: Make sure you include xmlns:mdc="nativescript-material-cardview" on the Page element

    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"/>

    Attributes

    Inherite from Nativescript StackLayout

    Attributes

    • elevation optional

    An attribute to set the elevation of the cardview. This will increase the 'drop-shadow' of the cardview.

    • rippleColor optional

    An attribute to set the ripple color of the cardview.

    Install

    npm i nativescript-material-cardview

    DownloadsWeekly Downloads

    46

    Version

    3.3.2

    License

    Apache-2.0

    Unpacked Size

    64.2 kB

    Total Files

    33

    Last publish

    Collaborators

    • farfromrefuge