Ame Mini-App Components Web
Tokens
Bordas
Alguns componentes experimentam o uso de bordas. Você poderá alterar propriedades básicas de borda como espessura ou cor.
borderWidth
Os valores abaixo indicam espessuras de borda, começando da mais fina para a mais grossa:
token | valor |
---|---|
none | 0px |
hairline | 1px |
thin | 2px |
thick | 4px |
heavy | 8px |
borderRadius
Abaixo os valores aceitos para arredondamento das bordas
token | valor |
---|---|
none | 0px |
micro | 4px |
small | 8px |
medium | 16px |
pill | 500px |
circular | 50% |
borderColor
Veja aqui quais os tokens de corque você pode utilizar no borderColor
Cores
Os padrões de design estabelem que apenas as cores abaixo podem ser utilizadas. As cores são inseridas através dos tokens em componentes que possuem tais propriedades como: borderColor, color, backgroundColor e etc.
Primary
Secondary
Neutral
Feedback
Extras
Espaçamento
Em determinados momentos você precisará de uso de margem, para isso você poderá usar as propriedades descritas abaixo em componentes que aceitam todas ou algumas dessas propriedades.
Valores para propriedades de Margin e Padding
token | valores |
---|---|
'none' | 0px |
'quark' | 4px |
'nano' | 8px |
'extra-small' | 16px |
'small' | 24px |
'medium' | 32px |
'large' | 40px |
'extra-large' | 48px |
'big' | 56px |
'display' | 64px |
'huge' | 80px |
'giant' | 120px |
'jumbo' | 160px |
'immense' | 200px |
Flex
As propriedades abaixo afetam como os nós internos de um componente são ajustados ao seu conteúdo. São muito parecidas com as propriedades flex do CSS. Veja abaixo quais são:
Propriedades e Valores
Propriedade | Valores Aceitos |
---|---|
direction | 'row', 'row-reverse', 'column', 'column-reverse' |
align | 'center', 'start', 'end' |
justify | 'center', 'start', 'end', 'between', 'around' |
flexWrap | 'wrap', 'nowrap', 'reverse' |
flexNone | boolean |
Tipografia
Propriedades e Valores
Propriedade | Valores Aceitos |
---|---|
fontSize | 'quark' (12px), 'nano' (14px), 'extra-small' (16px), 'small' (20px), 'medium'(24px), 'large' (32px), 'extra-large' (40px), 'big' (48px), 'display'(56px), 'huge' (64px), 'giant' (72px), 'jumbo'(80px) |
textAlign | 'left', 'center', 'right', 'justify' |
lineHeight | 'small' (100%), 'medium' (150%), 'large' (200%) |
fontWeight | 'light' (300), 'regular' (400), 'medium' (500), 'bold' (700) |
Target
token | valores |
---|---|
'heading-display' | font-size: '56px'; line-height: 200%; font-weight: 700 |
'heading-extra-large' | font-size: '48px'; line-height: 200%; font-weight: 700 |
'heading-large' | font-size: '40px'; line-height: 200%; font-weight: 700 |
'heading-medium' | font-size: '32px'; line-height: 200%; font-weight: 700 |
'heading-small' | font-size: '24px'; line-height: 200%; font-weight: 700 |
'title-large' | font-size: '32px'; line-height: 150%; font-weight: 700 |
'title-medium' | font-size: '24px'; line-height: 150%; font-weight: 700 |
'title-small' | font-size: '20px'; line-height: 150%; font-weight: 700 |
'subtitle-large' | font-size: '24px'; line-height: 150%; font-weight: 700 |
'subtitle-medium' | font-size: '20px'; line-height: 150%; font-weight: 700 |
'subtitle-small' | font-size: '16px'; line-height: 150%; font-weight: 700 |
'body-regular' | font-size: '16px'; line-height: 150%; font-weight: 400 |
'body-medium' | font-size: '16px'; line-height: 150%; font-weight: 500 |
'body-bold' | font-size: '16px'; line-height: 150%; font-weight: 700 |
'caption-regular' | font-size: '14px'; line-height: 100%; font-weight: 400 |
'caption-bold' | font-size: '14px'; line-height: 100%; font-weight: 700 |
'disclaimer-regular' | font-size: '12px'; line-height: 100%; font-weight: 400 |
'disclaimer-bold' | font-size: '12px'; line-height: 100%; font-weight: 700 |
Opacidade
Em determinados momentos você pode sentir a necessidade de tornar um elemento um pouco translúcido.
Para isto você deve verificar se o componente presente aceita a propriedade opacity.
opacity
token | valores |
---|---|
'trnasparent' | 0 |
'semi-transparent' | 0.16 |
'light' | 0.32 |
'medium' | 0.4 |
'intense' | 0.64 |
'semiopaque' | 0.8 |
Sombras
Tokens e valores
token | valores |
---|---|
'level-1' | 0 4px 8px rgb(28 28 28 / 8%) |
'level-2' | 0 8px 24px rgb(28 28 28 / 16%) |
'level-3' | 0 16px 32px rgb(28 28 28 / 16%) |
'level-4' | 0 16px 48px rgb(28 28 28 / 24%) |
Componentes Simples
Accordion
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente accordion para exibição de textos no estilo FAQ.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
state = {
lorem: `Lorem ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit doloribus quis magni possimus! Architecto rem
veritatis est quaerat, ab inventore quidem eaque maxime? Eius
dolore quod totam vero mollitia saepe! Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Ipsam ex itaque sint aliquid quae
vel ea ratione dolores quia blanditiis dolor nihil, in hic
praesentium temporibus? Iste porro distinctio nisi! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Fugit sed atque ab ex
qui ea ullam nisi nemo magni ut maiores mollitia libero corrupti
cupiditate unde dignissimos, est soluta nesciunt! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Quo, voluptate et
dignissimos adipisci sit voluptas vero repellendus accusantium,
nostrum voluptatum maiores totam quidem ipsum ipsam eius ad
deserunt facere non!`,
};
render() {
return (
<View padding='nano'>
<View direction='column' align='center'>
<Text fontSize='medium' fontWeight='bold'>
Componente{' '}
<Text color='primary' fontSize='medium' fontWeight='bold'>
Accordion
</Text>
</Text>
</View>
<Accordion>
<AccordionItem title='Seguro Celular'>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Quanto Custa?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Qual o tipo de proteção?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
</AccordionItem>
<AccordionItem title='Seguro Casa'>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Quanto Custa?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Qual o tipo de proteção?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
</AccordionItem>
<AccordionItem title='Seguro Pet'>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Quanto Custa?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Qual o tipo de proteção?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
</AccordionItem>
<AccordionItem title='Novos Seguros'>
<Accordion>
<AccordionItem title='Seguro Celular'>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Quanto Custa?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>
Qual o tempo minimo de carencia?
</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Qual o tipo de proteção?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
</AccordionItem>
<AccordionItem title='Seguro Casa'>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Quanto Custa?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>
Qual o tempo minimo de carencia?
</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Qual o tipo de proteção?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
</AccordionItem>
<AccordionItem title='Seguro Pet'>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Quanto Custa?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>
Qual o tempo minimo de carencia?
</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
<View paddingBottom='nano' paddingTop='nano'>
<Text fontWeight='bold'>Qual o tipo de proteção?</Text>
</View>
<Text>{this.state.lorem}</Text>
<Text>{this.state.lorem}</Text>
</AccordionItem>
</Accordion>
</AccordionItem>
</Accordion>
</View>
Propriedades Accordion
Propriedade | Descrição | Type | Default |
---|---|---|---|
children | Recebe 1 ou mais componente AccordionItem para ser renderizado dentro do Accordion . |
component | null |
disabled | Desabilita o Componente. | boolean | false |
Propriedades AccordionItem
Propriedade | Descrição | Type | Default |
---|---|---|---|
title | Título de cada seção do Accordion | string | null |
children | Conteúdo de cada seção. Pode receber o próprio componente Accordion , para iniciar uma nova cadeia de elementos. |
component | null |
Ads
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente Ads para renderização de anuncios.
Utilização
<Ads
path='/12345678912/circulo_3'
size={['fluid', [76, 76]]}
id={'div-gpt-ad-1234567891234-0'}
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
path | Valor do path relacionado ao anúncio a ser renderizado. | String | null | sim |
size | Tamanho desejado para renderização do anúncio. | Array | null | sim |
id | Valor do Id relacionado ao anúncio a ser renderizado. | String | null | sim |
targetKey | Chave do target usado para segmentacão do anúncio. | string | null | Não |
targetValue | Valor do target usado para segmentacão do anúncio. | string | null | Não |
Animator
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Utilize este componente para exibir animações.
As animações são aceitas no formato JSON (Lottie).
Animações gratuitas podem ser encontradas no site LottieFiles.
Infelizmente, em alguns casos raros, as animações podem não ser renderizadas, isto se dá por falta de compatibilidade ou versão das bibliotecas utilizadas. Estamos investigado para que tudo seja renderizado com eficiência.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
<Window>
<Animator animationData={myAnimationJSON}/>
</Window>
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
animationData | Propriedade que recebe a animação em JSON Lottie. O utilitário StyleResolver possui um método para obter um JSON de animação padrão para carregamento. |
JSON | null |
width | Seta uma largura para a animação. O tamanho por padrão é 200px | number ou string | null |
height | Seta uma altura para a animação. O tamanho por padrão é 200px | number ou string | null |
Button
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Exibe um botão na tela. Nesta versão temos apenas um Componente Button para trabalhar.
Exemplo
Utilização
<Window>
<View direction='column' align='center'>
<Text fontSize='medium' fontWeight='bold'>
Componente Button
</Text>
<View>
<View marginTop='nano' direction='column' align='center'>
<Button
display={false}
dataCy='button-primary'
onPress={() =>
this.setState({ buttonPressText: 'Primary Normal Medium' })
}
label="Botão padrão"
size="medium"
/>
</View>
</View>
</View>
</Window>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
variant | Define qual será o estilo do botão, as propriedades são 'primary', 'secondary' 'global', 'text' e 'danger' | string | primary | Não |
onPress | Recebe uma função para ser executada ao pressionarmos o botão | function | null | Sim |
label | Define um texto a ser renderizado no componente | string | true | Não |
size | Define o tamanho do componente. os valores são: 'medium' e 'small' | boolean | true | Não |
disabled | Insere um estilo de desabilitado e inutiliza a função do onPress | boolean | false | Não |
Exemplos
Abaixo, alguns tipos de botões:
<Window>
<View
direction="column"
align="center"
justify="center"
marginTop="large"
>
<View
align="center"
justify="center"
width="780px"
backgroundColor="neutral-300"
padding="large"
borderRadius="small"
shadow="level-2"
direction="column"
>
<Text fontSize="medium" textAlign="center">
Exemplo do componente [b]Button[/b]
</Text>
<View
margin="small"
width="500px"
direction="column"
justify="center"
>
<Text fontSize="medium">[b]Primary:[/b]</Text>
<View
marginBottom="extra-large"
marginTop="extra-small"
justify="around"
>
<Button onClick={() => console.log("click")} label="Button" />
<Button
onClick={() => console.log("click")}
label="Button"
disabled
/>
</View>
<Text fontSize="medium">[b]Secondary:[/b]</Text>
<View
marginBottom="extra-large"
marginTop="extra-small"
justify="around"
>
<Button
variant="secondary"
label="Button Secondary"
onClick={() => console.log("click")}
/>
<Button
variant="secondary"
label="Button Secondary"
onClick={() => console.log("click")}
disabled
/>
</View>
<Text fontSize="medium">[b]Global:[/b]</Text>
<View
marginBottom="extra-large"
marginTop="extra-small"
justify="around"
>
<Button
variant="global"
label="Button Global"
onClick={() => console.log("click")}
/>
<Button
variant="global"
label="Button Global"
onClick={() => console.log("click")}
disabled
/>
</View>
<Text fontSize="medium">[b]Text:[/b]</Text>
<View
marginBottom="extra-large"
marginTop="extra-small"
justify="around"
>
<Button
variant="text"
label="Button Text"
onClick={() => console.log("click")}
/>
<Button
variant="text"
label="Button Text"
onClick={() => console.log("click")}
disabled
/>
</View>
<Text fontSize="medium">[b]Danger:[/b]</Text>
<View
marginBottom="extra-large"
marginTop="extra-small"
justify="around"
>
<Button
variant="danger"
label="Button Secondary"
onClick={() => console.log("click")}
/>
<Button
variant="danger"
label="Button Secondary"
onClick={() => console.log("click")}
disabled
/>
</View>
</View>
</View>
</View>
</Window>
Carousel
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente auxiliar para mostrar conteúdos dentro de um carrossel. Os conteúdos podem ser qualquer estrutura de componente (View, Banner, Card) propriedades.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
Defina uma lista de componentes a serem exibidos, nesse caso colocamos o Text, mas você pode inserir qualquer componente.
<Carousel autoplay>
<Text>Slide 1</Text>
<Text>Slide 2</Text>
</Carousel>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
bullets | Mostrar indicadores de ponto | Boolean | true | não |
speed | Velocidade de animação de slide / fade em milisegundos | Number | 5000 | não |
autoplay | Define que os slides passem de forma automática. | Boolean | false | não |
slidePosition | Nessa propriedade você pode passar a posição em que o slide deve ser renderizado inicilamente, onde 0 significa a primeira posição. | Number | 0 | não |
lastSlide | Função que retorna true sempre que o último slide estiver sendo exibido. | Function | null | não |
firstSlide | Função que retorna true quando o primeiro slide estiver sendo exibido. | Function | null | não |
currentSlide | Função que retorna o index do slide que está sendo exibido. | Function | null | não |
Chart
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
O grupo de componentes Chart permitem exibir alguns tipos de dados plotados na tela.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Chart.Bar
Utilizado para mostrar dados em um gráfico de barras.
Exemplo
Utilização
state = {
labels: ['Janeiro', 'Fevereiro', 'Março','Abril', 'Maio', 'Junho'],
dataOptions:[
{
label:"Prata",
data: [10, 20, 30, 40, 30, 15],
color: '#c0c0c0',
},
{
label:"Ouro",
data: [90, 70, 30, 30, 40, 80],
color :'#ffd700'
},
],
}
<Chart.Bar
data={this.state.dataOptions}
labels={this.state.labels}
title="Gráfico em Barra"
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
labels | Array de textos que conceberão as propriedades do gráfico . | String[] | null | sim |
data | Array do tipo DataBar que vai definir os valores, cores das barras do gráfico | DataBar[] | null | sim |
title | Título do gráfico | String | null | não |
position | Posição do título no gráfico | String | null | não |
Chart.Line
Utilizado para a exibição de dados em um gráfico de linhas.
Exemplo
Utilização
state= {
labels: ['Janeiro', 'Fevereiro', 'Março','Abril', 'Maio', 'Junho'],
dataOptions:[
{
label:"Prata",
data: [7, 2, 6,10,100,4],
lineColor: 'blue',
color: 'blue'
},
{
label:"Ouro",
data: [10, 20, 10, 40,10,10],
lineColor: 'orange',
color: 'orange'
},
],
}
<Chart.Line
data={this.state.dataOptions}
labels={this.state.labels}
title="Gráfico em Linha"
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
labels | Array de textos que conceberão as propriedades do gráfico. | String[] | null | sim |
data | Array do tipo DataLine que vai definir os valores, cores das linhas no gráfico | DataLine[] | null | sim |
title | Título do gráfico | String | null | não |
position | Posição do título no gráfico | String | null | não |
Chart.Pie
Utilizado para mostrar dados em formato de gráfico de pizza.
Exemplo
Utilização
state= {
labels:['Javascript', 'Java', 'Typescript'],
dataPieOptions:{
label: 'Linguagens de programação',
data: [120, 60, 80],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 206, 86)',
],
borderColor: [
'#444',
'#444',
'#444',
],
borderWidth: 1,
}
}
<Chart.Pie
data={this.state.dataPieOptions}
labels={this.state.labels}
title='Gráfico Pie'
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
labels | Array de textos que conceberão as propriedades do gráfico. | String[] | null | sim |
data | Objeto do tipo DataPue que vai definir os valores e cores das das partes do gráfico | DataPie | null | sim |
Checkbox
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Caixa de seleção que permite que o usuário selecione um ou mais itens de um conjunto.
Exemplo
Utilização
state = {
checked: false
};
<Checkbox
dataCy='checkbox-test'
id='3124129'
value='teste'
checked={this.state.checked}
onChange={e => {
this.setState({ checked: e.checked });
}}
>
Seu texto
</Checkbox>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
checked | Define o estado do checkbox | boolean | false | Sim |
onChange | Função que retorna o estado e o value | function | null | Sim |
value | Define o valor para o checkbox | string | null | Não |
disabled | Desabilita o checkbox | boolean | false | Não |
id | Passa um id para o componente | number | aleatório | Não |
group | Recebe um array com os estados de outros checkbox para controle do componente que recebe a propriedade 'group' | array | null | Não |
Chip
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Exemplo
Utilização
state = {
data: [
{
id: 1,
label: 'label 1',
value: 'chip-7',
},
{
id: 2,
label: 'label 2',
value: 'chip-8',
icon: '',
},
{
id: 3,
label: 'label 3',
value: 'chip-9',
icon: '',
},
],
};
<Window>
<View>
<Text textAlign='center' fontSize='lg'>
Chip
</Text>
</View>
<View padding='nano'>
<View
marginBottom='quark'
flexWrap='wrap'
padding='quark'
backgroundColor='none'>
<View margin='quark' width='auto'>
<Chip
value='chip-1'
icon='feedback-success'
label='Label'
onChange={(e) => console.log(e)}
/>
</View>
<View margin='quark' width='auto'>
<Chip label='Label' value='chip-2' />
</View>
<View margin='quark' width='auto'>
<Chip label='Label' value='chip-3' />
</View>
</View>
<View flexWrap='wrap' padding='quark' backgroundColor='secondary'>
{this.state.data.map((item, index) => {
return (
<View key={index} margin='quark' width='auto'>
<Chip
icon={item.icon}
label={item.label}
value={item.value}
index={index}
data={this.state.data}
onChange={(e) => console.log(e)}
dataChange={(e) => this.setState({ data: e })}
/>
</View>
);
})}
</View>
</View>
</Window>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
icon | Ícone a ser exibido do lado esquerdo do label. Recebe um token da lista de icones que pode ser encontrado aqui | String | none | não |
label | Texto a ser renderizado no componente | String | none | sim |
active | Ativa o componente selecionado | Boolean | false | não |
disabled | Desabilita o componente | Boolean | false | não |
value | Valor do componente | String | none | sim |
onChange | Retorna o value do componente |
CurrencyInput
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Exibe uma entrada de valor monetário na tela.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
<CurrencyInput
maxLength={8}
prefix={€}
value={459}
onChange={value => { ... }}
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
value | Valor inicial que será renderizado no componente. | number | null | Sim |
onChange | Função a ser executada quando o valor é alterado, retornando o valor, | function | null | Sim |
prefix | Prefixo do tipo de moeda utilizada. Padrão é R$ | string | R$ | Não |
maxLength | Quantidade máxima de caracteres. | number | 9 | Não |
disableEdit | Esconde o botão Editar | boolean | false | Não |
disabled | Desabilita o componente. | boolean | false | Não |
flat | Altera a aparência do componente para uma versão mais simples. | boolean | false | Não |
color | Modifica a cor do CurrencyInput. | string | 'primary' | Não |
DataTable
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Insere um datatable para exibição de dados
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Componente feito apartir de da biblioteca react-data-table-component.
Documentação da Biblioteca: https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--page
Exemplo
Utilização
<View>
<DataTable
title="Exemplo de DataTable"
data={this.state.data}
columns={this.state.columns}
/>
</View>
DatePicker
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente usado para seleção de data. Essa seleção pode ser aplicada por meio de um input de texto ou selecionando num calendário interativo.
Exemplo
Utilização
<DatePicker
value={new Date()}
onChange={e => this.onDateChange(e)}
placeholder="Data de Nascimento"
minDate={new Date(1930, 0, 1)}
maxDate={new Date(2022, 11, 18)}
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
value | Recebe uma data inicial. É usado para atualizar a data do componente. | Date | null | Sim |
onChange | Função a ser executada quando a data é alterada, pelo input ou pelo calendário | Function | null | Sim |
minDate | Determina a menor data possível. | Date | null | Não |
maxDate | Determina a maior data possível. | Date | null | Não |
locale | Determina a localização para formato da data. | string | "pt-br" | Não |
placeholder | Determina o texto de placeholder do componente. | boolean | false | Não |
disabled | Desabilita o componente. | boolean | false | Não |
hint | Adiciona um texto alternativo ao componente. | string | null | Não |
error | Altera o componente para uma cor de aviso. | boolean | false | Não |
Grid
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Utilize este componente em conjunto com o Col
para organização de elementos.
Exemplo
Utilização
<View>
<Grid>
<Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
<View backgroundColor="negative-300">
<Text>Coluna 1</Text>
</View>
</Col>
<Col columnSize={{ sm: 12, md: "hidden", lg: 3 }}>
<View backgroundColor="positive-300">
<Text>Coluna 2</Text>
</View>
</Col>
<Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
<View backgroundColor="warning-700">
<Text>Coluna 3</Text>
</View>
</Col>
<Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
<View backgroundColor="support-01">
<Text>Coluna 4</Text>
</View>
</Col>
</Grid>
</View>
Como visto do exemplo acima, o componente Col
, é usado como children do componente Grid
para determinar cada coluna do grid.
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
noGap | Tira o espaçamento entre as colunas | boolean | false |
Propriedades Col
Propriedade | Descrição | Type | Default |
---|---|---|---|
columnSize | Recebe um objeto contendo os 3 break-points e seus respectivos valores. Os valores representam quantas colunas, num total de 12, o elemento vai ocupar. Existe ainda a opção de usar "hidden" para o valor caso queira esconder a coluna em um determinado break point. Ex: {sm: 12, md: 6, lg: 3} | object | false |
Hint
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente para exibir alertas em formulários
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
<Hint
status='success'
text='Retorno de sucesso'
show={true}
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
type | Define qual será o estilo do Hint, as propriedades são 'success', 'warning' e 'error' | string | null | Não |
show | Parâmetro que define se o Hint será exibido ou não | boolean | false | não |
Icon
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente que exibe um Ícone.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
<Icon icon="ame-outline"/>
<Icon icon="ame-outline"/>
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
icon | Carrega ícones de acordo com o token recebido. | number | ame-outline |
colorIcon | Define a cor do ícone. Veja os valores | boolean | neutral-500 |
width | Define a largura do ícone, pode ser usado em porcentagem ou pixels | string | 33px |
height | Define a altura do ícone, pode ser usado em porcentagem ou pixels | string | auto |
Segue abaixo a lista de ícones:
- accounts-outline
- accounts-solid
- adress-outline
- adress-solid
- agenda-outline
- agenda-solid
- alert-outline
- alert-solid
- ame-banking
- ame-outline
- ame-solid
- attach
- bank-outline
- bank-solid
- bar-code
- barbecue-outline
- barbecue-solid
- bell-notification-outline
- bell-notification-solid
- bestcb
- best-deals-outline
- bikeitau
- bus-outline
- bus-solid
- cabify
- caixa
- calendar-outline
- calendar-solid
- camera-outline
- camera-solid
- card-ame-outline
- card-ame-solid
- carimbo
- cart-outline
- cart-solid
- cashback
- cat
- chat-mail-outline
- chat-mail-solid
- chat-message-outline
- chat-message-solid
- chat-sms-outline
- chat-sms-solid
- chat-whatsapp-outline
- chat-whatsapp-solid
- cinema-outline
- cinema-solid
- clock-outline
- clock-solid
- close
- clothing-tshirt-outline
- clothing-tshirt-solid
- colapse
- configuration-outline
- configuration-solid
- conversion
- copy-outline
- copy-solid
- cracha
- credit-card-ame
- credit-card-outline
- credit-card-solid
- cupom-outline
- cupom-solid
- curiosities-outline
- curiosities-solid
- dashboard-outline
- dashboard-solid
- delivery-outline
- delivery-solid
- deposit-outline
- deposit-solid
- deslike-no-outline
- deslike-no-solid
- details
- diarista-outline
- diarista-solid
- divide
- documents-cpf
- documents-id-outline
- documents-id-solid
- donation-art
- donation-autonomous
- donation-communities
- donation-coronavirus
- donation-environement
- donation-fomezero
- donation-girlpower
- donation-healthcare
- donation-kids
- donation-planet
- donation-rainbow
- donation-sambarj
- donation-sambasalvador
- donation-sambasp
- donation-seniors
- donations-education
- donations
- down
- drconsulta
- edit-outline
- edit-solid
- electrician
- emprestimo-loan-outline
- emprestimo-loan-solid
- emprestimopj-loan
- ensure
- equal
- events-outline
- events-solid
- expand
- extended-warranty
- extrato-outline
- extrato-solid
- eye-hide
- eye-show
- faces-et-outline
- faces-happy-outline
- faces-happy-solid
- faces-medium
- faces-normal-outline
- faces-normal-solid
- faces-sad-outline
- faces-sad-solid
- faces-veryhappy
- fav-outline
- fav-solid
- feature-bazar-outline
- feature-bazar-solid
- feature-br-petrobras
- feature-news
- feature-scanandgo
- feature-shell-box
- feature-taggy
- feature-voucher-future
- feedback-error
- feedback-success
- filter-outline
- filter-solid
- fire
- flash-active
- flash-disabled
- food-convenience
- gamerzone
- games-outline
- games-solid
- general-services-outline
- general-services-solid
- ghost
- gift-card-outline
- gift-card-solid
- gift-outline
- gift-solid
- glutenfree
- gym-outline
- gym-solid
- hand-easy
- hands
- handshake
- health-outline
- health-solid
- heart-outline
- heart-solid
- help-outline
- help-solid
- home-outline
- home-solid
- house-outline
- house-solid
- image-album-outline
- image-album-solid
- image-outline
- image-solid
- incoming
- insurances
- investments
- keyboard-numbers-outline
- keyboard-numbers-solid
- lamp-outline
- lamp-solid
- lavanderia
- lazer-recreation-outline
- lazer-recreation-solid
- left-previous
- like-ok-outline
- like-ok-solid
- limit
- list-items-outline
- list-items-solid
- loan-consignado
- location-outline
- location-solid
- logo-autentic
- map-outline
- map-solid
- market-bag-outline
- market-bag-solid
- menu-plus-collapse
- menu-plus-expand
- mini-games
- mirror-beuty-outline
- mirror-beuty-solid
- mobile-chip
- mobile-outline
- mobile-solid
- mobile-plan
- money-balance
- money-card-outline
- money-card-solid
- money-outline
- money-solid
- montador-outline
- montador-solid
- movimentar-extrato-statement
- multiply
- natal
- new-card-segunda-via
- newness-outline
- newness-solid
- padlock-lock-outline
- padlock-lock-solid
- padlock-open-outline
- padlock-open-solid
- parking-outline
- parking-solid
- pet-m-outline
- pet-m-solid
- pet-p-outline
- pet-p-solid
- pet-xl-outline
- pet-xl-solid
- pets-outline
- pets-solid
- phishing
- phone-outline
- phone-solid
- pix
- pixkey
- play
- plumber-outline
- plumber-solid
- poup-pig
- pricing-outline
- pricing-solid
- profile-outline
- profile-solid
- qrcode
- randomkey
- receipt-outline
- receipt-solid
- recieve
- restaurant-outline
- restaurant-solid
- right-next
- scissor-cut-outline
- scissor-cut-solid
- search
- selfie-outline
- selfie-solid
- send-money
- send-outline
- send-solid
- serralheiro-outline
- serralheiro-solid
- services-outline
- services-solid
- share-outline
- share-solid
- spotify
- store-outline
- store-solid
- subtract
- sum
- taxes
- taxes-money
- teams-outline
- teams-solid
- tech-outline
- tech-solid
- tecnico-Informatica-outline
- tecnico-Informatica-solid
- telemedicin
- teste-covid
- thief
- ticket-outline
- ticket-solid
- tickets-outline
- tickets-solid
- tools-outline
- tools-solid
- transactions-outline
- transactions-solid
- transfer-outline
- transfer-solid
- transport-card
- transports
- trash-outline
- trash-solid
- trip-plane
- turn-camera-outline
- turn-camera-solid
- uber
- uber-eats
- ultragaz
- up
- vakinha
- valueqr
- vegan
- velocimeter
- virtual-card-ame-outline
- virtual-card-ame-solid
- wallet-outline
- wallet-solid
- wdental
- withdraw-retirar-outline
- withdraw-retirar-solid
- work-outline
- work-solid
Image
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
O Componente Image pode carregar tanto ícones padrões da Ame quanto imagens para compor os seus layouts
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
<Image src="<link_da_imagem>" alt="Uma Imagem" />
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
src | Carrega a imagem tanto de require quanto com url | string, function | null |
cover | Essa propriedade deixa a imagem com object-fill cover | boolean | false |
width | Define a largura da imagem, pode ser usado em porcentagem ou pixels | string | 100% |
height | Define a altura da imagem, pode ser usado em porcentagem ou pixels | string | auto |
alt | Insere um alt na imagem | string | null |
bordeRadius | Insere o borderRadius no componente | string | none |
InfiniteScroll
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente focado em perfomance.
Exemplo
Utilização
state = {
maxValue: 16,
teams: teamsWordCup,
}
onEndReach = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
this.setState({
maxValue: 32,
})
resolve()
}, 3000)
})
}
<Window>
<InfiniteScroll
onEndReach={this.onEndReach}
endOffset={50}>
{this.state.teams.map(
(team, index) =>
index <= this.state.maxValue && (
<CardImage
key={team.name}
onPress={() => console.log("press")}
image="https://static.vecteezy.com/system/resources/previews/008/785/472/original/fifa-world-cup-qatar-2022-official-logo-mondial-champion-symbol-design-abstract-illustration-free-vector.jpg"
title={team.name}
description={team.country}
/>
),
)}
</InfiniteScroll>
</Window>
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
onEndReach | Função que carrega ao chegar no bottom da div | Promise, function | null |
endOffset | Número em pixels para ativação do onEndReach antes do bottom | number | 0 |
children | Conteúdo dentro do InfiniteScroll | ReactNode | null |
disabled | Desabilita o componente | boolean | false |
Input
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Insere um campo para inserção de dados.
Exemplo
Utilização
<View>
<Input
placeholder="Digite seu nome:"
value={this.state.inpuPadrao}
onChange={e => this.setState({ inputPadrao: e })}
/>
</View>
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
type | Define o tipo do campo input. as opções são: "text", "number", "password", "email", "file", "search". | string | text |
value | Define o valor do campo. | any | null |
placeholder | Texto descritivo dentro do input. | string | null |
onChange | Função a ser executada quando o valor é alterado. | function | null |
rightIcon | Token do ícone a ser exibido no lado direito do Input. Veja aqui a lista de icones. | string | null |
clickRightIcon | Função a ser executada quando tocar no ícone do lado direito. | function | null |
id | Atribuiu um id ao input. | string | null |
mask | Indica que o conteúdo do input deverá ser formatado de acordo com uma máscara. Pode ser usado um array de masks para mudança dinâmica. | string | null |
disabled | Desabilita o campo. | boolean | false |
autoFocus | Atribui foco automatico ao Input quando a página for carregada. | boolean | false |
onBlur | Executa uma função assim que o Input perde o foco. | function | null |
accept | Define o tipo de arquivo que será aceito no Input. Pode ser usado apenas com o type='file'. | string | null |
status | Muda a cor da borda e hint de acordo com o status enviado. opções: "positive", "negative". | string | null |
multiline | Se ativo define um input estilo text area. | boolean | null |
hint | Pequeno texto auxiliar. | string | null |
onSubmit | Função executada ao usuário prescionar a tecla 'Enter' durante o uso do componente Input. | function | null |
Exemplos
No exemplo a seguir o componente Input é usado com o 'type="password"', com isso é gerado automáticamente o ícone de visibilidade do campo, que é alterado quando clicado:
<View>
<Input
placeholder="Digite a sua senha"
value={this.state.inputPassword}
onChange={e => this.setState({ inputPassword: e })}
type="password"
hint="Escolha uma senha segura"
/>
</View>
Observação Ao definir o type como 'password' ou 'search', o icone é pré-definido, não podendo ser usado junto com a propriedade 'rightIcon'
Label
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente select para seleção de itens
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
<Label
text='Exemplo do [u]label[/u]'
htmlFor='inputName'>
Exemplo do [u]label[/u]
</Label>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
htmlFor | Define a qual elemento de form, através do id, o Label está atrelado. |
string | null | Não |
color | Define a cor do texto. Veja os valores | string | "neutral-900" | Não |
Map
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente utilizado para a exibir a localização no mapa, a partir da API do Google Map.
Documentação da API: https://developers.google.com/maps/documentation/javascript/overview
Exemplo
Utilização
<Map
apiKey={'GOOGLE_API_KEY'}
mapOptions={{
center: {
lat: -22.94980821,
lng: -43.19095194,
},
zoom: 12,
}}
getMap={(map, markers) => {
this.setState({ map, markers });
}}
onMarkerPress={marker => {
let info = new window.google.maps.InfoWindow({
content: 'teste',
});
info.open(this.state.map, marker);
}}
markers={[
{
lat: -22.970722,
lng: -43.182365,
options: {
title: 'Copacabana',
clickable: false,
icon:
'https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png',
},
},
{
lat: -22.9511,
lng: -43.1809,
options: {
title: 'Botafogo',
draggable: true,
},
},
]}
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
apiKey | Chave de Api String fornecida pelo Google para a exibição de um Mapa. | String | null | true |
mapOptions | Aqui vão, obrigatoriamente em formato de objeto, todas as opções para a criação do mapa, como: center, zoom, disableDefaultUI... | Object | null | false |
getMap | Função a ser executada que recebe como parametro o mapa criado via props na construção do mapa. Use-a para armazenar o mapa em um estado para usa-lo se necessario no google map. | Function | null | false |
height | Define a altura do mapa. As informações principai necessárias para a criação de um Marker são lat: (latitude) e lng: (longitude), porem, em options, você pode colocar todas as opções que desejar para o marker, como title, clickable e draggable. | Number | 100vh | false |
markers | Lista de Pins no mapa. | Array | null | false |
onMarkerPress | Ação de clique em cada marker. Recebe como parametro da função um objeto marker. Tem como valor o marker que está sendo pressionado, para ser utilizado em funções que o requeira. | Function | null | false |
Modal
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente que renderiza um modal no meio da tela ou a partir do bottom.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
<Modal
show={showModal}
position={position}
closeModalCallback={this.closeModal}
>
<Text>Lorem ipsum ....</Text>
</Modal>
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
show | Essa propriedade recebe true ou false e controla a visibilidade do modal. | boolean | false |
position | Position pode receber as strings bottom ou center (Veja nos exemplos no fim da página as diferenças entre eles). | string | center |
closeModalCallback | Essa propriedade chama a função que muda o status presente em show, ela é acionada quando clica fora do modal. | function | null |
pressOutCloseModal | Essa propriedade impede que a Modal feche caso clique fora do conteúdo | function | null |
Exemplos
Modal com
import img from '../../assets/images/image_example.jpg';
state = {
showModal: false,
position: 'center',
};
closeModal = () => {
this.setState({
showModal: false,
});
};
openModal = position => {
this.setState({
showModal: true,
position: position,
});
};
<Modal
show={showModal}
position={position}
closeModalCallback={this.closeModal}>
<Image height={200} src={img} />
<Text>Lorem ipsum dolor sit amet</Text>
<View padding='nano'>
<Button onPress={() => console.log('Continuar')}>Continuar</Button>
</View>
<View padding='nano'>
<Button variant='secondary' onPress={() => this.closeModal()}>
Cancelar
</Button>
</View>
</Modal>
Pagination
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente de paginação. A renderização do conteúdo de cada página fica a cargo do desenvolvedor.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Utilização
<Pagination
currentPage={1}
pages={10}
onClick={page => console.log(page)}
showFirstButton
showLastButton
pageRange={10}
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
pages | Informa o número de páginas. | number | null | sim |
currentPage | Informa o número da página corrente. | number | null | sim |
onClick | Função que será chamada ao clicar em um dos botões do paginador, o número da página é enviado como argumento da função. | function | null | sim |
showFirstButton | Mostrar o botão “ir para primeira página". | boolean | false | não |
showlastButton | Mostrar o botão “ir para última página". | boolean | false | não |
disabled | Desabilita o paginador. | boolean | false | não |
pageRange | Define quantos botões o paginador deve mostrar. | number | 5 | não |
Exemplos
Modal com
state = {
pages: 10,
currentPage: 1,
pagesContent: [
{ colorPage: "primary", textPage: "Primary color" },
{ colorPage: "secondary", textPage: "Secondary color" },
{ colorPage: "neutral-500", textPage: "Neutral 500 color" },
{ colorPage: "primary-700", textPage: "Primary 700 color" },
{ colorPage: "secondary-700", textPage: "Secondary 700 color" },
{ colorPage: "positive-700", textPage: "Positive 700 color" },
{ colorPage: "warning-700", textPage: "Warning 700 color" },
{ colorPage: "negative-700", textPage: "Negative 700 color" },
{ colorPage: "support-01", textPage: "Support 01 color" },
{ colorPage: "support-03", textPage: "Support 02 color" },
],
}
<View
direction="column"
align="center"
justify="center">
<View
width="80%"
height="320px"
align="center"
justify="center"
backgroundColor={
this.state.pagesContent[this.state.currentPage - 1].colorPage
}>
{this.state.pagesContent[this.state.currentPage - 1].textPage}
</View>
<View height="16px" />
<Pagination
currentPage={this.state.currentPage}
pages={this.state.pages}
onClick={page => this.setState({ currentPage: page })}
showFirstButton
showLastButton
/>
</View>
ProgressIndicator
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente para visualização de transição de elementos/telas através de bullets animados.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
<View>
<ProgressIndicator
returnSelected={index => console.log(index)}
bullets={this.state.bullets}
selected={this.state.selected}
/>
</View>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
bullets | Define quantos bullets irão aparecer | number | 3 | Sim |
returnSelected | Retorna qual o bullet ativo | function | null | Não |
selected | Define qual é o bullet default na renderização do componente | number | 1 | Não |
QRCode
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Utilize este componente para mostrar um QRCode na tela.
Utilização
<QRCode value="Meu valor do QRCode" />
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
value | Valor contido no QRCode | string | null |
size | Tamanho do QRCode | number | null |
Radio
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
O Radio é usado para seleções únicas, onde somente uma opção pode ser selecionada
Exemplo
Utilização
<Radio
name='primary'
value='primary1'
id='primary'
checked={this.state.valueRadioSelected}
onChange={value => {
this.selectValue(value);
}}
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
name | Define o name do radio | string | null | Sim |
checked | Aqui é passado qual o value selecionado | string | null | Sim |
onChange | Função que retorna o value | function | null | Sim |
value | Define o valor para o radio | string | null | Sim |
disabled | Desabilita o radio | boolean | false | Não |
id | Passa um id para o componente | number | aleatório | Não |
SegmentedControl
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente de tab que recebe diversas propriedades
Exemplo
Utilização
state = {
tabIndex: 0,
tabs: [
{
title: "Anual",
valor: "R$ [b][color=primary]75,90[/color][/b]",
},
{
title: "Semestral",
valor: "R$ [b][color=primary]89,90[/color][/b]",
},
{
title: "Mensal",
valor: "R$ [b][color=primary]109,90[/color][/b]",
},
],
};
<Window>
<View
margin="large"
width="auto">
<SegmentedControl
activeTab={this.state.tabIndex}
onChange={this.handleTabChange}
items={[
{ title: this.state.tabs[0].title },
{ title: this.state.tabs[1].title },
{ title: this.state.tabs[2].title },
]}
/>
<View
width="312px"
backgroundColor="neutral-300"
paddingBottom="big"
paddingTop="big"
borderRadius="small"
borderWidth="thin"
borderTopWidth="none"
borderColor="primary-700"
justify="center">
<Text
textAlign="center"
fontSize="large">
{this.state.tabs[this.state.tabIndex].valor}
<Text fontSize="nano">/Mês</Text>
</Text>
</View>
</View>
</Window>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
activeTab | Define qual aba começará ativa | Number | 0 | não |
onChange | Função de mudança na aba | Function | null | sim |
disabled | Desabilita o componente | Boolean | false | não |
items | Recebe um array de objetos que definirá o título da aba | Array | null | sim |
OBS: A parte da renderização do conteúdo ficará a cargo do desenvolvedor.
Select
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente select para seleção de itens
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
state = {
selected: '',
};
options = [
{
label: 'teste 1',
value: 'teste 1',
},
{
label: 'teste 2',
value: 'teste 2',
},
{
label: 'teste 3',
value: 'teste 3',
},
{
label: 'teste 4',
value: 'teste 4',
},
{
label: 'teste 5',
value: 'teste 5',
},
{
label: 'teste 6',
value: 'teste 6',
},
];
<Select
label='Label do select'
placeholder='Selecione Aqui'
keySelectLabel='label'
options={this.options}
value={this.state.selected}
onChange={e => this.setState({ selected: e })}
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
options | Array de objetos contendo valores de label e value . |
array | null | Sim |
value | Valor que pode ser passado para iniciar o componente. Recebe objeto com {value: 'string', label: 'string'} | objeto | null | Sim |
keySelectLabel | Indica se o valor informado como value e o retorno da função OnChange é o label ou o `value do objeto. |
string | label | Não |
disabled | Desabilita o componente. | boolean | false | Não |
onChange | Função a ser executada quando selecionar valor, deve alimentar o estado do value . |
function | null | Sim |
placeholder | Texto descritivo dentro do Select caso o value inicial seja vazio. | string | null | Não |
inputValue | Valor do inicial do Input. Recebe objeto com {value: 'string', label: 'string'} | objeto | null | Não |
hint | Define um hint para o select | string | null | Não |
status | Define um status. Pode receber 'positive' ou 'negative' | string | null | Não |
Slider
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente utilizado para seleção de valor através de um slider range.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
<Slider
minAmount={0}
maxAmount={10000}
value={200000}
onChange={(value) => {
setValue(value)
}}
/>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
monetary | Define se os valores do componente será monetário (ex: 150,00) ou number (ex: 150) | Boolean | true | false |
minAmount | Valor mínimo para seleção. Se a prop monetary for true, deve ser acrescentado 00 ao final do número. (ex: 15000 => 150,00) | Number | 0 | false |
maxAmount | Valor máximo para seleção. Se a prop monetary for true, deve ser acrescentado 00 ao final do número. (ex: 700000 => 7000,00) | Number | 7500 | false |
value | Valor inicial que será renderizado no componente. | Number | null | false |
onChange | Função que será executada quando o valor for alterado. | Function | undefined | true |
step | Quantidade que será incrementada ou decrementada no value ao alterar o slider. (Ex: se o valor desta prop for 5, a alteração será de 5 em 5) | Number | 100 | false |
disabled | Desabilita a interação com o componente. | Boolean | false | false |
infoLabel | Indica se os labels laterais serão representados pelos values de min e max, ou por icones. opções: "value" ou "icon" | string | value | false |
leftIcon | Quando infoLabel="icon", renderiza um icone na esquerda do componente. Recebe um token da lista de icones que pode ser encontrado aqui | string | null | false |
rightIcon | Quando infoLabel="icon", renderiza um icone na direitoa do componente. Recebe um token da lista de icones que pode ser encontrado aqui | string | null | false |
label | Habilita a renderoização de um label acima do knobe do slider representando o valor selecionado | boolean | false | false |
Outros exemplos
Abaixo, alguns exemplos usando o Slider:
<Window>
<Slider
monetary
minAmount={20000}
maxAmount={700000}
value={200000}
step={20000}
onChange={value => {
setValueMonetary(value);
}}
/>
Status
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente de status que recebe diversas propriedades
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
state = {
inputValue: "",
statusText: "",
showStatus: false,
typeStatus: "",
};
getInputValue = (text) => {
this.setState({ inputValue: text });
if (text.length < 8) {
this.setState({ statusText: "Recusado" });
this.setState({ showStatus: true });
this.setState({ typeStatus: "error" });
} else if (text.length > 13) {
this.setState({ statusText: "Em validação" });
this.setState({ typeStatus: "warning" });
} else {
this.setState({ statusText: "Validado" });
this.setState({ typeStatus: "success" });
}
};
<Window>
<View marginTop="small">
<View direction="row">
<Text>Contrato social</Text>
<Status show={this.state.showStatus} type={this.state.typeStatus}>
{this.state.statusText}
</Status>
</View>
<Input
placeholder="Teste Status"
value={this.state.inputValue}
onChange={(e) => this.getInputValue(e)}
/>
</View>
</Window>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
show | Exibe o status | boolean | false | Não |
type | Tipo do status. 'positive', 'warning' ou 'negative' | string | 'negative' | Não |
theme | Tema do status | string | '700 | Não |
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
hint | Recebr um objeto do tipo hint com suas definições | HintProps | none | não |
status | Recebe um objeto do tipo status com suas definições | StatusProps | primary | não |
label | Texto a ser renderizado no componente | string | none | sim |
info | Info | string | false | não |
disabled | Desabilita o componente | boolean | false | não |
Text
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente de texto que recebe diversas propriedades
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade.
Exemplo
Utilização
<View>
<Text>
Componente Text
</Text>
</View>
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
fontSize | Define o tamanho da font. Veja os valores | string | xxs |
fontWeight | Define o peso da font. Veja os valores | string | regular |
lineHeight | Define a altura da linha font. Veja os valores | string | medium |
textAlign | Define o alimanhento do texto. Veja os valores | string | left |
selectable | Define se o texto será selecionavel. | boolean | false |
truncate | Define uma quantidade de linhas para mostrar o texto. Ao fim dessas linhas, caso tenha mais textos, será acresentado '...'. | number | null |
color | Define a cor do texto. Veja os valores | string | neutracolor-brand-darkest |
target | Define um estilo para o texto pré determinado. Veja os valores | string | null |
Toggle
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente para escolhas com retorno true e false.
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
state = {
checked: false
}
<Toggle
checked={this.state.checked}
value="teste"
onChange={(e) => this.setState({ checked: e.state })}
/>
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
checked | Define se o Toggle está ou não ativo | boolean | false |
disabled | Desabilita o componente | boolean | false |
value | Valor atribuído ao componente | string | null |
id | Atribui um id ao Toggle | string | null |
onChange | Função que retorna o estado do componente. | function | null |
Outros exemplos
Abaixo um exemplo do toggle sendo usado em aceite de termos e etc.
state = {
checked: false
}
<View align="center">
<Toggle
checked={this.state.checked}
value="teste"
onChange={(e) => this.setState({ checked: e.state })}
/>
<View paddingLeft="nano">
<Text>
Aceito os{' '}
<Text onClick={() => console.log('clique')}>termos de uso</Text>
</Text>
</View>
</View>
Tooltip
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente focado em acessibilidade.
Exemplo
Utilização
<Text>
Lorem Ipsum is{` `}
<Tooltip
label="Olá eu sou o Tooltip"
position="bottom">
<Text>[b]simply[/b]</Text>
</Tooltip>
{` `}
dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsu
</Text>
Propriedades
| Propriedade | Descrição | Type | Default |
| ----------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------- |
| showArrow | Define se a flecha indicadora aparecerá | boolean | false |
| position | Define a posição onde ficará o Tooltip | string | bottom |
| label | Define o que estará escrito dentro do Tooltip | string | null |
Touchable
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Envolva um componente com Touchable para que ele passe a ter interação.
Exemplo
Utilização
<Touchable onClick={() => {console.log('Clicado!')}}>
<Text>Agora sou clicável</Text>
</Touchable>
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
onPress | Função que será chamada ao tocar no componente. | function | null |
disabledOnPress | Função que será chamada caso o Touchable esteja desabilitado. | function | null |
disabled | Desabilita o componente | boolean | false |
width | Define a largura do componente | string | null |
height | Define a altura do componente | string | null |
ValueInput
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Use o ValueInput para entradas de valores numéricos
Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.
Exemplo
Utilização
state = {
valueInteger: 10,
};
<Window>
<View>
<ValueInput
value={this.state.valueInteger}
onChange={(v) =>
this.setState({ valueInteger: v }, console.log(v))
}
/>
</View>
</Window>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
value | Valor inicial que será renderizado no componente. | number | null | Sim |
valueType | Tipo do valor 'integer', 'decimal' ou 'currency' | number | 'integer' | Sim |
onChange | Função a ser executada quando o valor é alterado, retornando o valor, | function | null | Sim |
prefix | Propriedade responsável por definir um prefixo no valor. | string | null | Não |
suffix | Acrescenta um sufixo após o valor. | string | null | Não |
maxLength | Quantidade máxima de caracteres. | number | 9 | Não |
disableEdit | Esconde o botão Editar | boolean | false | Não |
disabled | Desabilita o componente. | boolean | false | Não |
flat | Altera a aparência do componente para uma versão mais simples. | boolean | false | Não |
Video
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente para renderização de vídeo.
Exemplo
Utilização
<Video source="https://s3.amazonaws.com/calindra.com.br/ame.mp4" />
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
source | Aceita arquivos de vídeo em formato MP4 e player externo como o Vimeo. | string | null | Não |
youtubeId | Aceita o ID de um vídeo do youtubeId. OBS: O ID pode ser encontrado na URL do vídeo apois o caracter '='. | string | null | Não |
width | Define a largura do componente. | string ou number | 100% | Não |
height | Define a altura do componente. | string ou number | 100% | Não |
controls | Permite o usuário controlar a reprodução do vídeo, incluindo volume, navegação, e pausa/continuação da reprodução. | boolean | false | Não |
autoPlay | O vídeo é executado automaticamente. OBS: Funciona apenas com a propriedade source. | boolean | false | Não |
thumbnail | Imagem para a capa do vídeo enquanto não carregado. OBS: Funciona apenas com a propriedade source. | string | null | Não |
muted | Inicia o vídeo mutado. | boolean | false | Não |
Importante: No Android, mesmo a propriedade
autoPlay={true}
, para que o vídeo seja reproduzido automaticamente, é necessário quemuted={true}
View
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Talvez um dos componentes mais úteis para construir telas e recebe diversas propriedades para te ajudar nessa tarefa.
Exemplo
Utilização
<View>
<Text>
Este paragráfo está dentro da view
</Text>
</View>
Propriedades
Propriedade | Descrição | Type | Default |
---|---|---|---|
background | Adiciona uma cor de fundo. Veja os valores | string | null |
border | Adiciona uma borda na View. Veja os valores | string | null |
borderRadius | Define o arredondamento da borda. Veja os valores | string | null |
borderRadiusLeftTop | Define o arredondamento da borda no canto esquerdo superior. Veja os valores | string | null |
borderRadiusRightTop | Define o arredondamento da borda no canto direito superior. Veja os valores | string | null |
borderRadiusLeftBottom | Define o arredondamento da borda no canto esquerdo inferior. Veja os valores | string | null |
borderRadiusRightBottom | Define o arredondamento da borda no canto direito inferior. Veja os valores | string | null |
borderColor | Define qual será a cor da borda. Veja os valores | string | null |
direction | Define qual será a direção do display flex. Veja os valores | string | null |
align | Define qual será o alinhamento vertical do display flex. Veja os valores | string | null |
justify | Define qual sera o alinhamento horizontal do display flex. Veja os valores | string | null |
paddingLeft | Define o padding no lado esquerdo. Veja os valores | string | xxxs |
paddingRight | Define o padding no lado direito. Veja os valores | string | xxxs |
paddingTop | Define o padding em cima. Veja os valores | string | xxxs |
paddingBottom | Define o padding em baixo. Veja os valores | string | xxxs |
paddingX | Define o padding no eixo X. Veja os valores | string | null |
paddingY | Define o padding no eixo Y. Veja os valores | string | null |
margin | Define a margem no eixo X e Y. Veja os valores | string | null |
marginLeft | Define a margem no lado esquerdo. Veja os valores | string | null |
marginRight | Define a margem no lado direito. Veja os valores | string | null |
marginTop | Define a margem em cima. Veja os valores | string | null |
marginBottom | Define a margem em baixo. Veja os valores | string | null |
marginY | Define a margem no eixo Y. Veja os valores | string | null |
marginX | Define a margem no eixo X. Veja os valores | string | null |
width | Define qual será a largura da View em % ou px | string | 100% |
minWidth | Define qual será a largura miníma da View em % ou px | string | 100% |
maxWidth | Define qual será a largura máxima da View em % ou px | string | 100% |
height | Define qual será a altura da View em % ou px | string | auto |
minHeight | Define qual será a altura máxima da View em % ou px | string | auto |
maxHeight | Define qual será a altura máxima da View em % ou px | string | auto |
display | Define qual será o display. Veja os valores | string | block |
flexWrap | Define se os itens são forçados em uma linha ou podem ser agrupados em várias linhas. Veja os valores | string | null |
flexShrink | Define uma redução caso os valores do container ultrapassarem o limite. Veja mais em exemplos | number | null |
FlexGrow | Define um aumento caso os valores do container ultrapassarem o limite. Veja mais em exemplos | number | null |
flexBasis | Define qual será a largura base dos elementos. Seus valores podem ser em %, px ou 'auto' | string | null |
flexNone | Passando essa propriedade a View respeitará o tamanho de width independente do flex | boolean | false |
opacity | Define a opacidade da View. Veja os valores | string | null |
shadow | Aplica niveis de sombra na View. Veja os valores | string | null |
Window
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
É um componente mestre que precisa envolver toda tela. Seu uso é obrigatório e ele deverá ser o primeiro nó de todas as telas. Nunca utilize Window dentro de outro Window.
Você deve usar o componente Window como no exemplo abaixo.
Utilização
<Window>
Todas as outras tags devem ficar aqui dentro
</Window>
Super Componentes
CardNavigation
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente de CardNavigation que recebe diversas propriedades
Exemplo
Utilização
state = {
item: {
title: "Posto BR Itaquaquecetuba",
description: "Vendedor",
rightIcon: "Vendedor",
},
};
<Window>
<View aligin="row" marginBottom="small">
<CardNavigation
leftIcon="ame-outline"
width="469px"
title={this.state.item.title}
description={this.state.item.description}
rightIcon="right-next"></CardNavigation>
</View>
<View aligin="row" marginBottom="small">
<CardNavigation
width="469px"
title={this.state.item.title}
description={this.state.item.description}
rightIcon="right-next"
onClick={() => {
console.log("Segundo card clicado");
}}></CardNavigation>
</View>
<View aligin="row">
<CardNavigation
leftImage={img}
width="469px"
title={this.state.item.title}
description={this.state.item.description}></CardNavigation>
</View>
</Window>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
title | Título do CardNavigation | string | center | não |
width | Largura do card | Boolean | false | não |
description | Descrição do card | string | null | não |
leftIcon | Nome do ícone da na esquerda | string | null | não |
rightIcon | Nome do ícone da na direita | string | null | não |
leftImage | Nome da imagem na esquerda | string | null | não |
description | Descrição do card | string | null | não |
onClick | Função de clique no card | Function | null | não |
FormSelect
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Componente FormSelect que recebe diversas propriedades
Exemplo
Utilização
options = [
{
label: "teste 1",
value: "teste 1",
},
{
label: "teste 2",
value: "teste 2",
},
{
label: "teste 3",
value: "teste 3",
},
{
label: "teste 4",
value: "teste 4",
},
{
label: "teste 5",
value: "teste 5",
},
{
label: "teste 6",
value: "teste 6",
},
];
<Window>
<View padding="large" height="500px">
<Text target="title">FormSelect</Text>
<View marginTop="large">
<FormSelect
label="Label"
options={this.options}
placeholder="Selecione Aqui"
keySelectLabel="label"
onChange={(e) => console.log("selected: ", e)}
/>
</View>
</View>
</Window>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
hint | Recebr um objeto do tipo hint com suas definições | HintProps | none | não |
status | Recebe um objeto do tipo status com suas definições | StatusProps | primary | não |
label | Texto a ser renderizado no componente | string | none | sim |
info | Info | string | false | não |
disabled | Desabilita o componente | boolean | false | não |
List
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Este componente fornece uma lista útil para ser usada como um navegador, exibir produtos ou outras coisas.
Exemplo
Utilização
state = {
ListItems: [{ title: 'Compras' }, { title: 'Saldo' }, { title: 'Extrato' }]
}
goTo = (index) => {
console.log(index)
}
<View padding="sm">
<List items={this.state.ListItems} onItemPress={(i) => this.goTo(i)} />
</View>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
items | Recebe um array de objetos contendo a propriedade title . |
array | null | Sim |
disabled | Desabilita o Componente. | boolean | false | Não |
onIntemPress | Função a ser executada quando um item é clicado. Retorna o index do item no array da propriedade items
|
function | null | Não |
items
Valores aceitos em cada objeto do array. Todos os valores são do tipo string
.
{
title: 'Titulo do item.'
}
TextLink
Modifique esse componente em tempo real pelo Storybook clique aqui
Veja um exemplo desse componente aqui
Executa a função semelhante a um link html. Evite o uso excessivo.
Exemplo
Utilização
O TextLink pode ser usado com o Text, assim você consegue controlar o tamanho da fonte sem precisar passar um parâmetro para o text e outro para o textLink por exemplo.
<Text size='md'>
Um texto qualquer
<TextLink onClick='() => { funcaoClick() }'/> Texto Link </TextLink>
[b]um texto bold[/b]
</Text>
Propriedades
Propriedade | Descrição | Type | Default | Obrigatório |
---|---|---|---|---|
onPress | Recebe uma função para ser executada ao pressionarmos o TextLink | function | null | Sim |