Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

Densidad

C贸mo aplicar densidad a los componentes de Material-UI.

Aplicando densidad

Esta secci贸n explica c贸mo aplicar densidad. Las guias Material Design tienen una guia extensa que cubre estos temas con mayor detalle. No cubre todos los casos de uso posibles, ni consideraciones que debas tomar en cuenta para usar densidad en tu aplicaci贸n.

Implementando la densidad

Se puede aplicar una mayor densidad a algunos componentes por medio de propiedades. Las p谩ginas de componentes tienen al menos un ejemplo usando el respectivo componente con una densidad mayor aplicada.

Dependiendo del componente, la densidad es aplicada usando menos espacio, o simplemente reduciendo su tama帽o.

Los siguientes componentes tienen propiedades para aplicar una mayor densidad:

Explorar densidad del tema

Esta herramienta permite aplicar la densidad a trav茅s de espaciado de componentes y propiedades. Puedes navegar alrededor y ver c贸mo se aplica 茅sto a los componentes de Material-UI.

If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You should not apply this theme to your whole application as this might negatively impact user experience. The Material design guidelines has examples for when not to apply density.

The theme is configured with the following options:

const theme = createTheme({
  props: {
    MuiButton: {
      size: 'small',
    },
    MuiFilledInput: {
      margin: 'dense',
    },
    MuiFormControl: {
      margin: 'dense',
    },
    MuiFormHelperText: {
      margin: 'dense',
    },
    MuiIconButton: {
      size: 'small',
    },
    MuiInputBase: {
      margin: 'dense',
    },
    MuiInputLabel: {
      margin: 'dense',
    },
    MuiListItem: {
      dense: true,
    },
    MuiOutlinedInput: {
      margin: 'dense',
    },
    MuiFab: {
      size: 'small',
    },
    MuiTable: {
      size: 'small',
    },
    MuiTextField: {
      margin: 'dense',
    },
    MuiToolbar: {
      variant: 'dense',
    },
  },
  overrides: {
    MuiIconButton: {
      sizeSmall: {
        // Adjust spacing to reach minimal touch target hitbox
        marginLeft: 4,
        marginRight: 4,
        padding: 12,
      },
    },
  },
});

Unidad de espaciamiento