圖片比較
使用滑桿並排比較兩張圖片。
導入 #
import ImageCompare from 'primevue/imagecompare';
基本 #
圖片使用範本定義，具有 left 和 right 插槽。 使用 style 或 class 屬性來定義容器的大小。
<ImageCompare class="shadow-lg rounded-2xl">
<template #left>
<img src="~/assets/images/island1.jpg" />
</template>
<template #right>
<img src="~/assets/images/island2.jpg" />
</template>
</ImageCompare>
響應式 #
將響應式樣式應用於容器元素，以最佳化每個螢幕尺寸的顯示。
<ImageCompare class="sm:!w-96 shadow-lg rounded-2xl">
<template #left>
<img src="~/assets/images/island1.jpg" />
</template>
<template #right>
<img src="~/assets/images/island2.jpg" />
</template>
</ImageCompare>
無障礙設計 #
螢幕閱讀器
ImageComponent 元件內部使用原生範圍 滑桿。 可以使用 aria-labelledby 和 aria-label 屬性定義描述元件的值。
<span id="image_label">Compare Images</span>
<ImageCompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">
...
</ImageCompare>
<ImageCompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
...
</ImageCompare>
鍵盤支援
| 按鍵 | 功能 |
|---|---|
| tab | 將焦點移至元件。 |
| 左箭頭上箭頭 | 遞減值。 |
| 右箭頭下箭頭 | 遞增值。 |
| home | 設定最小值。 |
| end | 設定最大值。 |
| page up | 將值遞增 10 個步驟。 |
| page down | 將值遞減 10 個步驟。 |