Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 32 additions & 6 deletions es/components/frames.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,35 @@ Usa marcos para mostrar imágenes, diagramas u otros contenidos visuales con un
</Frame>

<div id="captions">
## Subtítulos
## Pies de foto
</div>

Puedes añadir contexto adicional a una imagen usando la prop opcional `caption`.
Añade contexto adicional a una imagen con la prop opcional `caption`. Los pies de foto aparecen en el marco situado debajo de la imagen.

<Frame caption="El Parque Nacional de Yosemite recibe más de 3,5 millones de visitantes cada año">
<Frame caption="El Parque Nacional Yosemite es visitado por más de 3,5 millones de personas cada año.">
<img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Fotografía del valle de Yosemite." />
</Frame>

<div id="hints">
## Sugerencias
</div>

Añade texto que preceda al cuadro usando la prop opcional `hint`. Las sugerencias aparecen sobre el cuadro.

<Frame hint="Si planeas visitar el Parque Nacional de Yosemite, obtén tus permisos antes de ir." caption="El Parque Nacional de Yosemite es visitado por más de 3,5 millones de personas cada año.">
<img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Fotografía de un lago rodeado de árboles con montañas a lo lejos en el Parque Nacional de Yellowstone." />
</Frame>

<div id="properties">
## Propiedades
</div>

<ResponseField name="caption" type="string">
Texto opcional de la leyenda que se muestra centrado debajo de tu componente.
Texto que aparece como parte del marco, centrado debajo del contenido.
</ResponseField>

<ResponseField name="hint" type="string">
Texto que va antes del marco.
</ResponseField>

<CodeGroup>
Expand All @@ -36,8 +50,20 @@ Puedes añadir contexto adicional a una imagen usando la prop opcional `caption`
</Frame>
```

```mdx Frame with a caption
<Frame caption="Texto de la leyenda">
```mdx Frame con un pie de imagen
<Frame caption="Caption text">
<img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
</Frame>
```

```mdx Frame con una pista
<Frame hint="Hint text">
<img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
</Frame>
```

```mdx Frame con pista y pie de imagen
<Frame hint="Hint text" caption="Caption text">
<img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
</Frame>
```
Expand Down
34 changes: 30 additions & 4 deletions fr/components/frames.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,32 @@ Utilisez des cadres pour afficher des images, des schémas ou d’autres contenu
## Légendes
</div>

Vous pouvez ajouter des informations supplémentaires à une image à l’aide de la prop optionnelle `caption`.
Ajoutez un contexte supplémentaire à une image en utilisant la prop optionnelle `caption`. Les légendes s’affichent dans le cadre sous l’image.

<Frame caption="Le parc national de Yosemite accueille plus de 3,5 millions de visiteurs chaque année">
<Frame caption="Le parc national de Yosemite est visité par plus de 3,5 millions de personnes chaque année.">
<img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Photographie de la vallée de Yosemite." />
</Frame>

<div id="hints">
## Conseils
</div>

Ajoutez un texte qui précède le cadre à l'aide de la prop optionnelle `hint`. Les conseils apparaissent au-dessus du cadre.

<Frame hint="Si vous prévoyez de visiter le parc national de Yosemite, procurez-vous vos autorisations avant votre départ." caption="Le parc national de Yosemite est visité par plus de 3,5 millions de personnes chaque année.">
<img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photographie d'un lac entouré d'arbres avec des montagnes au loin dans le parc national de Yellowstone." />
</Frame>

<div id="properties">
## Propriétés
</div>

<ResponseField name="caption" type="string">
Texte de légende optionnel, affiché centré sous votre composant.
Texte affiché dans le cadre, centré sous le contenu.
</ResponseField>

<ResponseField name="hint" type="string">
Texte affiché avant le cadre.
</ResponseField>

<CodeGroup>
Expand All @@ -36,9 +50,21 @@ Vous pouvez ajouter des informations supplémentaires à une image à l’aide d
</Frame>
```

```mdx Frame with a caption
```mdx Frame avec une légende
<Frame caption="Texte de légende">
<img src="/path/image.jpg" alt="Texte alternatif descriptif" />
</Frame>
```

```mdx Frame avec un indice
<Frame hint="Texte d'indice">
<img src="/path/image.jpg" alt="Texte alternatif descriptif" />
</Frame>
```

```mdx Frame avec un indice et une légende
<Frame hint="Texte d'indice" caption="Texte de légende">
<img src="/path/image.jpg" alt="Texte alternatif descriptif" />
</Frame>
```
</CodeGroup>
Loading