Saltar al contenido

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

Lista cuadriculada

Las listas cuadriculadas muestran una colección de imágenes organizadas en una cuadrícula.

Las Listas cuadriculadas representan una colección de ítems con un patrón repetitivo. Ayudan a mejorar la comprensión visual del contenido que tienen.

Lista cuadriculada sólo con imágenes

Un ejemplo simple de una lista cuadriculada (ImageList) con imágenes desplazables.

⚠️ Missing demo `pages/components/image-list/ImageImageList.js` ⚠️

Lista cuadriculada con barras de título

Este ejemplo demuestra el uso de una barra para cuadro de lista cuadriculada (ImageListItemBar) que agrega una capa sobrepuesta a cada cuadro en una lista cuadriculada (ImageListItem). La capa sobrepuesta puede acomodar un título (title), subtítulo (subtitle), y acción secundaria (en este ejemplo un IconButton).

  • December
  • Breakfast
    Breakfast
    by: jill111
  • Tasty burger
    Tasty burger
    by: director90
  • Camera
    Camera
    by: Danson67
  • Morning
    Morning
    by: fancycrave1
  • Hats
    Hats
    by: Hans
  • Honey
    Honey
    by: fancycravel
  • Vegetables
    Vegetables
    by: jill111
  • Water plant
    Water plant
    by: BkrmadtyaKarki
  • Mushrooms
    Mushrooms
    by: PublicDomainPictures
  • Olive oil
    Olive oil
    by: congerdesign
  • Sea star
    Sea star
    by: 821292
  • Bike
    Bike
    by: danfador

Lista cuadriculada con una línea

Este ejemplo muestra una lista cuadrícula con una sola línea desplazable horizontalmente. Se desaconseja usar listas cuadriculadas con desplazamiento horizontal ya que estas interfieren con los patrones típicos de lectura, afectando la comprensión. Una excepción notable es una lista cuadriculada que desplaza imágenes horizontalmente en una sola línea, como una galería.

  • Breakfast
    Breakfast
  • Tasty burger
    Tasty burger
  • Camera
    Camera
  • Morning
    Morning
  • Hats
    Hats
  • Honey
    Honey
  • Vegetables
    Vegetables
  • Water plant
    Water plant
  • Mushrooms
    Mushrooms
  • Olive oil
    Olive oil
  • Sea star
    Sea star
  • Bike
    Bike

Lista cuadriculada avanzada

Este ejemplo muestra cuadros "destacados" usando los props filas (rows) y columnas (cols) para ajustar el tamaño del cuadro, y la prop relleno (padding) para ajustar el espaciado. Los cuadros tienen una barra de título personalizada, ubicada en la parte superior y un fondo de titulo (titleBackground) con degradado personalizado. La acción secundaria IconButton está ubicada a la izquierda.

<<<<<<< HEAD:docs/src/pages/components/grid-list/grid-list-es.md

⚠️ Missing demo `pages/components/grid-list/AdvancedGridList.js` ⚠️

=======

  • Breakfast
    Breakfast
  • Tasty burger
    Tasty burger
  • Camera
    Camera
  • Morning
    Morning
  • Hats
    Hats
  • Honey
    Honey
  • Vegetables
    Vegetables
  • Water plant
    Water plant
  • Mushrooms
    Mushrooms
  • Olive oil
    Olive oil
  • Sea star
    Sea star
  • Bike
    Bike

[GridList] Rename to ImageList & add deprecation warnings (#22363):docs/src/pages/components/image-list/image-list-es.md