nativescript-cardview

授权协议 MIT License
开发语言 Java
所属分类 手机/移动开发、 Android UI 组件
软件类型 开源软件
地区 不详
投 递 者 冯永长
操作系统 Android
开源组织
适用人群 未知
 软件概览

NativeScript CardView

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


Installation

NativeScript 7+:

ns plugin add @nstudio/nativescript-cardview

NativeScript prior to 7:

tns plugin add @nstudio/nativescript-cardview@1.0.0

Material Design Card Spec
CardView Android Documentation

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

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

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

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

npm run demo.ios

// or...

npm run demo.android

Changelog

Contributing

 相关资料
  • NativeScript 可以使用 Javascript,CSS, XML 创建真正的 Native 跨平台应用,支持 iOS Android,NativeScript 将您的跨平台代码翻译成目标平台的代码。 UI 使用 XML 描述,CSS 样式,在编译时将 UI 转化成本地原生代码,最终得到正在的 Native 原生应用。 Telerik 公开了用于创建安卓、iOS和Windows Unive

  • NativeScript Command-Line Interface The NativeScript CLI lets you create, build, and deploy NativeScript-based apps on iOS and Android devices. Get it using: npm install -g nativescript What is Native

  • NativeScript-Snackbar �� �� �� NativeScript plugin for Material Design SnackBar component. Installation: NativeScript 7+:tns plugin add @nstudio/nativescript-snackbar NativeScript version prior to 7:t

  • Nativescript-Ripple This plugin aims to bring a native (or close to native) ripple implementation on Android and iOS. The android version uses a RippleDrawable and conserves the previous background, a

  • NativeScript-FloatingActionButton NativeScript plugin for Material Design Floating Action Button UI component. Installation Nativescript 7+: ns plugin add @nstudio/nativescript-floatingactionbutton Na

  • This project has moved: This project is now being maintained here: https://github.com/nativescript-community/ui-mapboxas it's become clear contrary to what I thought, I don't actually have enough time