Grid Next
Import
import { Grid } from '@resultadosdigitais/tangram-components/next'
Properties
children
columns
| Type | number | shape |
|---|---|
| Default | Grid.defaultColumns |
Description
Define o número de colunas do Grid.
Um number aplica o mesmo valor em todos os breakpoints.
Um objeto aplica o valor por breakpoint (sm, md, lg);
breakpoints omitidos herdam o valor do breakpoint anterior.
O valor padrão por breakpoint é sm: 4, md: 6 e lg: 12.
<Grid columns={{ sm: 4, md: 6, lg: 12 }} />
gap
| Type | string | number | shape | arrayOf |
|---|---|
| Default | Grid.defaultGap |
Description
Define o espaçamento entre colunas e linhas do Grid.
Um number é mapeado para o token de spacing correspondente
(ex.: 3 é equivalente a --size-spacing-03).
Uma string aceita qualquer valor CSS válido de forma arbitrária
(ex.: 15px, 2rem).
Um objeto aplica o valor por breakpoint (sm, md, lg);
breakpoints omitidos herdam o valor do breakpoint anterior.
Um array [columnGap, rowGap] permite definir espaçamentos diferentes
para colunas e linhas. Cada item aceita number, string ou objeto com as mesmas regras.
O valor padrão por breakpoint é sm: 4, md: 4 e lg: 5.
<Grid gap={{ sm: 4, md: 4, lg: 5 }} />
as
| Type | elementType | string |
|---|---|
| Default | 'div' |
Description
Define o tipo de elemento a ser renderizado para o Grid.
Por padrão, será renderizado um elemento <div />.
containerResponsive
| Type | bool | string | instanceOf | shape |
|---|---|
| Default | false |
Description
Faz o Grid seguir o breakpoint de um Container em vez do da viewport.
Passe true para usar o Container ancestral mais próximo.
Passe um id, uma ref ou um elemento para referenciar outro Container.
<Grid containerResponsive />
<Grid.Cell />
Import
import { Grid.Cell } from '@resultadosdigitais/tangram-components/next'
Properties
children
size
| Type | number | shape |
|---|---|
| Default | GridCell.defaultSize |
Description
Define o número de colunas ocupadas pelo GridCell.
Um number aplica o mesmo valor em todos os breakpoints.
Um objeto aplica o valor por breakpoint (sm, md, lg);
breakpoints omitidos herdam o valor do breakpoint anterior.
O valor padrão por breakpoint é sm: 1, md: 1 e lg: 1.
<Grid.Cell size={{ sm: 1, md: 1, lg: 1 }} />
as
| Type | elementType | string |
|---|---|
| Default | 'div' |
Description
Define o tipo de elemento a ser renderizado para este componente.
Por padrão, será renderizado um elemento <div />.
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.