Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
ame-miniapp-components
Advanced tools
Para instalar utilize o comando:
npm install react-ame-tools
Após isso os componentes precisam ser importados conforme a sua necessidade, veja o exemplo:
import { Image, Text } from "react-ame-components";
Utilizado sempre no topo da aplicação, possui a implementação como abaixo:
<Header
title="Minha Loja"
description="Uma loja de exemplo"
displaySearch={true}
searchButtonPlaceholder={"Busque o que quiser"}
onSearchClick={() => {
console.log("Clicou no botão de busca");
}}
background={"http://lorempixel.com/550/300/food/"}
imageLogo={"http://lorempixel.com/400/400/food/"}
/>
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/" />
}
]}
/>
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" }}
/>
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={<img src="http://lorempixel.com/50/50/food/" />}
actionButton={() => {
console.log("ttt");
}}
style={{ color: "red" }}
/>
Utilizado sempre no topo da aplicação, possui a implementação como abaixo:
import React, { Component } from "react";
import PropTypes from "prop-types";
// import { height } from 'window-size';
export class Heading extends Component {
static propTypes = {
text: PropTypes.string
};
render() {
const { text } = this.props;
return <div className="view">{this.props.children}</div>;
}
}
Utilizado sempre no topo da aplicação, possui a implementação como abaixo:
import React, { Component } from "react";
import PropTypes from "prop-types";
import produto from "../assets/images/component_background.jpg";
export class Image extends Component {
static propTypes = {
imageProduct: PropTypes.string
};
static defaultProps = {
imageProduct: produto
};
render() {
const { imageProduct } = this.props;
const divStyle = {
width: "50%",
padding: "1%"
};
const imgStyle = {
width: "100%",
height: "22vh"
};
return (
<div style={divStyle} className="view">
<img style={imgStyle} src={imageProduct} />
</div>
);
}
}
Utilizado sempre no topo da aplicação, possui a implementação como abaixo:
import React, { Component } from "react";
import PropTypes from "prop-types";
import style from "../styles/Header.scss";
import search from "../assets/images/search.png";
export class SearchBar extends Component {
static propTypes = {
placeholder: PropTypes.string,
handleClick: PropTypes.func
};
static defaultProps = {
placeholder: "Pesquise produtos, marcas"
};
render() {
const { placeholder } = this.props;
return (
<div
className={style.headerContentSearch}
onClick={this.props.handleClick}
>
<img
src={search}
alt="barra de pesquisa"
className={style.headerSearchImageConfig}
/>
<span className={style.headerSearchPlaceholderConfig}>
{" "}
{this.props.placeholder}{" "}
</span>
</div>
);
}
}
Utilizado sempre no topo da aplicação, possui a implementação como abaixo:
import React, { Component } from "react";
import PropTypes from "prop-types";
export class View extends Component {
static propTypes = {
text: PropTypes.string
};
render() {
const { text } = this.props;
return <div className="view">{this.props.children}</div>;
}
}
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>
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
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.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.