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:

• Button (Botón)
• Fab
• FilledInput (Campo de entrada relleno)
• FormControl (Control de formulario)
• FormHelperText (Texto de ayuda de formulario)
• IconButton (Botón de ícono)
• InputBase (Base para los campos de entrada)
• InputLabel (Etiqueta de campo de entrada)
• ListItem (Elemento de lista)
• OutlinedInput (Campo de entrada delineado)
• Table (Tabla)
• TextField
• Toolbar (Barra de herramientas)

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,
      },
    },
  },
});