Box
El componente Box nos permite agrupar y espaciar elementos y/u otros 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;El componente se compone de un container con múltiples propiedades visuales y de posicionamiento.
Utilizamos este componente para agrupar otros componentes, delimitar tamaños, establecer posicionamientos y controlar propiedades visuales y de espaciamiento.
Es posible controlar los aspectos visuales del box, modificando el color de fondo, y el grosor, radius, estilo y color del borde. El componente también posee un control responsivo, que posibilita la definición de propiedades visuales diferentes para distintas resoluciones.
También es posible controlar los espaciados internos (paddings) y los márgenes externos (margins) en relación a elementos que están alrededor.
- Construir containers
- Agrupar componentes
- Personalizar fondos y bordes
- Posicionar componentes
Este componente puede renderizarse como cualquier elemento HTML u otro componente React, utilizando la propiedad as. Esta función permite construir diferentes elementos aprovechando toda la flexibilidad del componente Box y manteniendo un buen nivel de semántica HTML.
Instalá el 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.