Angular Sample on README

bradmartin commented 7 years ago

Add sample markup for Angular usage with NativeScript.

ping @NathanWalker - if you have a snippet and want to throw my way I can do it if you don't have time. No worries 😄

Habeeb-mohamed commented 7 years ago

on Main.ts import * as elementRegistryModule from 'nativescript-angular/element-registry'; elementRegistryModule.registerElement("CardView", () => require("nativescript-cardview").CardView);

HTML

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

Css

.cardStyle{
    background-color: white
}

bradmartin commented 7 years ago

Thanks for the snippet. I'll add and publish soon. Really appreciate it 😄

nstudio / nativescript-cardview

Angular Sample on README #41