ame-miniapp-components

Utilização

Para instalar utilize o comando:

npm install miniapp-components

Após isso os componentes precisam ser importados conforme a sua necessidade, veja o exemplo:

import { Image, Text } from "miniapp-components";

Veja os componentes abaixo

Header

Utilizado sempre no topo da aplicação.

<Header
  title="Loja do Madeira"
  description="Uma loja de exemplo"
  displaySearch={true}
  searchButtonPlaceholder={"Busque o que quiser"}
  onSearchClick={this.handleSearchButton.bind(this)}
  backgroundImage={"http://lorempixel.com/550/300/food/"}
  backgroundColor={"#ff8d00"}
  imageLogo={"http://lorempixel.com/400/400/food/"}
/>

Parâmetros

title Uma string para o título do header

description Uma string para a descrição do header

displaySearch Exibição da barra de pesquisa

searchButtonPlaceholder Uma string para auxiliar o usuário com o campo de pesquisa displaySearch

backgroundImage Uma imagem para o plano de fundo do header

backgroundColor Uma cor para o plano de fundo do header

A seguinte regra de background é utilizada no parâmetro neste componente: 1º backgroundImage, 2º backgroundColor e 3º backgroundImage default.

backgroundImage default é a imagem padrão da biblioteca caso nenhuma imagem ou cor seja definida.

Search

Utilizado sempre para chamar uma ação de busca.

<SearchBar
  placeholder="Pesquisar"
  handleClick={this.handleSearchButton.bind(this)}
  style={{ backgroundColor: "#fad89d" }}
/>

Parâmetros

placeholder Uma string para auxiliar o usuário com o campo de pesquisa

handleClick Ação realizada após clicar na pesquisa

style Estilização do componente SearchBar

Image

Utilizado para a exibição de imagens.

<Image
  source={`http://lorempixel.com/300/300/food/`}
  style={{ borderRadius: 50 }}
/>

Parâmetros

source Link da imagem que será exibida

style Estilização do componente SearchBar

onClick Executa uma função | Tipo: Função

TabNavigator

Utilizado sempre para a navegação. Os itens serão transformados em abas.

<TabNavigator
  styleButton={{ backgroundColor: "#d9defb" }}
  styleContent={{ backgroundColor: "#dce2fb" }}
  items={[
    {
      title: "Food",
      content: <Image source="http://lorempixel.com/500/500/food/1/" />
    },
    {
      title: "Transport",
      content: <Image source="http://lorempixel.com/500/500/transport/1/" />
    },
    {
      title: "Sports",
      content: <Image source="http://lorempixel.com/500/500/sports/1/" />
    }
  ]}
/>

Parâmetros

styleButton Estilização do botão do componente TabNavigator

styleContent Estilização do conteúdo do componente TabNavigator

items Lista de itens de conteúdos.

• title Botão para a navegação | Obrigatório: Sim
• isDisable Recebe um boleano e informa se o conteúdo não será exibido | Obrigatório: Não
• content Conteúdo a ser exibido | Obrigatório: Sim

Mínimo de itens: 2 • Máximo de itens: 3

Sendo passado número de itens inferior a 2 ou superior a 3 o componente não é exibido.

Text

Utilizado sempre para exibir um texto.

<Text>"Lorem ipsum dolor sit amet, consectetur adipiscing."</Text>

Texto a ser exibido deverá ser passado dentro da tag Obrigatório: Sim

Parâmetros

style Estilização do text

Separator

Utilizado para separar conteúdos.

<Separator
  style={{
    height: "2px",
    background: "#ca2405",
    marginTop: "10px",
    marginBottom: "10px"
  }}
/>

Parâmetros

style Estilização do Separator

Heading

Utilizado para exibir títulos (h1, h2, h3, h4, h5 e h6).

<Heading
  size={2}
  fontSize={30}
  fontWeight={"bold"}
  lineHeight={32}
  fontFamily={"serif"}
>
  Título do Heading
</Heading>

Parâmetros

size Tamanho do título. Caso nenhum tamanho (size) seja passado por parâmetro o valor padrão será h1.

fontSize Tamanho do texto. | Tipo: Number

fontWeight Densidade do texto. | Tipo: String

lineHeight Espaçamento de linha. | Tipo: Number

fontFamily Estilo da fonte | Tipo: String

A seguinte regra de arredondamento é utilizada no parâmetro size deste componente:

Menor ou igual a x.4 o componente é arredondado para a casa inteira anterior. Exemplo: 3.2 é arredondado para 3.0

Maior ou igual a x.5 o componente é arredondado para a casa inteira posterior. Exemplo: 4.7 é arredondado para 5.0

View

View padrão.

<View style={{ backgroundColor: "#e7e5e5" }} />

Parâmetros

style Estilização para a view

onClick Executa uma função | Tipo: Função

disable Desativa o componente, inserindo opacidade e removendo as ações | Obrigatório: Não | Tipo: Boolean

Button

Botão que ao clicado executa uma ação.

<Button
  icon={<Image source="http://lorempixel.com/50/50/food/" />} text={"Texto do botão"}  onClick={() ={     console.log("clicou no botão");   }}   style={{ color: "red" }} />

Parâmetros

icon Ícone do botão

disable Informação se o botão é inativo | Obrigatório: Não | Tipo: Boolean

text Texto do botão | Obrigatório: Sim

onClick Executa uma função | Obrigatório: Sim | Tipo: Função

style Estilização do botão

GhostButton

Botão que ao clicado executa uma ação.

<GhostButton
  icon={<Image source="http://lorempixel.com/50/50/food/" />} text={"Texto do botão"}  onClick={() ={     console.log("clicou no botão");   }}   style={{ color: "red" }} />

Parâmetros

icon Ícone do botão

disable Informação se o botão é inativo | Obrigatório: Não | Tipo: Boolean

text Texto do botão | Obrigatório: Sim

onClick Executa uma função | Obrigatório: Sim | Tipo: Função

style Estilização do botão

SoftButton

Botão que ao clicado executa uma ação.

<SoftButton
  icon={<Image source="http://lorempixel.com/50/50/food/" />} text={"Texto do botão"}  onClick={() ={     console.log("clicou no botão");   }}   style={{ color: "red" }} />

Parâmetros

icon Ícone do botão

disable Informação se o botão é inativo | Obrigatório: Não | Tipo: Boolean

text Texto do botão | Obrigatório: Sim

onClick Executa uma função | Obrigatório: Sim | Tipo: Função

style Estilização do botão

TextButton

Botão que ao clicado executa uma ação.

<TextButton
  icon={<Image source="http://lorempixel.com/50/50/food/" />} text={"Texto do botão"}  onClick={() ={     console.log("clicou no botão");   }}   style={{ color: "red" }} />

Parâmetros

icon Ícone do botão

disable Informação se o botão é inativo | Obrigatório: Não | Tipo: Boolean

text Texto do botão | Obrigatório: Sim

onClick Executa uma função | Obrigatório: Sim | Tipo: Função

style Estilização do botão

Image

Imagem a ser exibida.

<Image source={`http://lorempixel.com/300/300/food/`} isDisabled={false} />

Parâmetros

source | Tipo: String Caminho da imagem Obrigatório: Sim

isDisabled | Tipo: Boolean Define se a imagem está ativa

SearchBar

Caixa de pesquisa

<SearchBar
  placeholder="Pesquisar"
  handleClick={this.handleSearchButton.bind(this)}
/>

Parâmetros

placeholder Texto de auxílio ao usuário

handleClick Ação a ser realizada após o termo da pesquisa ser inserido Obrigatório: Sim

ListView

Utilizado para listas de conteúdo.

<ListView items={itemsForListView}>
  {
    (item = (
      <View>
        <Text>{item.text}</Text>
      </View>
    ))
  }
</ListView>

Parâmetros

items Itens da lista de conteúdo Obrigatório: Sim

style Estilização da lista de conteúdo

If

Utilizado para exibir conteúdo, de acordo com a condição.

<If test={"algum tipo de dado"}>
  <Heading size={2}>Título do Heading</Heading>
</If>

Parâmetros

test Tipo de condição a ser testada

Tipos de dados aceitos neste componente: String, Number, Array, Object e Boolean.

Toggle

Utilizado para exibir um input de alternância.

<Toggle items={tShirtList}
        value={tShirtList[0]}
        onChange={(e) ={ console.log("Elemento escolhido", e); }}
/>

Parâmetros

items Lista de elementos

value Texto a ser exibido

onChange Função executada quando o cliente escolhe uma das opções

ProductCard

Utilizado para a exposição de produtos.

<ProductCard
  productName={'Smart TV LED 49" Philco PTV49e68dSWN Full HD...'}
  price={1499.32}
  conditionPayment={"10x sem juros"}
  imageProduct={"http://lorempixel.com/400/400/food/"}
  onProuctCardClick={() => console.log("ProductCard test click")}
  cardOrientation={"horizontal"}
  isDisabled={false}
/>

Parâmetros

productName Identifica e/ou descreve o produto | Tipo: String

price Exibe o preço do produto | Tipo: Number

conditionPayment Condição de pagamento | Tipo: String

imageProduct Endereço onde uma imagem está armazenada | Tipo: String

onProuctCardClick Recebe uma função para ser executada, em um evento de click sobre o ProductCard | Tipo: Function

cardOrientation Define a orientação do ProductCard | Tipo: String

• vertical Exibe o ProductCard na vertical
• horizontal Exibe o ProductCard na horizontal

isDisabled | Tipo: Boolean Define se o ProductCard está ativo

Card

Utilizado para emoldurar algum elemento.

<Card
  bordered
  weight={2}
  isDisabled={false}
  onClick={() => {
    console.log("teste click Card");
  }}
>
  <SomeElement>
    Segue abaixo a lista de componentes e como utilizálos.
  </SomeElement>
</Card>

Parâmetros

weight | Tipo: Number Densidade da borda

onClick | Tipo: Function Recebe uma função que será executada, mediante o evento de click do Card

isDisabled | Tipo: Boolean Define se o Card está ativo