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, possui a implementação como abaixo:

Prioridade de background: backgroundImage, backgroundColor e backgroundImage default.

<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.
Obrigatório: Não

description: Uma string para a descrição do header.
Obrigatório: Não

displaySearch: Exibição da barra de pesquisa.
Obrigatório: Não

searchButtonPlaceholder: Uma string para auxiliar o usuário com o campo de pesquisa displaySearch.
Obrigatório: Não

backgroundImage: Uma imagem para o plano de fundo do header
Obrigatório: Não

backgroundColor: Uma cor para o plano de fundo do header
Obrigatório: Não

backgroundImage: Uma imagem para o plano de fundo do header
Obrigatório: Não

imageLogo: Uma logo para o header
Obrigatório: Não

Search

Utilizado sempre para chamar uma ação de busca

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

Image

Utilizado para a exibição de imagens.

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

TabNavigator

Utilizado sempre para a navegação, você deve passar entre 2 e 3 itens e eles serão transformados em uma navegação 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/" />
    }
  ]}
/>

ProductCard

Utilizado sempre para exibir um produto em modo de vitrine

<ProductCard
  price="100"
  imageProduct={`http://lorempixel.com/300/300/food/`}
  stylePrice={{ backgroundColor: "#f0eded" }}
  styleImage={{ backgroundColor: "#f0eded" }}
/>

Text

Utilizado sempre para exibir um texto

<Text style={{ fontSize: "18px" }} text="Lorem ipsum dolor sit amet..." />

Separator

Utilizado para separar conteúdos.

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

Heading

Utilizado para exibir títulos.

<Heading size={2} title={"Título de exemplo"} style={{ color: "blue" }} />

View

View padrão

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

Button

Utilizado sempre no topo da aplicação, possui a implementação como abaixo:

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

Heading

Para a utilização do h1, h2, h3, h4, h5 e h6 onde o tamanho é passado através do size, conforme exemplo abaixo:

<Heading size={2}>Título do Heading</Heading>

Image

A imagem deverá ser passada através do source, conforme exemplo abaixo:

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

SearchBar

A caixa de pesquisa possui o placeholder e handeClick, conforme exemplo abaixo:

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

View

Utilização do componente View, conforme exemplo abaixo:

<View />

Text

Utilizado para textos:

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

ListView

Utilizado para listas de conteúdo:

<ListView style={{ background: "red" }} items={itemsForListView}>
  {item => (
    <View>
      <Text>{item.text}</Text>
    </View>
  )}
</ListView>

If

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

Tipos de dados aceitos: String, number, Array, Object e Boolean.

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

Propriedades compartilhadas

onClick

| Descrição   | Executa uma função 				         |
| Obrigatório | Não                 			         |
| Tipo        | Função 			                       |
| Componentes | Heading, Image, Text, View, Button |