NativeScript提供了大量的用户界面组件,被称为"Widget"小部件。每个小部件都执行一项特殊任务,并带有一组方法。
按钮是执行点击事件动作的组件。当用户点击按钮时,它将执行相应的操作。它定义如下-
<Button text="Click here!" tap="onTap"></Button>
让无涯教程在BlankNgApp中添加按钮,如下步骤:
第1步 - 打开 src\app\home\home.component.html。这是home组件的UI设计页面。
第2步 - 在 GirdLayout 组件内添加一个按钮。完整的代码如下-
<ActionBar> <Label text="Home"></Label> </ActionBar> <GridLayout> <button text="Click Here!"></button> </GridLayout>
运行上面代码输出
第3步 - 可以使用CSS设置按钮的样式,如下所示:
<ActionBar> <Label text="Home"></Label> </ActionBar> <GridLayout> <button text="Click Here!" class="-primary"></button> </GridLayout>
这里,-primary 类用于表示主按钮。运行上面代码输出
第4步 - NativeScript提供格式化选项,以在按钮中提供自定义图标。示例代码如下-
<GridLayout> <Button class="-primary"> <FormattedString> <Span text="" class="fa"></Span> <Span text=" 纽扣.-primary with icon"></Span> </FormattedString> </Button> </GridLayout> .fa { font-family: "FontAwesome", "fontawesome-webfont"; }
&#xf099指定字体FontAwesome中图标的位置。下载最新的Font Awesome字体,并将fontawesome-webfont.ttf放在src\fonts文件夹中。
运行上面代码输出
第5步 - 可以使用以下语法创建圆形按钮-
<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>
运行上面代码输出
标签组件用于显示静态文本。如下更改主页-
<GridLayout> <Label text="NativeScript is an open source framework for creating native iOS and Android apps in TypeScript or JavaScript." textWrap="true"> </Label> </GridLayout>
在这里,如果标签超出屏幕宽度,则textWrap会包装标签的内容,运行上面代码输出
TextField组件用于从用户获取信息。让无涯教程按照下面指定的方式更改主页-
<GridLayout> <TextField hint="Username" color="lightblue" backgroundColor="lightyellow" height="75px"> </TextField> </GridLayout>
color - 代表文本颜色
backgroundColor - 代表文本框的背景
height - 代表文本框的高度
运行上面代码输出
TextView Component用于从用户获取多行文本内容。按照下面指定的方式更改主页-
<GridLayout> <TextView loaded="onTextViewLoaded" hint="Enter text" returnKeyType="done" autocorrect="false" maxLength="100"> </TextView> </GridLayout>
在这里,maxLength表示TextView接受的最大长度。
运行上面代码输出
该组件用于搜索任何查询或提交任何请求。它定义如下-
<StackLayout> <SearchBar id="bar" hint="click here to search ..."></SearchBar> <StackLayout>
可以应用样式-
<StackLayout> <SearchBar id="bar" hint="click here to search ..." color="green" backgroundColor="green"></SearchBar> </StackLayout>
Switch基于切换选项之间的选择。默认状态为false。它定义如下-
<StackLayout> <Switch checked="false" loaded="onSwitchLoaded"></Switch> </StackLayout>
上面程序的输出如下所示-
滑块是用于选择数字范围的滑动组件。它定义如下-
<Slider value="30" minValue="0" maxValue="50" loaded="onSliderLoaded"></Slider>
上面程序的输出如下:
进度小部件指示操作的进度。当前进度以条形表示。它定义如下-
<StackLayout verticalAlign="center" height="50"> <Process value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Process> </StackLayout>
ActivityIndicator显示进度中的任务。它定义如下-
<StackLayout verticalAlign="center" height="50"> <ActivityIndicator busy="true" color="red" width="50" height="50"></ActivityIndecator> </StackLayout>
图像小部件用于显示图像。可以使用" ImageSource"加载。它定义如下-
<StackLayout class="m-15" backgroundColor="lightgray"> <Image src="~/images/logo.png" stretch="aspectFill"></Image> </StackLayout>
图像小部件的输出如下所示-
WebView显示网页。可以使用URL加载网页。它定义如下-
链接:https://www.learnfk.comhttps://www.learnfk.com/nativescript/nativescript-widgets.html
来源:LearnFk无涯教程网
<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="http://www.google.com"></WebView>
上面代码的输出如下所示-
DatePicker组件用于选择日期。它定义如下-
<StackLayout class="m-15" backgroundColor="lightgray"> <DatePicker year="1980" month="4" day="20" verticalAlignment="center"></DatePicker> </StackLayout>
TimePicker组件用于选择时间。它定义如下-
<StackLayout class="m-15" backgroundColor="lightgray"> <TimePicker hour="9" minute="25" maxHour="23" maxMinute="59" minuteInterval="5"> </TimePicker> </StackLayout>
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)