
Research
Security News
Lazarus Strikes npm Again with New Wave of Malicious Packages
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
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, 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/"}
/>
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 pesquisadisplaySearch
.
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
Utilizado sempre para chamar uma ação de busca
<SearchBar
placeholder="Pesquisar"
handleClick={this.handleSearchButton.bind(this)}
style={{ backgroundColor: "#fad89d" }}
/>
Utilizado para a exibição de imagens.
<Image
source={`http://lorempixel.com/300/300/food/`}
style={{ borderRadius: 50 }}
/>
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
price="100"
imageProduct={`http://lorempixel.com/300/300/food/`}
stylePrice={{ backgroundColor: "#f0eded" }}
styleImage={{ backgroundColor: "#f0eded" }}
/>
Utilizado sempre para exibir um texto
<Text style={{ fontSize: "18px" }} text="Lorem ipsum dolor sit amet..." />
Utilizado para separar conteúdos.
<Separator
style={{
height: "2px",
background: "#ca2405",
marginTop: "10px",
marginBottom: "10px"
}}
/>
Utilizado para exibir títulos.
<Heading size={2} title={"Título de exemplo"} style={{ color: "blue" }} />
View padrão
<View style={{ backgroundColor: "#e7e5e5" }} />
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" }} />
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>
A imagem deverá ser passada através do source
, conforme exemplo abaixo:
<Image source={`http://lorempixel.com/300/300/food/`} />
A caixa de pesquisa possui o placeholder
e handeClick
, conforme exemplo abaixo:
<SearchBar
placeholder="Pesquisar"
handleClick={this.handleSearchButton.bind(this)}
/>
Utilização do componente View
, conforme exemplo abaixo:
<View />
Utilizado para textos:
<Text>"Lorem ipsum dolor sit amet, consectetur adipiscing."</Text>
Utilizado para listas de conteúdo:
<ListView style={{ background: "red" }} items={itemsForListView}>
{item => (
<View>
<Text>{item.text}</Text>
</View>
)}
</ListView>
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>
onClick
| Descrição | Executa uma função |
| Obrigatório | Não |
| Tipo | Função |
| Componentes | Heading, Image, Text, View, Button |
FAQs
Biblioteca de componentes para construção de miniapps ame
The npm package ame-miniapp-components receives a total of 23 weekly downloads. As such, ame-miniapp-components popularity was classified as not popular.
We found that ame-miniapp-components demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.