mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
80d855b632
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
83 lines
4.2 KiB
Plaintext
83 lines
4.2 KiB
Plaintext
---
|
|
title: "Mosaicos"
|
|
description: "Muestra vistas previas con títulos y descripciones en un diseño de cuadrícula."
|
|
keywords: ["mosaicos", "vista previa visual", "cuadrícula", "exhibición"]
|
|
---
|
|
|
|
Usa mosaicos para crear elementos visuales de presentación con un fondo con patrón, título y descripción. Los mosaicos son ideales para mostrar vistas previas de componentes, destacar funcionalidades o elementos de navegación en un diseño de cuadrícula.
|
|
|
|
<Tile href="/es/components/accordions" title="Accordion" description="Dos variantes">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
|
|
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
|
|
</Tile>
|
|
|
|
```mdx Tile example
|
|
<Tile href="/es/components/accordions" title="Accordion" description="Dos variantes">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
|
|
</Tile>
|
|
```
|
|
|
|
<div id="grid-layout">
|
|
## Diseño en cuadrícula
|
|
</div>
|
|
|
|
Combina tarjetas con el [componente Columns](/es/components/columns) para crear una cuadrícula adaptable de vistas previas.
|
|
|
|
<Columns cols={3}>
|
|
<Tile href="/es/components/accordions" title="Accordion" description="Dos variantes">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
|
|
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
|
|
</Tile>
|
|
|
|
<Tile href="/es/components/accordions" title="Accordion" description="Dos variantes">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
|
|
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
|
|
</Tile>
|
|
|
|
<Tile href="/es/components/accordions" title="Accordion" description="Dos variantes">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
|
|
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
|
|
</Tile>
|
|
</Columns>
|
|
|
|
```mdx Grid layout example
|
|
<Columns cols={3}>
|
|
<Tile href="/components/accordions" title="Accordion" description="Dos variantes">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
|
|
</Tile>
|
|
<Tile href="/components/accordions" title="Accordion" description="Dos variantes">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
|
|
</Tile>
|
|
<Tile href="/components/accordions" title="Accordion" description="Dos variantes">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
|
|
</Tile>
|
|
</Columns>
|
|
```
|
|
|
|
<div id="properties">
|
|
## Propiedades
|
|
</div>
|
|
|
|
<ResponseField name="href" type="string" required>
|
|
URL a la que se redirige cuando se hace clic en la tarjeta.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="title" type="string">
|
|
El título que se muestra debajo de la vista previa de la tarjeta.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="description" type="string">
|
|
Una breve descripción que se muestra debajo del título.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="children" type="React.ReactNode" required>
|
|
Contenido que se muestra dentro del área de vista previa de la tarjeta, normalmente imágenes o SVG.
|
|
</ResponseField> |