ame-miniapp-components

Ame React Component Tools

Utilização

Para instalar utilize o comando:

npm install ame-miniapp-components

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

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

Veja os componentes abaixo

Header

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

<Header
  title="Minha Loja"
  description="Uma loja de exemplo"
  displaySearch={true}
  searchButtonPlaceholder={"Busque o que quiser"}
  onSearchClick={() => {
    console.log("Clicou no botão de busca");
  }}
  background={"http://lorempixel.com/550/300/food/"}
  imageLogo={"http://lorempixel.com/400/400/food/"}
/>

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

Componente Button

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

<Button
  icon={<img src="http://lorempixel.com/50/50/food/" />}
  actionButton={() => {
    console.log("ttt");
  }}
  style={{ color: "red" }}
/>

Componente Heading

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

Componente Image

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

Componente SearchBar

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

Componente View

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

Componente Text

Utilizado para textos:

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

Componente ListView

Utilizado para listas de conteúdo:

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

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