mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4b465465dd
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
85 lines
4.3 KiB
Plaintext
85 lines
4.3 KiB
Plaintext
---
|
|
title: "Mosaicos"
|
|
description: "Usa el componente tiles para mostrar vistas previas visuales con miniaturas de imágenes, títulos y descripciones en un diseño de cuadrícula adaptable."
|
|
keywords: ["mosaicos", "vista previa visual", "cuadrícula", "exhibición"]
|
|
boost: 3
|
|
---
|
|
|
|
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>
|