Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 1 day 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 (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-18T19:53:35.000Z (over 1 year ago)
- Last Synced: 2024-04-13T17:13:21.746Z (6 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 |
| ----------------------------------- | ----------------------------------- |
|  |  |
#### iOS
| Sample 1 | Sample 2 |
| --------------------------------------- | --------------------------------------- |
|  |  |
## 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)