Pila

Pila (Stack) es un componente contenedor para organizar elementos vertical u horizontalmente.

Introducción

El componente Pila (Stack) gestiona la disposición de sus hijos inmediatos a lo alrgo del eje vertical u horizontal, con espaciado y separadores opcionales entre cada hijo.

Conceptos básicos

import Stack from '@u_ui/u-ui/Stack';

El componente Pila actúa como un contenedor genérico, envolviendo los elementos a organizar.

Utilice la propiedad spacing para controlar el espacio entre los elementos secundarios. El valor de espaciado puede ser cualquier número, incluyendo decimales, o una cadena de texto. (La propiedad se convierte en una propiedad CSS usando el helper theme.spacing().)

Stack vs. Grid

Stack se ocupa de diseños unidimensionales, mientras que Grid maneja diseños bidimensionales. La dirección por defecto es column que apila los hijos verticalmente.

Dirección

Por defecto, Stack ordena los elementos verticalmente en una columna. Utilice la propiedad direction para colocar los elementos horizontalmente en una fila:

Divisores

Utilice la propiedad divider para insertar un elemento entre cada hijo. Esto funciona particularmente bien con el componente Divider, como se muestra a continuación:

Valores responsivos

Puede cambiar los valores direction o spacing en función del punto de ruptura activo.

Flexbox gap

Para usar flexbox gap (Inglés) para la implementación del espaciado, establece la propiedad useFlexGap a true.

Elimina las limitaciones conocidas de la implementación por defecto que utiliza el selector anidado CSS. Sin embargo, CSS flexblox gap no está totalmente soportado en algunos navegadores.

Recomendamos comprobar el porcentaje de soporte antes de usarlo.

Para establecer la propiedad en todas las instancias de la pila, cree un tema con props por defecto:

import { ThemeProvider, createTheme } from '@u_ui/u-ui/styles';
import Stack from '@u_ui/u-ui/Stack';

const theme = createTheme({
  components: {
    uiStack: {
      defaultProps: {
        useFlexGap: true,
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Stack>…</Stack> {/* usa flexbox gap por defecto */}
    </ThemeProvider>
  );
}

Limitaciones

Margen en los hijos

La personalización del margen de los componentes secundarios no es posible por defecto.

Por ejemplo, el margen superior del componente Button será ignorado.

<Stack>
  <Button sx={{ marginTop: '30px' }}>...</Button>
</Stack>

white-space: nowrap

La configuración inicial de los elementos flex es min-width: auto. Esto causa un conflicto de posicionamiento cuando los hijos utilizan white-space: nowrap;. Puede reproducir el problema con:

<Stack direction="row">
  <Typography noWrap>

Para que el elemento permanezca dentro del contenedor es necesario establecer min-width: 0.

<Stack direction="row" sx={{ minWidth: 0 }}>
  <Typography noWrap>

Anatomía

El componente Stack está compuesto por un único elemento raíz <div>:

<div class="uiStack-root">
  <!-- Contenido de la pila -->
</div>

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

• <PigmentStack />
• <Stack />