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

    5.3.14 • Public • Published

    NativeScript Material Card

    Material Design's Card component for NativeScript.

    npm npm

    Contents

    1. Installation
    2. Changelog
    3. FAQ
    4. Usage
    5. API

    Installation

    ⚠️ 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 N 7.0

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

    For N 6.x

    • 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.

    Changelog

    FAQ

    Usage

    Plain NativeScript

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

    XML

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

    CSS

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

    NativeScript + Angular

    import { NativeScriptMaterialCardViewModule } from "@nativescript-community/ui-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-community/ui-material-cardview/vue';
    
    Vue.use(CardViewPlugin);
    <MDCardView rippleColor="blue"  width="100" height="100"/>

    API

    Attributes

    Inherite from NativeScript StackLayout

    • 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-community/ui-material-cardview

    DownloadsWeekly Downloads

    86

    Version

    5.3.14

    License

    Apache-2.0

    Unpacked Size

    100 kB

    Total Files

    30

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar