NativeScript - Widgets

NativeScript fornece um grande conjunto de componentes de interface do usuário e são chamados de 'widgets'. Cada widget executa uma tarefa especial e vem com um conjunto de métodos. Vamos entender os widgets NativeScript em detalhes nesta seção.

Botão

O botão é um componente para executar a ação do evento de toque. Quando um usuário toca no botão, ele executa as ações correspondentes. É definido abaixo -

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

Vamos adicionar o botão em nosso BlankNgApp como abaixo -

Passo 1

Abra o src\app\home\home.component.html. Esta é a página de design da IU do nosso componente inicial.

Passo 2

Adicione um botão dentro do GirdLayoutcomponente. O código completo é o seguinte -

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

Resultado

Abaixo está a saída do botão -

etapa 3

Podemos definir o estilo do botão usando CSS conforme especificado abaixo -

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

Aqui, -primary classe é usada para representar o botão principal.

Resultado

Abaixo está a saída de ButtonPrimary -

Passo 4

NativeScript fornece opção formatada para fornecer ícones personalizados no botão. O código de amostra é o seguinte -

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

Aqui,

& # xf099 especifica a localização do ícone na fonte, FontAwesome. Baixe a fonte Font Awesome mais recente e coloque o fontawesome-webfont.ttf na pasta src \ fonts.

Resultado

Abaixo está a saída de ButtonPrimary -

Etapa 5

O botão arredondado pode ser criado usando a sintaxe abaixo -

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

Resultado

Abaixo está a saída de ButtonPrimary -

Rótulo

O componente Label é usado para exibir texto estático. Altere a página inicial conforme abaixo -

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

Aqui, textWrap envolve o conteúdo do rótulo, se o rótulo se estender além da largura da tela.

Resultado

Abaixo está o resultado do Label -

Campo de texto

O componente TextField é usado para obter informações do usuário. Vamos mudar nossa página inicial conforme especificado abaixo -

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

Aqui,

cor representa a cor do texto
backgroundColor representa o fundo da caixa de texto
altura representa a altura da caixa de texto

Resultado

Abaixo está a saída do campo de texto -

TextView

O TextView Component é usado para obter conteúdo de texto de várias linhas do usuário. Vamos mudar nossa página inicial conforme especificado abaixo -

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

Aqui, maxLength representa o comprimento máximo aceito por TextView .

Resultado

Abaixo está a saída de TextView -

Barra de pesquisa

Este componente é usado para pesquisar qualquer consulta ou enviar qualquer solicitação. É definido abaixo -

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

Abaixo está a saída de SearchBarStyle -

Interruptor

A troca é baseada na alternância para escolher entre as opções. O estado padrão é falso. É definido abaixo -

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

A saída para o programa acima é mostrada abaixo -

Slider

Slider é um componente deslizante para escolher um intervalo numérico. É definido abaixo -

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

A saída para o programa acima é fornecida abaixo -

Progresso

O widget de progresso indica o andamento de uma operação. O progresso atual é representado como uma barra. É definido abaixo -

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

Abaixo está o resultado do widget Progress -

ActivityIndicator

ActivityIndicator mostra uma tarefa em andamento. É definido abaixo -

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

Abaixo está a saída para ActivityIndicator -

Imagem

O widget de imagem é usado para exibir uma imagem. Ele pode ser carregado usando o url 'ImageSource'. É definido abaixo -

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

A saída para o widget de imagem é mostrada abaixo -

WebView

WebView mostra páginas da web. As páginas da Web podem ser carregadas usando URL. É definido abaixo -

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

A saída para o código acima é mostrada abaixo -

DatePicker

O componente DatePicker é usado para escolher a data. É definido abaixo -

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

A saída do componente DatePicker é mostrada abaixo -

TimePicker

O componente TimePicker é usado para escolher a hora. É definido abaixo -

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

Abaixo está a saída do componente TimePicker -

↰ Previous page Next page ↱