https://github.com/nstudio/nativescript-cardview

:diamonds: :clubs: NativeScript widget for Material Design CardView
https://github.com/nstudio/nativescript-cardview

android cardview ios material-design nativescript nativescript-plugin nstudio

Last synced: about 2 months ago
JSON representation

:diamonds: :clubs: NativeScript widget for Material Design CardView

• Host: GitHub
• URL: https://github.com/nstudio/nativescript-cardview
• Owner: nstudio
• License: mit
• Archived: true
• Created: 2016-01-23T00:03:13.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-18T19:53:35.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T17:13:21.746Z (7 months ago)
• Topics: android, cardview, ios, material-design, nativescript, nativescript-plugin, nstudio
• Language: JavaScript
• Homepage:
• Size: 14 MB
• Stars: 282
• Watchers: 12
• Forks: 51
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
## Source management moved to [nstudio/nativescript-plugins](https://github.com/nstudio/nativescript-plugins/tree/main/packages/nativescript-cardview)





    
NativeScript CardView



A NativeScript plugin to provide an XML widget to implement the Material Design CardView component.




    

        

    

    

        

    



---

## Installation

NativeScript 7+:

```bash

ns plugin add @nstudio/nativescript-cardview

```

NativeScript prior to 7:

```bash

tns plugin add @nstudio/[email protected]

```

---

##### [Material Design Card Spec](https://www.google.com/design/spec/components/cards.html)

##### [CardView Android Documentation](http://developer.android.com/intl/zh-tw/reference/android/support/v7/widget/CardView.html)

## Usage

_iOS note: Setting a background-color will help if you do not see the card on the page._

### NativeScript Plain

IMPORTANT: _Make sure you include `xmlns:Card="@nstudio/nativescript-cardview"` on the Page element_

#### XML

```xml

   

      

           

               

               

               

               

           

       

   

```

#### CSS

```css

.cardStyle {

  background-color: #3489db;

  color: #fff;

}

```

---

### NativeScript Angular

```typescript

import { registerElement } from '@nativescript/angular';

import { CardView } from '@nstudio/nativescript-cardview';

registerElement('CardView', () => CardView);

```

```html

  

    

    

    

    

    

    

  

```

---

### NativeScript Vue

```javascript

import Vue from 'nativescript-vue';

Vue.registerElement(

  'CardView',

  () => require('@nstudio/nativescript-cardview').CardView

);

```

```html

  

    

  

```

---

### Attributes

- **radius** _optional_

An attribute to control the 'border-radius' of the card.

### Platform specific options

#### Android

- **elevation** _optional_

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

There can be some performance impact when using a very high elevation value.

- **ripple** _optional_

Set to 'true' to show a ripple when the card is tapped. Tap event handlers in the card content will prevent the ripple.

#### iOS

- **shadowOffsetWidth** _optional_

An attribute to offset the x position of the shadow behind the card.

- **shadowOffsetHeight** _optional_

An attribute to offset the y position of the shadow behind the card.

- **shadowColor** _optional_

An attribute to set the color of the shadow behind the card.

- **shadowOpacity** _optional_

An attribute to set the opacity of the shadow behind the card.

- **shadowRadius** _optional_

An attribute to set the radius of the shadow (shadow spread) behind the card.

The default values are set to:

```

radius = 2;

shadowOffsetWidth = 0;

shadowOffsetHeight = 2;

shadowColor = new Color('#000').ios

shadowOpacity = 0.4;

shadowRadius = 1;

```

### Sample Screenshots

#### Android

| Sample 1                            | Sample 2                            |

| ----------------------------------- | ----------------------------------- |

| ![Sample1](images/sample_card1.png) | ![Sample2](images/sample_card2.png) |

#### iOS

| Sample 1                                | Sample 2                                |

| --------------------------------------- | --------------------------------------- |

| ![Sample1](images/sample_card1_ios.png) | ![Sample2](images/sample_card3_ios.png) |

## Run Demo

```bash

git clone https://github.com/nstudio/nativescript-cardview.git

npm run demo.ios

// or...

npm run demo.android

```

## [Changelog](./CHANGELOG.md)

## [Contributing](./CONTRIBUTING.md)