diff --git a/create/image-embeds.mdx b/create/image-embeds.mdx index c44858f38..5f71fb239 100644 --- a/create/image-embeds.mdx +++ b/create/image-embeds.mdx @@ -89,6 +89,46 @@ To make an image a clickable link, wrap the image in an anchor tag and add the ` Images within anchor tags automatically display a pointer cursor to indicate they are clickable. +#### Copy and download actions + +Add copy and download controls to an image with the `actions` property. When enabled, buttons appear as an overlay on hover, focus, or touch, letting readers copy the image to their clipboard or save it to their device. + +Set `actions` to `true` to show both buttons, or pass a comma-separated list to enable specific actions: + +```html +System architecture diagram +``` + +```html +System architecture diagram +``` + +Supported values for `actions`: + +- `copy`: Copy the image to the clipboard. +- `download`: Download the image as a file. + +Use the `actionsPlacement` property to position the buttons. The default is `bottom-center`. + +```html +System architecture diagram +``` + +Supported values for `actionsPlacement`: `bottom-center`, `bottom-left`, `bottom-right`, `top-center`, `top-left`, `top-right`. + #### Light and dark mode images To display different images for light and dark themes, use Tailwind CSS classes: diff --git a/es/create/image-embeds.mdx b/es/create/image-embeds.mdx index c5581cc5f..a3a966f43 100644 --- a/es/create/image-embeds.mdx +++ b/es/create/image-embeds.mdx @@ -98,6 +98,48 @@ Para convertir una imagen en un enlace clicable, envuelve la imagen en una etiqu Las imágenes dentro de etiquetas de enlace muestran automáticamente un cursor de puntero para indicar que se pueden hacer clic. +
+ #### Acciones de copiar y descargar +
+ +Agrega controles de copiar y descargar a una imagen con la propiedad `actions`. Cuando se activan, aparecen botones superpuestos al pasar el cursor, al enfocar o al tocar, para que los lectores puedan copiar la imagen al portapapeles o guardarla en su dispositivo. + +Asigna `true` a `actions` para mostrar ambos botones, o pasa una lista separada por comas para habilitar acciones específicas: + +```html +Diagrama de arquitectura del sistema +``` + +```html +Diagrama de arquitectura del sistema +``` + +Valores admitidos para `actions`: + +- `copy`: Copia la imagen al portapapeles. +- `download`: Descarga la imagen como archivo. + +Usa la propiedad `actionsPlacement` para posicionar los botones. El valor predeterminado es `bottom-center`. + +```html +Diagrama de arquitectura del sistema +``` + +Valores admitidos para `actionsPlacement`: `bottom-center`, `bottom-left`, `bottom-right`, `top-center`, `top-left`, `top-right`. +
#### Imágenes para los modos claro y oscuro
diff --git a/fr/create/image-embeds.mdx b/fr/create/image-embeds.mdx index 05eb3f8cd..fcb03d13f 100644 --- a/fr/create/image-embeds.mdx +++ b/fr/create/image-embeds.mdx @@ -98,6 +98,48 @@ Pour rendre une image cliquable, placez l’image dans une balise d’ancre et a Les images à l’intérieur des balises d’ancrage affichent automatiquement un curseur en forme de pointeur pour indiquer qu’elles sont cliquables. +
+ #### Actions de copie et de téléchargement +
+ +Ajoutez des commandes de copie et de téléchargement à une image avec la propriété `actions`. Lorsqu’elle est activée, des boutons apparaissent en superposition au survol, à la mise au point ou au toucher, permettant aux lecteurs de copier l’image dans le presse-papiers ou de l’enregistrer sur leur appareil. + +Définissez `actions` sur `true` pour afficher les deux boutons, ou passez une liste séparée par des virgules pour activer des actions spécifiques : + +```html +Diagramme de l’architecture du système +``` + +```html +Diagramme de l’architecture du système +``` + +Valeurs prises en charge pour `actions` : + +- `copy` : Copie l’image dans le presse-papiers. +- `download` : Télécharge l’image sous forme de fichier. + +Utilisez la propriété `actionsPlacement` pour positionner les boutons. La valeur par défaut est `bottom-center`. + +```html +Diagramme de l’architecture du système +``` + +Valeurs prises en charge pour `actionsPlacement` : `bottom-center`, `bottom-left`, `bottom-right`, `top-center`, `top-left`, `top-right`. +
#### Images pour les modes clair et sombre
diff --git a/zh/create/image-embeds.mdx b/zh/create/image-embeds.mdx index 0c1338983..152840fb7 100644 --- a/zh/create/image-embeds.mdx +++ b/zh/create/image-embeds.mdx @@ -98,6 +98,48 @@ keywords: ["images", "videos", "iframes", "media", "svg"] 位于锚点标签内的图像会自动显示指针光标,表示它们可点击。 +
+ #### 复制和下载操作 +
+ +使用 `actions` 属性为图像添加复制和下载控件。启用后,读者将鼠标悬停、聚焦或触摸图像时会显示浮层按钮,可将图像复制到剪贴板或保存到设备。 + +将 `actions` 设为 `true` 可同时显示两个按钮,或传入以逗号分隔的列表以启用特定操作: + +```html +系统架构图 +``` + +```html +系统架构图 +``` + +`actions` 支持的值: + +- `copy`:将图像复制到剪贴板。 +- `download`:将图像下载为文件。 + +使用 `actionsPlacement` 属性调整按钮位置。默认值为 `bottom-center`。 + +```html +系统架构图 +``` + +`actionsPlacement` 支持的值:`bottom-center`、`bottom-left`、`bottom-right`、`top-center`、`top-left`、`top-right`。 +
#### 明暗模式的图像