MiniApp Components
Consiste em um pacote de componentes para construção de mini-apps.
Instalação
Abra o seu terminal e execute o seguinte comando:
npm install miniapp-components
Os componentes precisam ser importados conforme a sua necessidade, veja o exemplo:
import { Image, Text } from 'miniapp-components'
Lista de componentes
Segue abaixo a lista de componentes, seu guia de utilização e documentação das propriedades.
Utilizado sempre no topo da aplicação, facilita a composição de uma identidade visual padrão.
Exemplo de utilizaçã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 | Tipo: String | Obrigatório: Sim
description
Uma string para a descrição do header | Tipo: String | Obrigatório: Sim
displaySearch
Exibição da barra de pesquisa
searchButtonPlaceholder
Uma string para auxiliar o usuário com o campo de pesquisa displaySearch | Tipo: String
backgroundImage
Uma imagem para o plano de fundo do header | Tipo: String
backgroundColor
Uma cor para o plano de fundo do header | Tipo: String
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
Assemelha-se à uma caixa de busca. Executa uma função de chamada de busca no superapp ao ser tocado. | Tipo: Function
Exemplo de utilização
<SearchButton placeholder='Pesquisar' />
Parâmetros
placeholder
Uma string para auxiliar o usuário com o campo de pesquisa | Tipo: String
Grid
Utilizado para a divisão visual de conteúdo.
Exemplo de utilização
<Grid
columns={[
<Text>First Content</Text>,
<View>
<Text>Second Content</Text>
<Text>Other content</Text>
</View>
]}
widths={[50, 50]}
/>
Parâmetros
columns
Lista dos conteúdos em formato de Array | Tipo: Array | Obrigatório: Sim
widths
Lista da largura percentual de cada item. | Tipo: Number
vertical
Exibe o conteúdo na vertical | Tipo: Boolean
Image
Utilizado para a exibição de imagens.
Exemplo de utilização
<Image
source={`http://lorempixel.com/300/300/food/`}
round
width={100}
height={'200'}
/>
Parâmetros
source
Link da imagem que será exibida
round
Faz a imagem ter a caixa arredondada
width
Largura da imagem | Obrigatório: Sim | Tipo: String (porcentagem) ou Number (pixel)
height
Altura da imagem | Obrigatório: Sim | Tipo: String (porcentagem) ou Number (pixel)
TabNavigator
Utilizado sempre para a navegação. Os itens serão transformados em abas.
Exemplo de utilização
<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
items
Lista de itens de conteúdos.
title
Botão para a navegação | Obrigatório: Simcontent
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.
Exemplo de utilização
<Text>"Lorem ipsum dolor sit amet, consectetur adipiscing."</Text>
Texto a ser exibido deverá ser passado dentro da tag | Tipo: String | Obrigatório: Sim
Parâmetros
color
Cor do texto | Tipo: String
fontFamily
Família de fonte do texto | Tipo: String
fontSize
Tamanho do texto | Tipo: String
fontWeight
Peso da fonte do texto | Tipo: Number
Separator
Utilizado para separar conteúdos.
Exemplo de utilização
<Separator
style={{
height: '2px',
color: '#ca2405',
height: '10px',
width: '10px'
}}
/>
Parâmetros
background-color
Estilização do Separator. Cor definada através do BaseColor
| Tipo: String
Title
Utilizado para exibir títulos (h1, h2, h3, h4, h5 e h6).
Exemplo de utilização
<Title
size={2}
fontSize={30}
fontWeight={'bold'}
lineHeight={32}
fontFamily={'serif'}
color={'#c4c4c4'}
marginTop={4}
marginBottom={8}
marginLeft={3}
marginRight={0}>
Título do Title
</Title>
Parâmetros
Title
extende o componente Text
, herdando suas propriedades.
size
Tamanho do título. Valores aceitos: 1, 2, 3, 4, 5 e 6. Caso nenhum tamanho (size
) seja passado por parâmetro o valor padrão será 1
. | Tipo: Number | Obrigatório: Sim
children
Conteúdo do texto. | Tipo: String | Obrigatório: Sim
View
View padrão.
Exemplo de utilização
<View style={{ backgroundColor: '#e7e5e5' }} />
Parâmetros
View
extende o componente BaseComponent
, herdando suas propriedades.
style
Estilização para a view
className
Estilização pré-definida para a view
children
Conteúdo. | Tipo: Any | Obrigatório: Sim
onClick
Executa uma função | Tipo: Função
horizontal
Altera a disposição da view para horizontal | Tipo: Boolean
Button
Botão que ao clicado executa uma ação.
Exemplo de utilizaçã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
Button
extende o componente Touchable
, herdando suas propriedades.
disable
Informação se o botão é inativo | Tipo: Boolean | Obrigatório: Não
block
Botão com 100% de largura | Tipo: Boolean
size
Tamanho do botão. | Tipo: Stirng
small
Tamanho: 30px - Fonte: 1emmedium
Tamanho: 40px - Fonte: 1.5emdefault
Tamanho: 60px - Fonte: 2em
GhostButton
Botão que ao clicado executa uma ação.
Exemplo de utilizaçã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
GhostButton
extende o componente Button
, herdando suas propriedades.
SoftButton
Botão que ao clicado executa uma ação.
Exemplo de utilizaçã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
SoftButton
extende o componente Button
, herdando suas propriedades.
TextLink
Botão que ao clicado executa uma ação.
Exemplo de utilização
<TextLink onClick={() => {}}>Link</TextLink>
Parâmetros
TextLink
extende o componente Text
, herdando suas propriedades.
icon
Ícone do botão
disable
Informação se o botão é inativo | Tipo: Boolean | Obrigatório: Não
children
Texto do botão | Obrigatório: Sim
onClick
Executa uma função Tipo: Função | Obrigatório: Sim
SearchButton
Caixa de pesquisa
Exemplo de utilização
<GhostButton>Ghost</GhostButton>
Parâmetros
GhostButton
extende o componente Button
, herdando suas propriedades.
Repeater
Utilizado para listas de conteúdo.
Exemplo de utilização
<Repeater items={itemsForRepeater}>
{
(item = (
<View>
<Text>{item.text}</Text>
</View>
))
}
</Repeater>
Parâmetros
items
Itens da lista de conteúdo | Tipo: Array Obrigatório: Sim
componentStyle
Estilização da lista de conteúdo | Tipo: Object
If
Utilizado para exibir conteúdo, de acordo com a condição.
Exemplo de utilização
<If test={'algum tipo de dado'}>
<Title size={2}>Título do Title</Title>
</If>
Parâmetros
test
Tipo de condição a ser testada | Tipo: Any |
Obrigatório: Sim
Realiza a validação do resultado em true
ou false
e, caso verdadeiro o conteúdo é exibido.
Tipos de dados aceitos neste componente: String
, Number
, Array
, Object
e Boolean
.
Toggle
Utilizado para exibir um input de alternância.
Exemplo de utilização
<Toggle items={tShirtList}
value={tShirtList[0]}
onChange={(e) ={ console.log("Elemento escolhido", e); }}
/>
Parâmetros
items
Lista de elementos | Tipo: Array | Obrigatório: Sim
value
Texto a ser exibido
onChange
Função executada quando o cliente escolhe uma das opções | Tipo: Function | Obrigatório: Sim
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 verticalhorizontal
Exibe o ProductCard na horizontal
isDisabled
Define se o ProductCard está ativo | Tipo: Boolean
componentStyle
Estilização do componente | Tipo: Object
Grid
Utilizado para dividir conteúdo em 1 ou mais colunas.
Exemplo de utilização
<Grid
columns={[
<Text>First Content</Text>,
<View>
<Text>Second Content</Text>
<Text>Other content</Text>
</View>
]}
widths={[50, 50]}
/>
Parâmetros
columns
Conteúdo das colunas | Tipo: Array
widths
Largura de cada coluna | Tipo: Array
vertical
Altera a exibição para vertical | Tipo: Boolean
Card
Utilizado para emoldurar algum elemento.
Exemplo de utilização
<Card bordered weight={2} isDisabled={false}>
<SomeElement>
Segue abaixo a lista de componentes e como utilizálos.
</SomeElement>
</Card>
Parâmetros
Card
extende o componente BaseComponent
, herdando suas propriedades.
weight
Densidade da borda | Tipo: Number
isDisabled
Define se o Card está ativo | Tipo: Boolean
shadow
Adiciona sombra | Tipo: Boolean
bordered
Adiciona borda | Tipo: Boolean
backgroundColor
Insere cor de fundo | Tipo: Boolean
DatePicker
Utilizado como calendário.
constructor() {
super()
this.state = { date: '' }
this.getValue = this.getValue.bind(this)
}
getValue = (value) => {
this.setState({ date: valor })
}
<DatePicker minDate={"YYYY-MM-DD"}
maxDate={"YYYY-MM-DD"}
isDisabled={false}
getValue={this.getValue}
value={this.state.date}
/>
Parâmetros
minDate
A menor data aceitável | Tipo: String
maxDate
A maior data aceitável | Tipo: String
isDisabled
Define se o DatePicker está ativo | Tipo: Boolean
value
Perimite definir uma data, pelo componente pai | Tipo: String
getValue
A data definida pelo DatePicker pode ser devolvida ao componente pai,
através da função getValue. | Tipo: Function
Formatos de data aceitos:
PriceFormat
Exemplo de utilização
Utilizado para formatação de preços.
<PriceFormat amount={3298.0} currency={'r$'} size={30} />
Parâmetros
PriceFormat
extende o componente Text
, herdando suas propriedades.
amount
Define a quantia | Tipo: Number
currency
Define a moeda da quantia | Tipo: String
TableDetails
Exemplo de utilização
Utilizado para criar uma linha de detalhes.
<TableDetails
contents={[
{
content: <CustomText title={'entrega'} content={'convencional'} />
},
{
content: <CustomText title={'frete'} content={'R$ 5,99'} />
},
{
content: <CustomText title={'prazo'} content={'7 dias'} />
}
]}
/>
Parâmetros
contents
É um array de objetos, onde em cada objeto existe uma key content
e o seu valor
é o elemento a ser exibido em uma coluna. | Tipo: Array