Base

tip

O componente Base serve para adicionar um espaçamento no eixo y (vertical) e ter controle da cor de fundo

Importação

import { Base } from '@escaletech/delta'

Como usar

Editor de código

<Base> <div style={{ height: 50, width: '100%', background: 'aquamarine' }} /> </Base>

<Base>
  <div style={{ height: 50, width: '100%', background: 'aquamarine' }} />
</Base>

Resultado

Loading...

Cor de fundo

Utilize a propriedade background para alterar a cor de fundo. A propriedade aceita qualquer cor em qualquer formato, inclusive degradê.

Editor de código

<Base background='$primaryLightest'> <div style={{ height: 50, width: '100%', background: 'aquamarine' }} /> </Base>

  <Base background='$primaryLightest'>
    <div style={{ height: 50, width: '100%', background: 'aquamarine' }} />
  </Base>

Resultado

Loading...

Espaçamento

Utilize as propriedades spacing e spacingDesktop para colocar espaçamentos diferentes em mobile e desktop, respectivamente. Estas propriedades aceitam qualquer token de space.

Editor de código

<Base background='$primaryLightest' spacing='xxs' spacingDesktop='lg'> <div style={{ height: 50, width: '100%', background: 'aquamarine' }} /> </Base>

  <Base background='$primaryLightest' spacing='xxs' spacingDesktop='lg'>
    <div style={{ height: 50, width: '100%', background: 'aquamarine' }} />
  </Base>

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  space: {
    spacing: '40px',
    spacingDesktop: '24px'
  }
})

Tokens

Token	Descrição
space.spacing	Espaçamento vertical da margem com o conteúdo
space.spacingDesktop	Espaçamento vertical da margem com o conteúdo para dispositivos desktop

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
children	Conteúdo do componente	ReactNode	_	✅
as	Definição do elemento	ElementType	section	❌
background	Cor de fundo	string	_	❌
spacing	Espaçamento vertical da margem com o conteúdo	string	$baseSpacing	❌
spacingDesktop	Espaçamento vertical da margem com o conteúdo para dispositivos desktop	string	$baseSpacingDesktop	❌