Box
O componente Box nos permite agrupar e espaçar elementos ou outros componentes.
import React from "react";
import { Box } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Box
borderColor="neutral-interactive"
borderRadius="2"
borderStyle="dashed"
borderWidth="2"
height="5rem"
width="12rem"
/>
);
export default Example;O componente é composto por uma container com múltiplas propriedades visuais e de posicionamento.
Utilizamos esse componente para agrupar outros componentes, delimitar tamanhos e posicionamentos, controlar propriedades visuais e de espaçamento.
É possível controlar os aspectos visuais do box, modificando a cor de background, espessura, radius, estilo e cor da borda. O componente também possui um controle visual responsivo, que possibilita a definição de propriedades visuais diferentes para distintas resolução.
Também é possível controlar os espaçamentos internos (paddings) e os espaçamentos externos (margens) em relação a elementos que estão ao redor.
- Construir containers
- Agrupar componentes
- Personalizar fundos e bordas
- Posicionar componentes
Esse componente pode ser renderizado como qualquer elemento HTML ou componente React, usando a propriedade as. Essa funcção permite construir diferentes elementos aproveitando a flexibilidade do componente Box e mantendo um bom nível de semántica HTML.
Instale o componente via terminal.
npm install @nimbus-ds/boxAbreviações de propriedades
As propriedades do componente contam com abreviações para facilitar o seu uso, elas são aplicáveis sobre paddings, margins e seus posicionamentos. * m = margin * p = padding * r = right * l = left * t = top * b = bottom * x = left e right * y = top e bottom
Exemplos de uso:
* ml = marginLeft * pb = paddingBottom * py = paddingY * mx = marginX
Additional props are passed to the <Box> element. See div docs for a list of props accepted by the <Box> element.