Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
ame-miniapp-components
Advanced tools
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";
Utilizado sempre no topo da aplicaçã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/"}
/>
title
Uma string para o título do header
description
Uma string para a descrição do header
displaySearch
Exibição da barra de pesquisa
searchButtonPlaceholder
Uma string para auxiliar o usuário com o campo de pesquisa displaySearch
backgroundImage
Uma imagem para o plano de fundo do header
backgroundColor
Uma cor para o plano de fundo do header
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.
Utilizado sempre para chamar uma ação de busca.
<SearchBar
placeholder="Pesquisar"
handleClick={this.handleSearchButton.bind(this)}
style={{ backgroundColor: "#fad89d" }}
/>
placeholder
Uma string para auxiliar o usuário com o campo de pesquisa
handleClick
Ação realizada após clicar na pesquisa
style
Estilização do componente SearchBar
Utilizado para a exibição de imagens.
<Image
source={`http://lorempixel.com/300/300/food/`}
style={{ borderRadius: 50 }}
/>
source
Link da imagem que será exibida
style
Estilização do componente SearchBar
onClick
Executa uma função | Tipo: Função
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/" />
}
]}
/>
styleButton
Estilização do botão do componente TabNavigator
styleContent
Estilização do conteúdo do componente TabNavigator
items
Lista de itens de conteúdos.
title
Botão para a navegação | Obrigatório: SimisDisable
Recebe um boleano e informa se o conteúdo não será exibido | Obrigatório: Nãocontent
Conteúdo a ser exibido | Obrigatório: SimMí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 Obrigatório: Sim
color
Cor do texto
fontFamily
Família de fonte do texto
fontSize
Tamanho do texto
fontWeight
Peso da fonte do texto
Utilizado para separar conteúdos.
<Separator
style={{
height: "2px",
background: "#ca2405",
marginTop: "10px",
marginBottom: "10px"
}}
/>
style
Estilização do Separator
Utilizado para exibir títulos (h1, h2, h3, h4, h5 e h6).
<Heading
size={2}
fontSize={30}
fontWeight={"bold"}
lineHeight={32}
fontFamily={"serif"}
>
Título do Heading
</Heading>
size
Tamanho do título. Caso nenhum tamanho (size
) seja passado por parâmetro o valor padrão será h1
.
fontSize
Tamanho do texto. | Tipo: Number
fontWeight
Densidade do texto. | Tipo: String
lineHeight
Espaçamento de linha. | Tipo: Number
fontFamily
Estilo da fonte | Tipo: String
A seguinte regra de arredondamento é utilizada no parâmetro size
deste componente:
Menor ou igual a x.4 o componente é arredondado para a casa inteira anterior. Exemplo: 3.2 é arredondado para 3.0
Maior ou igual a x.5 o componente é arredondado para a casa inteira posterior. Exemplo: 4.7 é arredondado para 5.0
View padrão.
<View style={{ backgroundColor: "#e7e5e5" }} />
style
Estilização para a view
onClick
Executa uma função | Tipo: Função
disable
Desativa o componente, inserindo opacidade e removendo as ações | Obrigatório: Não | Tipo: Boolean
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" }} />
icon
Ícone do botão
disable
Informação se o botão é inativo | Obrigatório: Não | Tipo: Boolean
text
Texto do botão | Obrigatório: Sim
onClick
Executa uma função | Obrigatório: Sim | Tipo: Função
style
Estilização do botão
Botã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" }} />
icon
Ícone do botão
disable
Informação se o botão é inativo | Obrigatório: Não | Tipo: Boolean
text
Texto do botão | Obrigatório: Sim
onClick
Executa uma função | Obrigatório: Sim | Tipo: Função
style
Estilização do botão
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" }} />
icon
Ícone do botão
disable
Informação se o botão é inativo | Obrigatório: Não | Tipo: Boolean
text
Texto do botão | Obrigatório: Sim
onClick
Executa uma função | Obrigatório: Sim | Tipo: Função
style
Estilização do botão
Botão que ao clicado executa uma ação.
<TextButton
icon={<Image source="http://lorempixel.com/50/50/food/" />} text={"Texto do botão"} onClick={() ={ console.log("clicou no botão"); }} style={{ color: "red" }} />
icon
Ícone do botão
disable
Informação se o botão é inativo | Obrigatório: Não | Tipo: Boolean
text
Texto do botão | Obrigatório: Sim
onClick
Executa uma função | Obrigatório: Sim | Tipo: Função
style
Estilização do botão
Imagem a ser exibida.
<Image source={`http://lorempixel.com/300/300/food/`} isDisabled={false} />
source
| Tipo: String
Caminho da imagem Obrigatório: Sim
isDisabled
| Tipo: Boolean
Define se a imagem está ativa
Caixa de pesquisa
<SearchBar
placeholder="Pesquisar"
handleClick={this.handleSearchButton.bind(this)}
/>
placeholder
Texto de auxílio ao usuário
handleClick
Ação a ser realizada após o termo da pesquisa ser inserido Obrigatório: Sim
Utilizado para listas de conteúdo.
<ListView items={itemsForListView}>
{
(item = (
<View>
<Text>{item.text}</Text>
</View>
))
}
</ListView>
items
Itens da lista de conteúdo Obrigatório: Sim
style
Estilização da lista de conteúdo
Utilizado para exibir conteúdo, de acordo com a condição.
<If test={"algum tipo de dado"}>
<Heading size={2}>Título do Heading</Heading>
</If>
test
Tipo de condição a ser testada
Utilizado para exibir um input de alternância.
<Toggle items={tShirtList}
value={tShirtList[0]}
onChange={(e) ={ console.log("Elemento escolhido", e); }}
/>
items
Lista de elementos
value
Texto a ser exibido
onChange
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
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 horizontalisDisabled
| Tipo: Boolean
Define se o ProductCard está ativo
Utilizado para emoldurar algum elemento.
<Card
bordered
weight={2}
isDisabled={false}
onClick={() => {
console.log("teste click Card");
}}
>
<SomeElement>
Segue abaixo a lista de componentes e como utilizálos.
</SomeElement>
</Card>
weight
| Tipo: Number
Densidade da borda
onClick
| Tipo: Function
Recebe uma função que será executada, mediante o evento de click do Card
isDisabled
| Tipo: Boolean
Define se o Card está ativo
FAQs
Biblioteca de componentes para construção de miniapps ame
The npm package ame-miniapp-components receives a total of 62 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
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.