NativeScript - Widgets

NativeScript proporciona un gran conjunto de componentes de interfaz de usuario y se denominan "widgets". Cada widget realiza una tarea especial y viene con un conjunto de métodos. Comprendamos los widgets de NativeScript en detalle en esta sección.

Botón

El botón es un componente para ejecutar la acción del evento de toque. Cuando un usuario toca el botón, realiza las acciones correspondientes. Se define a continuación:

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

Agreguemos el botón en nuestra BlankNgApp como se muestra a continuación:

Paso 1

Abre el src\app\home\home.component.html. Esta es la página de diseño de la interfaz de usuario de nuestro componente de inicio.

Paso 2

Agregue un botón dentro del GirdLayoutcomponente. El código completo es el siguiente:

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

Salida

A continuación se muestra la salida del botón:

Paso 3

Podemos diseñar el botón usando CSS como se especifica a continuación:

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

Aquí, -primary La clase se usa para representar el botón principal.

Salida

A continuación se muestra la salida de ButtonPrimary -

Etapa 4

NativeScript proporciona una opción formateada para proporcionar iconos personalizados en el botón. El código de muestra es el siguiente:

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

Aquí,

& # xf099 especifica la ubicación del icono en la fuente, FontAwesome. Descargue la fuente Font Awesome más reciente y coloque fontawesome-webfont.ttf en la carpeta src \ fonts.

Salida

A continuación se muestra la salida de ButtonPrimary -

Paso 5

El botón redondeado se puede crear usando la siguiente sintaxis:

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

Salida

A continuación se muestra la salida de ButtonPrimary:

Etiqueta

El componente de etiqueta se utiliza para mostrar texto estático. Cambie la página de inicio de la siguiente manera:

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

Aquí, textWrap envuelve el contenido de la etiqueta, si la etiqueta se extiende más allá del ancho de la pantalla.

Salida

A continuación se muestra la salida de Etiqueta:

Campo de texto

El componente TextField se utiliza para obtener información del usuario. Cambiemos nuestra página de inicio como se especifica a continuación:

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

Aquí,

• el color representa el color del texto

• backgroundColor representa el fondo del cuadro de texto

• altura representa la altura del cuadro de texto

Salida

A continuación se muestra la salida del campo de texto:

Vista de texto

TextView Component se utiliza para obtener contenido de texto de varias líneas del usuario. Cambiemos nuestra página de inicio como se especifica a continuación:

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

Aquí, maxLength representa la longitud máxima aceptada por TextView .

Salida

A continuación se muestra la salida de TextView:

Barra de búsqueda

Este componente se utiliza para buscar consultas o enviar cualquier solicitud. Se define a continuación:

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

Podemos aplicar estilos -

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

A continuación se muestra la salida de SearchBarStyle:

Cambiar

El interruptor se basa en alternar para elegir entre opciones. El estado predeterminado es falso. Se define a continuación:

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

La salida para el programa anterior se muestra a continuación:

Deslizador

Slider es un componente deslizante para elegir un rango numérico. Se define a continuación:

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

La salida para el programa anterior se da a continuación:

Progreso

El widget de progreso indica el progreso de una operación. El progreso actual se representa como una barra. Se define a continuación:

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

A continuación se muestra la salida del widget de progreso:

Indicador de actividad

ActivityIndicator muestra una tarea en progreso. Se define a continuación:

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

A continuación se muestra el resultado de ActivityIndicator:

Imagen

El widget de imagen se utiliza para mostrar una imagen. Se puede cargar usando la URL 'ImageSource'. Se define a continuación:

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

La salida para Image Widget es la que se muestra a continuación:

WebView

WebView muestra páginas web. Las páginas web se pueden cargar mediante URL. Se define a continuación:

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

La salida para el código anterior es como se muestra a continuación:

Selector de fechas

El componente DatePicker se utiliza para elegir la fecha. Se define a continuación:

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

La salida del componente DatePicker es la que se muestra a continuación:

TimePicker

El componente TimePicker se utiliza para elegir la hora. Se define a continuación:

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

A continuación se muestra la salida del componente TimePicker: