ame-miniapp-components
Advanced tools
Consiste em um pacote de componentes para construção de mini-apps.
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'
Segue abaixo a lista de componentes, seu guia de utilização e documentação das propriedades.
Componente com a função de carregar propriedades padrões.
marginVertical [ Number ] Configura um mesmo valor para as margens superior e inferior.
marginHorizontal [ Number ] Configura um mesmo valor para as margens esquerda e direita.
marginTop [ Number ] Configura um valor para margem superior.
marginBottom [ Number ] Configura um valor para margem inferior.
marginLeft [ Number ] Configura um valor para margem à esquerda.
marginRight [ Number ] Configura um valor para margem à direita.
width [ Number ] Configura um valor para a propiedade width.
height [ Number ] Configura um valor para a propiedade height.
Utilizado sempre no topo da aplicação, facilita a composição de uma identidade visual padrã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/'}
/>
Headerextende o componenteBaseComponent, herdando suas propriedades.
title [ String | Obrigatório ] Uma string para o título do header
description [ String | Obrigatório ] Uma string para a descrição do header
displaySearch [ Boolean ] Exibição da barra de pesquisa
searchButtonPlaceholder [ String | Obrigatório] Uma string para auxiliar o usuário com o campo de pesquisa displaySearch
backgroundImage [ String ] Uma imagem para o plano de fundo do header
backgroundColor [ String ] Uma cor para o plano de fundo do header
A seguinte regra de background é utilizada no parâmetro neste componente:
backgroundImagebackgroundColorbackgroundImage default.backgroundImage default é a imagem padrão da biblioteca caso nenhuma imagem ou cor seja definida.
Utilizado para a exibição de imagens.
<Image source={`http://lorempixel.com/300/300/food/`} round />
Imageextende o componenteBaseComponent, herdando suas propriedades.
source[ String ] Link da imagem que será exibida.
round Exibe a imagem em formar circular.
Utilizado para imagem de fundo.
<ImageBackground
source={'http://lorempixel.com/250/70/food/'}
width={250}
height={70}
backgroundSize={'cover'}
/>
ImageBackgroundextende o componenteBaseComponent, herdando suas propriedades.
source [ String | Obrigatório ] Caminho da imagem de fundo.
backgroundSize [ String | Obrigatório ] Especifica o tamanho da imagem de fundo.
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/' />
}
]}
/>
TabNavigatorextende o componenteBaseComponent, herdando suas propriedades.
items
Lista de itens de conteúdos.
title [ Obrigatório ] Título para a aba de navegaçãocontent [ Obrigatório ] Conteúdo a ser exibidoMí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.
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.
color [ String ] Cor do texto
fontFamily [ String ] Família de fonte do texto.
fontSize [ String ] Tamanho do texto.
fontWeight [ Number ] Peso da fonte do texto.
children [ String | Obrigatório ] Conteúdo.
Utilizado para separar conteúdos.
<Separator />
Separatorextende o componenteBaseComponent, herdando suas propriedades.
Utilizado para exibir títulos (h1, h2, h3, h4, h5 e h6).
<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>
Title extende o componente Text, herdando suas propriedades.
size [ Number | Obrigatorio ]
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.
fontSize [ Number] Tamanho do texto
fontWeight [ String ] Peso da fonte do texto
lineHeight [ Number ] Espaçamento de linhas
fontFamily [ String ] Família de fonte do texto
color [ Any ] Cor do texto
marginTop [ Number ] Margem superior do texto
marginBotton [ Number ] Margem Inferior do texto
marginLeft [ Number ] Margem esquerda do texto
marginRight [ Number ] Margem direita do texto
children [ String | Obrigatório ] Conteúdo.
View padrão.
<View style={{ backgroundColor: '#e7e5e5' }} />
Viewextende o componenteBaseComponent, herdando suas propriedades.
style
Estilização para a view
className
Estilização pré-definida para a view
children [ Any | Obrigatório ]
Conteúdo.
horizontal [ Boolean ] Altera a disposição da view para horizontal
<Touchable />
Touchableextende o componenteBaseComponent, herdando suas propriedades.
onClick
Touchable possui a função onClick em sua implementação e poderá ser utilizado de duas formas:
<Touchable onClick={this.onClickHandle}>
<InnerText>{children}</InnerText>
</Touchable>
class Button extends Touchable
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" }} />
Buttonextende o componenteTouchable, herdando suas propriedades.
disable [ Boolean | Obrigatório ] Informação se o botão é inativo
block [ Boolean ]
Botão com 100% de largura
size [ String ]
Altura e tamanho da fonte pré-definidos do botão.
small height: 30px - Fonte: 1emmedium height: 40px - Fonte: 1.5emdefault height: 60px - Fonte: 2emBotã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" }} />
GhostButtonextende o componenteButton, herdando suas propriedades.
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" }} />
SoftButtonextende o componenteButton, herdando suas propriedades.
Exerce a função de um link.
<TextLink onClick={() => {}}>Link</TextLink>
TextLinkextende o componenteText, herdando suas propriedades.
disable [ Boolean ] Informação se o botão é inativo
onClick [ Function | Obrigatório ] Executa uma função
children [ Obrigatório ] Conteúdo
Assemelha-se à uma caixa de busca. Executa uma função de chamada de busca no superapp ao ser tocado.
<SearchButton>Buscar produtos</SearchButton>
SearchButtonextende o componenteTouchable, herdando suas propriedades.
placeholder [String] Texto padrão exibido no SearchButton.
Utilizado para listas de conteúdo.
<Repeater items={itemsForRepeater}>
{
(item = (
<View>
<Text>{item.text}</Text>
</View>
))
}
</Repeater>
items [ Array | Obrigatório ] Itens da lista de conteúdo.
Utilizado para exibir conteúdo, de acordo com a condição.
<If test={'algum tipo de dado'}>
<Title size={2}>Título do Title</Title>
</If>
test [ Any | Obrigatório] Tipo de condição a ser testada
Realiza a validação do resultado em true ou false, e em caso verdadeiro o conteúdo é exibido.
Tipos de dados aceitos neste componente: String, Number, Array, Object e Boolean.
Utilizado para exibir um input de alternância.
<Toggle items={tShirtList}
value={tShirtList[0]}
onChange={(e) ={ console.log("Elemento escolhido", e); }}
/>
Toggleextende o componenteBaseComponent, herdando suas propriedades.
items [ Array | Obrigatório ] Lista de elementos.
value [Object] Valor a ser passado.
onChange [ Function | Obrigatório ] Função executada quando o cliente escolhe uma das opções.
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}
/>
productName [ String ] Identifica e/ou descreve o produto
price [ Number ] Exibe o preço do produto
conditionPayment [ String ] Condição de pagamento
imageProduct [ String ] Endereço onde uma imagem está armazenada
onProuctCardClick [ Function ] Recebe uma função para ser executada, em um evento de click sobre o ProductCard
cardOrientation [ String ] Define a orientação do ProductCard
vertical Exibe o ProductCard na verticalhorizontal Exibe o ProductCard na horizontalisDisabled [ Boolean ] Define se o ProductCard está ativo
Utilizado para dividir conteúdo em 1 ou mais colunas.
<Grid
columns={[
<Text>First Content</Text>,
<View>
<Text>Second Content</Text>
<Text>Other content</Text>
</View>
]}
widths={[50, 50]}
/>
Gridextende o componenteBaseComponent, herdando suas propriedades.
columns [ Array ] Conteúdo das colunas.
widths [ Array ] Largura de cada coluna.
vertical [ Boolean ] Altera a exibição para vertical.
Utilizado para emoldurar algum elemento.
<Card bordered weight={2} isDisabled={false}>
<SomeElement>
Segue abaixo a lista de componentes e como utilizálos.
</SomeElement>
</Card>
Cardextende o componenteBaseComponent, herdando suas propriedades.
shadow [ Boolean]
Adiciona sombra.
bordered [ Boolean ]
Adiciona borda.
children [ Any | Obrigatório ] Conteúdo
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}
/>
DatePickerextende o componenteBaseComponent, herdando suas propriedades.
minDate [ String ]
A menor data aceitável
maxDate [ String ]
A maior data aceitável
disabled [ Boolean ]
Define se o DatePicker está ativo.
value [ String ]
Perimite definir uma data, pelo componente pai.
getValue [ Function ]
A data definida pelo DatePicker pode ser devolvida ao componente pai,
através da função getValue.
Formatos de data aceitos:
YYYY-MM-DDYYYYMMDDUtilizado para formatação de preços.
<PriceFormat amount={3298.0} currency={'r$'} size={30} />
PriceFormatextende o componenteText, herdando suas propriedades.
amount [ Number ] Define a quantia
currency [ String ] Define a moeda da quantia
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'} />
}
]}
/>
TableDetailsextende o componenteBaseComponent, herdando suas propriedades.
contents [ Array ]
É um array de objetos, onde em cada objeto existe uma key content e o seu valor é o elemento a ser exibido em uma coluna.
É um conjunto de métodos estáticos, que tem como objetivo ajudar no manuseio e configuração do estilo dos componentes.
setPrimaryFont(font): Altera o estilo de fonte padrão utilizado pelo navegador. É necessário passar uma string, definindo o estilo da font.
setPrimaryColor(color): Altera a definição de cor primária utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor primária do navegador.
setSecondaryColor(color): Altera a definição de cor secundária utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor secundária do navegador.
setTertiaryColor(color): Altera a definição de cor terciária utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor terciária do navegador.
setTextColor(color): Altera a definição de cor de texto padrão utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor de texto padrão do navegador.
setBorderColor(color): Altera a definição de cor de borda padrão utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor de borda padrão do navegador.
setBackgroundColor(color): Altera a definição de cor de background padrão utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor de background padrão do navegador.
getPrimaryFont(): Retorna o estilo de fonte padrão, do navegador.
getPrimaryColor(): Retorna a cor definida como cor primária do navegador.
getSecondaryColor(): Retorna a cor definida como cor secundária do navegador.
getTertiaryColor(): Retorna a cor definida como cor terciária do navegador.
getTextColor(): Retorna a cor definida como cor de texto padrão do navegador.
getBorderColor: Retorna a cor definida como cor de borda padrão do navegador.
getBackgroundColor: Retorna a cor definida como cor de background padrão do navegador.
getDisabledColor(): Retorna a cor padronizada para elementos que assumem a propriedade disabled.
brightness(color, percent): Recebe dois parâmetros color(String) e percent(Number), os quais são utilizados para determinar o grau de brilho da cor passada.
darken(color, percent): Recebe dois parâmetros color(String) e percent(Number), os quais são utilizados para determinar o grau de contraste da cor passada.
parseUnit(unit): Recebe um parâmetro unit(Number) e retorna a unidade passada em px.
getColors(): Retorna um objeto com os atributos primaryColor, secondaryColor, tertiaryColor, textColor, borderColor e backgroundColor. O valor de cada propriedade é o valor que foi definido como padrão para o navegador, utilizando as funções set. Se o valor padrão do atributo não for definido através das funções set, serão utilizados valores padrões definidos internamente.
é o elemento a ser exibido em uma coluna.
Utilizado para exibir uma mensagem de alerta.
<Warning type={'success'}>
text={'Lorem ipsum dolor sit amet, consectetur adipiscing.'}
</Warning>
type [ String ] Identifica e/ou determina o tipo de alert a ser exibido(error, success, info, warning).
type={"error"} Exibe uma tarja vermelha ao fundo do texto.type={"success"} Exibe uma tarja verde ao fundo do texto.type={"info"} Exibe uma tarja azul ao fundo do texto.type={"warning"} Exibe uma tarja amarela ao fundo do textotext [ String ] Conteúdo da mensagem, de acordo com o type.
FAQs
Biblioteca de componentes para construção de miniapps ame
The npm package ame-miniapp-components receives a total of 0 weekly downloads. As such, ame-miniapp-components popularity was classified as not popular.
We found that ame-miniapp-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.