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