@nstudio/nativescript-cardview

NativeScript 的 Material Design CardView 组件

npm install @nstudio/nativescript-cardview

NativeScript 7 之前版本

npm install @nstudio/[email protected]

Material Design Card 规范

CardView Android 文档

使用说明

iPhone 注意：设置背景颜色有助于在页面上看到卡片。

NativeScript 纯净版

重要： 请确保在页面元素中包含 xmlns:Card="@nstudio/nativescript-cardview"

XML

<Page xmlns:Card="@nstudio/nativescript-cardview">
   <StackLayout>
      <Card:CardView class="cardStyle" margin="10" elevation="40" radius="5">
           <grid-layout rows="200, auto, auto" columns="auto, auto, *">
               <image src="~/images/batman.jpg" stretch="aspectFill" colSpan="3" row="0" />
               <label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" />
               <button text="DECLINE" tap="goAway" row="2" col="0" />
               <button text="ACCEPT" row="2" col="1" />
           </grid-layout>
       </Card:CardView>
   </StackLayout>
</Page>

CSS

.cardStyle {
  background-color: #3489db;
  color: #fff;
}

NativeScript Angular

import { registerElement } from '@nativescript/angular';
import { CardView } from '@nstudio/nativescript-cardview';
registerElement('CardView', () => CardView);

<CardView class="cardStyle" margin="10" elevation="40" radius="1">
  <GridLayout rows="10,30,30,250, auto, auto,10" columns="10,40, *, 30,10">
    <image
      src="res://profile"
      stretch="aspectFit"
      verticalAlignment="stretch"
      col="1"
      row="1"
      rowSpan="2"
    ></image>
    <label
      class="createdBy text-left"
      horizontalAlignment="left"
      [text]="item.CreatedBy"
      row="1"
      col="2"
      textWrap="true"
    ></label>
    <label
      class="createdOn text-left"
      horizontalAlignment="left"
      [text]="item.UpdatedDate"
      row="2"
      col="2"
    ></label>
    <image
      [src]="'https://img.youtube.com/vi/'+item.MediaURL+'/mqdefault.jpg'"
      stretch="aspectFit"
      colSpan="3"
      col="1"
      row="3"
    ></image>
    <label
      horizontalAlignment="left"
      [text]="item.Title"
      colSpan="3"
      row="4"
      textWrap="true"
      col="1"
    ></label>
    <label
      horizontalAlignment="left"
      [text]="item.Summary"
      textWrap="true"
      col="1"
      row="5"
      colSpan="3"
    ></label>
  </GridLayout>
</CardView>

NativeScript Vue

import Vue from 'nativescript-vue';
Vue.registerElement(
  'CardView',
  () => require('@nstudio/nativescript-cardview').CardView
);

<card-view margin="10" elevation="40" radius="1">
  <stack-layout>
    <label text="Hello World"></label>
  </stack-layout>
</card-view>

属性

• radius 可选

控制卡片 'border-radius' 的属性。

平台特定选项

Android

• elevation 可选

设置卡片的 elevation。这将增加卡片的 'drop-shadow'。当使用非常高的 elevation 值时，可能会有一些性能影响。

• ripple 可选

设置为 'true' 以在卡片被点击时显示波纹。卡片内容中的点击事件处理程序将防止波纹。

iOS

• shadowOffsetWidth 可选

用于偏移卡片后面阴影的 x 位置的属性。

• shadowOffsetHeight 可选

用于偏移卡片后面阴影的 y 位置的属性。

• shadowColor 可选

用于设置卡片后面阴影的颜色。

• shadowOpacity 可选

用于设置卡片后面阴影的透明度。

• shadowRadius 可选

设置卡片后面阴影（阴影扩散）的半径。

默认值设置为

radius = 2;
shadowOffsetWidth = 0;
shadowOffsetHeight = 2;
shadowColor = new Color('#000').ios
shadowOpacity = 0.4;
shadowRadius = 1;

样例截图

Android

样例 1	样例 2

iOS

样例 1	样例 2

运行演示

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

npm run demo.ios

// or...

npm run demo.android

变更日志

贡献