Nativescript-widgets

NativeScript-ウィジェット

NativeScriptはユーザーインターフェースコンポーネントの大規模なセットを提供し、「ウィジェット」と呼ばれます。 各ウィジェットは特別なタスクを実行し、一連のメソッドが付属しています。 このセクションでは、NativeScriptウィジェットについて詳しく説明します。

ボタン

ボタンはタップイベントアクションを実行するためのコンポーネントです。 ユーザーがボタンをタップすると、対応するアクションが実行されます。 以下に定義されています-

<Button text="Click here!" tap="onTap"></Button>

以下のように、BlankNgAppにボタンを追加しましょう-

ステップ1

• src \ app \ home \ home.componentl。*を開きます。これは、ホームコンポーネントのUIデザインページです。

ステップ2

*_GirdLayout_* コンポーネント内にボタンを追加します。 完全なコードは次のとおりです-

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<GridLayout>
   <button text="Click Here!"></button>
</GridLayout>

出力

以下はボタンの出力です-

GirdLayout

ステップ3

以下に指定するように、CSSを使用してボタンのスタイルを設定できます-

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<GridLayout>
   <button text="Click Here!" class="-primary"></button>
</GridLayout>

ここでは、-* primary *クラスを使用して主ボタンを表します。

出力

以下は ButtonPrimary の出力です-

ButtonPrimary

ステップ4

NativeScriptは、ボタンにカスタムアイコンを提供するためのフォーマットされたオプションを提供します。 サンプルコードは次のとおりです-

<GridLayout>
   <Button class="-primary">
      <FormattedString>
         <Span text="&#xf099;" class="fa"></Span>
         <Span text=" Button.-primary with icon"></Span>
      </FormattedString>
   </Button>
</GridLayout>
.fa {
   font-family: "FontAwesome", "fontawesome-webfont";
}

ここに、

＆＃xf099は、フォントFontAwesome内のアイコンの場所を指定します。 最新のFont Awesomeフォントをダウンロードし、fontawesome-webfont.ttfをsrc \ fontsフォルダーに配置します。

出力

以下は ButtonPrimary の出力です-

FontAwesome

ステップ5

丸いボタンは、以下の構文を使用して作成できます-

<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>

出力

以下はButtonPrimaryの出力です-

ホーム

ラベル

_Labelコンポーネント_は、静的テキストを表示するために使用されます。 以下のようにホームページを変更します-

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

ここに、

• 色はテキストの色を表します
• backgroundColorはテキストボックスの背景を表します
• 高さはテキストボックスの高さを表します

出力

以下はテキストフィールドの出力です-

テキストフィールド

TextView

_TextView Component_は、ユーザーから複数行のテキストコンテンツを取得するために使用されます。 下記のようにホームページを変更しましょう-

<GridLayout>
   <TextView loaded="onTextViewLoaded" hint="Enter text" returnKeyType="done" autocorrect="false" maxLength="100">
   </TextView>
</GridLayout>

ここで、maxLengthは_TextView_が受け入れる最大長を表します。

出力

以下はTextViewの出力です-

TextView

検索バー

このコンポーネントは、クエリの検索やリクエストの送信に使用されます。 以下に定義されています-

<StackLayout>
   <SearchBar id="bar" hint="click here to search ..."></SearchBar>
<StackLayout>

SearchBar

私たちはスタイルを適用することができます-

<StackLayout>
   <SearchBar id="bar" hint="click here to search ..." color="green" backgroundColor="green"></SearchBar>
</StackLayout>

以下はSearchBarStyleの出力です-

SearchBarstyle

スイッチ

スイッチは、オプションを選択するトグルに基づいています。 デフォルトの状態はfalseです。 以下に定義されています-

<StackLayout>
   <Switch checked="false" loaded="onSwitchLoaded"></Switch>
</StackLayout>

上記のプログラムの出力を以下に示します-

プログラム

スライダー

Sliderは、数値範囲を選択するためのスライドコンポーネントです。 以下に定義されています-

<Slider value="30" minValue="0" maxValue="50" loaded="onSliderLoaded"></Slider>

上記のプログラムの出力は以下のとおりです-

スライダー

進捗

進行状況ウィジェットは、操作の進行状況を示します。 現在の進行状況はバーとして表されます。 以下に定義されています-

<StackLayout verticalAlign="center" height="50">
   <Progress value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Progress>
</StackLayout>

以下はプログレスウィジェットの出力です-

進行状況

ActivityIndi​​cator

ActivityIndi​​catorは、進行中のタスクを示します。 以下に定義されています-

<StackLayout verticalAlign="center" height="50">
   <ActivityIndicator busy="true" color="red" width="50"
   height="50"></ActivityIndicator>
</StackLayout>

以下はActivityIndi​​catorの出力です-

ActivityIndi​​cator

画像

画像ウィジェットは、画像を表示するために使用されます。 「ImageSource」のURLを使用してロードできます。 以下に定義されています-

<StackLayout class="m-15" backgroundColor="lightgray">
   <Image src="~/images/logo.png" stretch="aspectFill"></Image>
</StackLayout>

画像ウィジェットの出力は以下のとおりです-

画像

WebView

WebViewはWebページを表示します。 URLを使用してWebページをロードできます。 以下に定義されています-

<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="http://www.google.com"></WebView>

上記のコードの出力は以下のとおりです-

WebView

日付ピッカー

DatePickerコンポーネントは、日付を選択するために使用されます。 以下に定義されています-

<StackLayout class="m-15" backgroundColor="lightgray">
   <DatePicker year="1980" month="4" day="20" verticalAlignment="center"></DatePicker>
</StackLayout>

DatePickerコンポーネントの出力は以下のとおりです-

DatePicker

TimePicker

TimePickerコンポーネントは、時間を選択するために使用されます。 以下に定義されています-

<StackLayout class="m-15" backgroundColor="lightgray">
<TimePicker hour="9"
   minute="25"
   maxHour="23"
   maxMinute="59"
   minuteInterval="5">
</TimePicker>
</StackLayout>

以下はTimePickerコンポーネントの出力です-

TimePicker