Ame Mini-App Components Web - Gamma
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 |
|---|---|
| 'nopne' | 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%) |
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 |
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 |
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% |
| height | Define qual será a altura 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 |
| 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>