ame-miniapp-components-web
v0.11.0
Published
Biblioteca de componentes para construção de miniapps web
Downloads
14
Keywords
Readme
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 |generated-doc
| 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](..