Skip to content

Commit b7caae9

Browse files
NathanWalkerNathanWalker
committed
feat: make demo standalone components with tailwind
1 parent b8feb22 commit b7caae9

20 files changed

+253
-121
lines changed

‎apps/nativescript-demo-ng/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"devDependencies": {
1010
"@nativescript/android": "~8.8.0",
1111
"@nativescript/ios": "~8.8.0",
12+
"@nativescript/tailwind": "^2.1.0",
1213
"@nativescript/unit-test-runner": "^3.0.1"
1314
}
1415
}

‎apps/nativescript-demo-ng/project.json‎

Lines changed: 11 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -31,39 +31,20 @@
3131
}
3232
}
3333
},
34-
"ios": {
35-
"executor": "@nativescript/nx:build",
36-
"options": {
37-
"platform": "ios"
38-
},
39-
"configurations": {
40-
"build": {
41-
"copyTo": "./dist/build.ipa"
42-
},
43-
"prod": {
44-
"combineWithConfig": "build:prod"
45-
}
46-
}
47-
},
48-
"android": {
49-
"executor": "@nativescript/nx:build",
34+
"debug": {
35+
"executor": "@nativescript/nx:debug",
5036
"options": {
51-
"platform": "android"
37+
"noHmr": true,
38+
"uglify": false,
39+
"release": false,
40+
"forDevice": false,
41+
"prepare": false
5242
},
53-
"configurations": {
54-
"build": {
55-
"copyTo": "./dist/build.apk"
56-
},
57-
"prod": {
58-
"combineWithConfig": "build:prod"
59-
}
60-
}
43+
"dependsOn": ["^build"]
6144
},
6245
"clean": {
63-
"executor": "@nativescript/nx:build",
64-
"options": {
65-
"clean": true
66-
}
46+
"executor": "@nativescript/nx:clean",
47+
"options": {}
6748
},
6849
"lint": {
6950
"executor": "@nx/eslint:lint"
@@ -74,14 +55,7 @@
7455
"options": {
7556
"coverage": false
7657
},
77-
"configurations": {
78-
"android": {
79-
"platform": "android"
80-
},
81-
"ios": {
82-
"platform": "ios"
83-
}
84-
}
58+
"configurations": {}
8559
}
8660
}
8761
}

‎apps/nativescript-demo-ng/src/app.css‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ In many cases you may want to use the NativeScript core theme instead
99
of writing your own CSS rules. For a full list of class names in the theme
1010
refer to http://docs.nativescript.org/ui/theme.
1111
*/
12-
@import '@nativescript/theme/css/core.css';
13-
@import '@nativescript/theme/css/default.css';
12+
/* @import '@nativescript/theme/css/core.css';
13+
@import '@nativescript/theme/css/default.css'; */
14+
@tailwind base;
15+
@tailwind components;
16+
@tailwind utilities;
1417

1518
Button {
1619
border: 0;
@@ -23,11 +26,18 @@ Button {
2326
color: #fff;
2427
}
2528

26-
.h1 {
29+
.h-center {
30+
horizontal-align: center;
31+
}
32+
.h-right {
33+
horizontal-align: right;
34+
}
35+
36+
/* .h1 {
2737
font-weight: bold;
2838
margin: 10 0 0;
2939
}
3040
3141
.c-light-blue {
3242
color: #65ADF1;
33-
}
43+
} */

‎apps/nativescript-demo-ng/src/app/app.module.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ import { ModalComponent } from './modal/modal.component';
2424
],
2525
declarations: [
2626
AppComponent,
27-
ItemsComponent,
28-
ItemDetailComponent,
29-
ModalComponent,
27+
// ItemsComponent,
28+
// ItemDetailComponent,
29+
// ModalComponent,
3030
// HomeComponent
3131
],
3232
providers: [],

‎apps/nativescript-demo-ng/src/app/home/home.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView($event)" (selectedIndexChange)="onIndexChanged($event)">
33
<MDTabStrip class="c-tabs">
44
<MDTabStripItem class="tabstripitem">
5-
<Label [text]="tabItems?.start?.title" class="text-center t-12"></Label>
5+
<Label [text]="tabItems?.start?.title" class="text-center text-sm"></Label>
66
</MDTabStripItem>
77
</MDTabStrip>
88

‎apps/nativescript-demo-ng/src/app/home/home.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { Component, NgZone, OnInit } from '@angular/core';
22
import { ActivatedRoute, Router } from '@angular/router';
3-
import { RouterExtensions } from '@nativescript/angular';
3+
import { RouterExtensions, NativeScriptCommonModule } from '@nativescript/angular';
44
import { Page, TabView } from '@nativescript/core';
55

66
@Component({
77
moduleId: module.id,
88
selector: 'demo-home',
99
templateUrl: './home.component.html',
10-
standalone: false,
10+
imports: [NativeScriptCommonModule],
11+
standalone: true,
1112
})
1213
export class HomeComponent implements OnInit {
1314
tabItems: { [key: string]: { index: number; title?: string; iconSource?: string; textTransform?: string } } = {};

‎apps/nativescript-demo-ng/src/app/item/item-detail.component.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
22
import { ActivatedRoute } from '@angular/router';
33

44
import { Item } from './item';
55
import { ItemService } from './item.service';
6+
import { NativeScriptCommonModule } from '@nativescript/angular';
67

78
@Component({
89
selector: 'ns-details',
910
moduleId: module.id,
1011
templateUrl: './item-detail.component.html',
11-
standalone: false,
12+
imports: [NativeScriptCommonModule],
13+
standalone: true,
14+
schemas: [NO_ERRORS_SCHEMA]
1215
})
1316
export class ItemDetailComponent implements OnInit {
1417
item: Item;

‎apps/nativescript-demo-ng/src/app/item/items.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@
2323
class names available for styling your app at https://docs.nativescript.org/ui/theme.
2424
-->
2525
<GridLayout rows="auto,,*" class="page">
26-
<StackLayout row="0" padding="10">
27-
<Label [text]="message" class="h1 text-center c-light-blue"></Label>
28-
<Label [text]="'NativeScript loves you.'" class="h2 text-center c-light-blue" marginTop="20" marginBottom="5"></Label>
29-
<Image src="https://angular.io/assets/images/logos/angular/angular.png" horizontalAlignment="center" width="120" verticalAlignment="top"></Image>
30-
<Button (tap)="openModal()" text="Open Modal" class="-btn -primary"></Button>
31-
<Button (tap)="fetchTodos()" text="Make Http Call" class="-btn -primary"></Button>
26+
<StackLayout row="0" class="p-4">
27+
<Label [text]="message" class="text-3xl font-bold text-center text-blue-500"></Label>
28+
<Label [text]="'NativeScript loves you.'" class="text-2xl mt-5 text-center text-blue-500"></Label>
29+
<Image src="https://angular.io/assets/images/logos/angular/angular.png" class="align-top h-center mt-4 w-[120]"></Image>
30+
<Button (tap)="openModal()" text="Open Modal" class="rounded-full bg-blue-500 text-white p-2"></Button>
31+
<Button (tap)="fetchTodos()" text="Make Http Call" class="mt-2 rounded-full bg-blue-500 text-white p-2"></Button>
3232
</StackLayout>
3333
<ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">
3434
<ng-template let-item="item">
35-
<StackLayout [nsRouterLink]="['/item2/item', item.id]" padding="10">
35+
<StackLayout [nsRouterLink]="['/item2/item', item.id]" class="p-2">
3636
<Label [text]="item.name" class="list-group-item"></Label>
3737
</StackLayout>
3838
</ng-template>

‎apps/nativescript-demo-ng/src/app/item/items.component.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
import { Component, OnInit, OnDestroy } from '@angular/core';
1+
import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
22
import { HttpClient } from '@angular/common/http';
33

44
import { Item } from './item';
55
import { ItemService } from './item.service';
66
import { ModalComponent } from '../modal/modal.component';
7-
import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
7+
import { ModalDialogService, NativeDialogService, NativeScriptCommonModule } from '@nativescript/angular';
88

99
@Component({
1010
selector: 'ns-items',
1111
moduleId: module.id,
1212
templateUrl: './items.component.html',
13-
standalone: false,
13+
imports: [NativeScriptCommonModule],
14+
standalone: true,
15+
schemas: [NO_ERRORS_SCHEMA]
1416
})
1517
export class ItemsComponent implements OnInit, OnDestroy {
16-
message = 'Hello Angular 18!';
18+
message = 'Hello Angular 19!';
1719
items: Array<Item>;
1820

1921
constructor(

‎apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<Button text="GO BACK!" (tap)="goBack()"></Button>
99
</FlexboxLayout> -->
1010

11-
<GridLayout class="page" rows="auto,*" padding="10">
11+
<GridLayout class="page" rows="auto,*" class="p-2">
1212
<!-- <Label marginTop="20" fontSize="18" textAlignment="center" [text]="item.name"></Label> -->
1313
<GridLayout row="1" rows="auto,auto" columns="">
14-
<Label marginTop="20" fontSize="45" text="Congrats to the Angular Team!" class="c-light-blue" textWrap="true" textAlignment="center" fontWeight="bold"></Label>
15-
<Label row="1" marginTop="20" fontSize="35" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" class="c-light-blue" textWrap="true" textAlignment="center" textWrap="true"></Label>
14+
<Label text="Congrats to the Angular Team!" textWrap="true" class="text-center mt-5 font-bold text-3xl text-blue-500"></Label>
15+
<Label row="1" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" textWrap="true" class="text-blue-500 text-center mt-5 text-3xl"></Label>
1616
</GridLayout>
1717
</GridLayout>

0 commit comments

Comments
 (0)