如何创建包含2列卡片的网格[Nativescript和Angular]
在Nativescript和Angular中创建包含2列卡片的网格可以通过以下步骤实现：
- 首先，确保你已经安装了Nativescript和Angular的开发环境。
- 创建一个新的Nativescript项目，并使用Angular模板初始化项目结构。
- 在项目的组件文件中，定义一个包含2列卡片的网格组件。可以使用Flexbox布局或者Grid布局来实现。
- 使用Flexbox布局：
在组件的HTML模板中，使用Flexbox布局来创建一个包含2列卡片的网格。可以使用
flex-direction: row来设置水平方向的布局，然后使用flex-wrap: wrap来实现自动换行。每个卡片可以使用flex-basis来设置宽度，以实现2列布局。 - 使用Grid布局：
在组件的HTML模板中，使用Grid布局来创建一个包含2列卡片的网格。可以使用
grid-template-columns来设置2列的宽度，然后使用grid-gap来设置卡片之间的间距。每个卡片可以使用grid-column来指定所在的列。
- 使用Flexbox布局：
在组件的HTML模板中，使用Flexbox布局来创建一个包含2列卡片的网格。可以使用
- 在组件的CSS样式文件中，可以对卡片进行样式设置，如背景颜色、边框样式、内外边距等。
- 在组件的逻辑文件中，可以定义卡片的数据模型，并在组件的HTML模板中使用
*ngFor指令来循环渲染卡片。- 在数据模型中，可以定义卡片的属性，如标题、描述、图片等。
- 在HTML模板中，使用
*ngFor指令来循环渲染卡片，可以通过绑定数据模型的属性来显示卡片的内容。
- 最后，将该组件添加到其他需要使用的页面中，以展示包含2列卡片的网格。
这样，你就可以在Nativescript和Angular中创建一个包含2列卡片的网格了。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
相关·内容
需要像这样的网格： card1 card2...并且是动态的 这是我的尝试： 组件： export class MenusComponent implements OnInit { constructor[src]="menu.image"></Image> </ng-template>
</
浏览 11提问于2019-01-29得票数 0
让nativescript与angular 2的官方版本一起工作，我经历了一段很糟糕的时间。我是零问题与良好的ole派系网络角度，但本地脚本是一个不同的故事。NativeScript为什么我的hello world可以工作？我什么也没看见。/core";
import { NativeScriptFormsModule } from "nativescript-angular/
浏览 0提问于2016-09-17得票数 0
我目前正在编写一个TypeScript应用程序，其中的按钮是以编程方式创建的，并添加到GridLayout中。(feeding, 0);// shareButton set to row 2
登录函数只是调用一个用户服务，如果应用程序有一个有效的令牌
浏览 0提问于2016-12-06得票数 1
在nativescript ios中，闪屏几秒钟后会出现白屏显示。这只发生在我们的项目中，但样例项目运行良好。我检查了模拟器和iPhone 5、iPhone 6、iPad mini，所有设备上都显示有白屏。我使用的是原生脚本和Angular 4，这里我包含了我的package.json "description": "NativeScript Application",
"
浏览 2提问于2017-09-18得票数 2
我使用的是"@angular/core"："2.4.10“和"@angular/material"："2.0.0-beta.2”。我已经使用npm安装了flex-layout。我想用卡片设计响应式网格。我正在使用md-grid-list和md-card。如何将flex布局与md-card或md-grid-list一起使用。网格和卡应根据窗
浏览 0提问于2017-05-11得票数 1
1回答
使用原生脚本调用安卓.arr文件
、、、、
我们已经创建了aar文件，它基本上是一个本地Android应用程序，用于读取卡片，并将以json格式异步返回卡片详细信息。这工作正常，并将该aar文件导入到nativescript项目中。如何从导入的aar文件中调用方法和回调。
浏览 0提问于2018-04-25得票数 1
日安，Jul 15 13:17:41 Shivas-Air cngMobileApp[18451]: 1 0x4840b0 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>
浏览 0提问于2016-07-15得票数 0
有没有可能将NativeScript与Angular CLI集成在一起，这样你就可以为web和本地移动开发应用程序了？我已经尝试过Nathan Walker的，但无法使用Angular CLI创建新的应用程序。在通过最新版本的Angular CLI创建应用程序并安装最新版本的NativeScript Magic并遵循安装说明后，运行'npm run start.ios‘开
浏览 1提问于2017-05-22得票数 1
我有几个页面的angular2-nativescript应用程序。结构类似于杂货示例。所有页面都有非常相似的动作栏内容，所以我不想为每个页面添加所有的动作栏和SideDrawer事件处理程序，也不想为每个页面模板添加自定义组件
有没有办法让所有应用程序页面都有一个ActionBar和SideDrawer同样重要的是，能够从所有页面访问该组件，并从页面类调用其方法(因此，我可以告诉该组件它应该隐藏/显示一些内容)。我想在将来使用一些动作栏动画，这样我的ActionBar就不会在每
浏览 0提问于2017-11-11得票数 1
1回答
我是Angular和NativeScript的新手，正在尝试制作一个应用程序。我已经创建了我的第一个页面，但我不太清楚如何路由。我尝试路由到的页面是我的signInComponent。angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/
浏览 0提问于2018-07-04得票数 0
我的问题是，我需要将单独的pro ui模块导入到像延迟加载模块这样的组件中。但是，本机脚本-cli生成的组件没有component.module.ts文件。另请注意，pro-ui模块的全局导入不起作用。
浏览 0提问于2017-11-16得票数 0
当我试图在我的设备上运行应用程序预览时，我会得到以下错误：
错误: LoginComponent类型是两个模块声明的一部分: LoginModule和AppModule！请考虑将LoginComponent移动到导入LoginModule和AppModule的更高模块。您还可以创建一个新的NgModule，它导出并包含LoginComponent，然后在LoginModule和AppModule中导入该NgModule。} from
浏览 3提问于2019-08-16得票数 2
回答已采纳
我正在尝试为一个基于angular2的前端应用程序设计一个合适的文件夹和代码结构，它将包含一个用于Android/iOS视图的nativescript部分，以及用于Web浏览器频道的常规DOM内容。从NativeScript样板开始，我得到了一个如下所示的main.ts文件：
import { NgModule, NO_ERRORS_SCHEMA } from "@angular
浏览 0提问于2017-02-17得票数 0
回答已采纳
我使用的是Nativescript + Typescript/Angular2。我有一个页面，这是相当沉重的加载(它包含一个选项卡式视图和地图)，所以我想要显示一个ActivityIndicator时，路由链接的推荐页面被点击，并隐藏它时，页面加载。我猜我可能会利用Page类的load事件(正如前面提到的)来实现它，但是在文档中并不清楚如何在Angular Nativescript
浏览 0提问于2017-07-02得票数 2
概述操作栏和通常的ListView显示数据，但是radlistview不显示数据。但是我从下一个存储库中看到了RadListView可以工作-> 我的开发环境在下面。操作系统: macOS塞拉利昂10.12.6国家预防机制: 3.10.10
nativescript和其他内容可以在package.json看到
浏览 9提问于2018-01-03得票数 1
回答已采纳
在这个GVC中，我生成了一个如下所示的CGRect： [self.boardView addSubview:cv];
}所以我现在有了一个名为boardView的视图，并添加了一个名为cv的subView。我的代码是为iPad编写的，现
浏览 2提问于2015-06-13得票数 2
TNS v2.5.0<ActionBar title="Events"></ActionBar><ActionBar title="Events"></ActionBar> <RadListView [ite
浏览 2提问于2017-02-05得票数 5
我正在尝试将NewRelic集成到我的Nativescript(6.5)应用程序(有角度)，Android部分非常简单，我被困在了ios部分，这是教程的一部分(我做的是pod部分)：创建一个桥接头：在app_name-桥接-Header.h中，添加NewRelicAgent: import "NewRelicAgent/NewRelic.h“
在您的AppDelegate.swift文件中添加此调用作为应用程序的第一行:didFinishLaun
浏览 1提问于2021-01-20得票数 0
回答已采纳
我是NativeScript的新手。我已经创建了一个使用角空白模板的新项目。导航使用页面路由器-出口完成.我想在页面级别上包含一个xmlns属性。就我所能看到和理解的情况而言，整个代码在全局页面属性中呈现。我已经看到，我可以通过在组件中注入page并更改它的属性来修改页面属性，但是如何对xmlns这样做呢？
向你问好，弗拉德
浏览 0提问于2018-07-24得票数 0
回答已采纳
我是NativeScript的新手，Brad Martin ()建议在Slack频道从这里开始询问。所以请不要回答Slack的问题。我正在创建一个小的广播应用程序，在那里你可以添加歌曲到你的最爱，并查看早期播放的歌曲的历史。我没有使用Angular，因为他们在Slack对我说它是不需要的。问题1：当按下F键时，我如何将卡片及其内容移动到收藏夹标签？
问题2:当有两张卡与StackL
浏览 2提问于2016-08-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
