Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ame-miniapp-components

Package Overview
Dependencies
Maintainers
1
Versions
442
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ame-miniapp-components

Components for Ame Miniapp Development

  • 0.0.22
  • npm
  • Socket score

Version published
Weekly downloads
1
decreased by-96.15%
Maintainers
1
Weekly downloads
 
Created
Source

Utilização

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";

Veja os componentes abaixo

Header

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/"}
/>
Parâmetros:

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 pesquisa displaySearch.
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" }}
/>


Image

Utilizado para a exibição de imagens.

<Image
  source={`http://lorempixel.com/300/300/food/`}
  style={{ borderRadius: 50 }}
/>


TabNavigator

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

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" }}
/>


Text

Utilizado sempre para exibir um texto

<Text style={{ fontSize: "18px" }} text="Lorem ipsum dolor sit amet..." />


Separator

Utilizado para separar conteúdos.

<Separator
  style={{
    height: "2px",
    background: "#ca2405",
    marginTop: "10px",
    marginBottom: "10px"
  }}
/>


Heading

Utilizado para exibir títulos.

<Heading size={2} title={"Título de exemplo"} style={{ color: "blue" }} />


View

View padrão

<View style={{ backgroundColor: "#e7e5e5" }} />


Button

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" }} />


Heading

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>


Image

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)}
/>


View

Utilização do componente View, conforme exemplo abaixo:

<View />


Text

Utilizado para textos:

<Text>"Lorem ipsum dolor sit amet, consectetur adipiscing."</Text>


ListView

Utilizado para listas de conteúdo:

<ListView style={{ background: "red" }} items={itemsForListView}>
  {item => (
    <View>
      <Text>{item.text}</Text>
    </View>
  )}
</ListView>


If

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>

Propriedades compartilhadas

onClick

| Descrição   | Executa uma função 				         |
| Obrigatório | Não                 			         |
| Tipo        | Função 			                       |
| Componentes | Heading, Image, Text, View, Button |

FAQs

Package last updated on 16 Jul 2019

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc