NativeScript - Widget

NativeScript fornisce un ampio set di componenti dell'interfaccia utente e sono chiamati "widget". Ogni widget svolge un'attività speciale e viene fornito con una serie di metodi. Comprendiamo i widget NativeScript in dettaglio in questa sezione.

Pulsante

Il pulsante è un componente per eseguire l'azione dell'evento di tocco. Quando un utente tocca il pulsante, esegue le azioni corrispondenti. È definito di seguito:

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

Aggiungiamo il pulsante nella nostra BlankNgApp come di seguito -

Passo 1

Apri il src\app\home\home.component.html. Questa è la pagina di progettazione dell'interfaccia utente del nostro componente home.

Passo 2

Aggiungi un pulsante all'interno del file GirdLayoutcomponente. Il codice completo è il seguente:

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

Produzione

Di seguito è riportato l'output del pulsante:

Passaggio 3

Possiamo modellare il pulsante usando CSS come specificato di seguito -

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

Qui, -primary class viene utilizzata per rappresentare il pulsante principale.

Produzione

Di seguito è riportato l'output di ButtonPrimary -

Passaggio 4

NativeScript fornisce un'opzione formattata per fornire icone personalizzate nel pulsante. Il codice di esempio è il seguente:

<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";
}

Qui,

& # xf099 specifica la posizione dell'icona nel carattere, FontAwesome. Scarica l'ultimo font Font Awesome e posiziona fontawesome-webfont.ttf nella cartella src \ fonts.

Produzione

Di seguito è riportato l'output di ButtonPrimary -

Passaggio 5

Il pulsante arrotondato può essere creato utilizzando la sintassi seguente:

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

Produzione

Di seguito è riportato l'output di ButtonPrimary:

Etichetta

Il componente Etichetta viene utilizzato per visualizzare il testo statico. Cambia la home page come sotto -

<GridLayout> 
   <Label text="NativeScript is an open source framework for creating native iOS and Android apps in TypeScript or JavaScript." textWrap="true">
   </Label> 
</GridLayout>

Qui, textWrap avvolge il contenuto dell'etichetta, se l'etichetta si estende oltre la larghezza dello schermo.

Produzione

Di seguito è riportato l'output di Label -

Campo di testo

Il componente TextField viene utilizzato per ottenere informazioni dall'utente. Cambiamo la nostra home page come specificato di seguito -

<GridLayout> 
   <TextField hint="Username" 
      color="lightblue" 
      backgroundColor="lightyellow" 
      height="75px">
   </TextField> 
</GridLayout>

Qui,

  • il colore rappresenta il colore del testo

  • backgroundColor rappresenta lo sfondo della casella di testo

  • l'altezza rappresenta l'altezza della casella di testo

Produzione

Di seguito è riportato l'output del campo di testo:

TextView

TextView Component viene utilizzato per ottenere contenuto di testo su più righe dall'utente. Cambiamo la nostra home page come specificato di seguito -

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

Qui, maxLength rappresenta la lunghezza massima accettata da TextView .

Produzione

Di seguito è riportato l'output di TextView:

Barra di ricerca

Questo componente viene utilizzato per la ricerca di qualsiasi query o per inviare qualsiasi richiesta. È definito di seguito:

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

Possiamo applicare stili -

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

Di seguito è riportato l'output di SearchBarStyle:

Interruttore

Switch si basa su toggle per scegliere tra le opzioni. Lo stato predefinito è falso. È definito di seguito:

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

L'output per il programma sopra è mostrato di seguito:

Slider

Slider è un componente scorrevole per scegliere un intervallo numerico. È definito di seguito:

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

L'output per il programma di cui sopra è dato di seguito:

Progresso

Il widget di avanzamento indica lo stato di avanzamento di un'operazione. L'avanzamento corrente è rappresentato da una barra. È definito di seguito:

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

Di seguito è riportato l'output del widget di avanzamento:

ActivityIndicator

ActivityIndicator mostra un'attività in corso. È definito di seguito:

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

Di seguito è riportato l'output per ActivityIndicator:

Immagine

Il widget immagine viene utilizzato per visualizzare un'immagine. Può essere caricato utilizzando l'URL "ImageSource". È definito di seguito:

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

L'output per Image Widget è come mostrato di seguito:

WebView

WebView mostra le pagine web. Le pagine Web possono essere caricate utilizzando l'URL. È definito di seguito:

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

L'output per il codice sopra è come mostrato di seguito -

Date picker

Il componente DatePicker viene utilizzato per selezionare la data. È definito di seguito:

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

L'output del componente DatePicker è come mostrato di seguito:

TimePicker

Il componente TimePicker viene utilizzato per scegliere l'ora. È definito di seguito:

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

Di seguito è riportato l'output del componente TimePicker: