feat: image preview title

ZhongAnTech · Feb 17, 2025 · 738d5a6 · 738d5a6
1 parent e327663
commit 738d5a6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/packages/zarm/src/image-preview/ImagePreview.tsx b/packages/zarm/src/image-preview/ImagePreview.tsx
@@ -61,6 +61,7 @@ const ImagePreview = React.forwardRef<HTMLDivElement, ImagePreviewProps>((props,
     className,
     style,
     mountContainer,
+    title,
   } = props;
 
   const [images, setImages] = useState<Images>(formatImages(props.images));
@@ -171,6 +172,7 @@ const ImagePreview = React.forwardRef<HTMLDivElement, ImagePreviewProps>((props,
       maskOpacity={1}
     >
       <>
+        <div className={bem('title')}>{title}</div>
         <div ref={ref} className={bem('content')} {...bindEvent()}>
           {visible &&
             (images?.length ? (

diff --git a/packages/zarm/src/image-preview/demo.md b/packages/zarm/src/image-preview/demo.md
@@ -87,13 +87,15 @@ const Demo = () => {
         </List.Item>
       </List>
       <ImagePreview
+        title="缩略图预览"
         visible={visibleState.common}
         images={commonImages}
         onClose={() => hide('common')}
         maxScale={10}
         orientation={orientation}
       />
       <ImagePreview
+        title="原始图预览"
         visible={visibleState.origin}
         images={originImages}
         onClose={() => hide('origin')}

diff --git a/packages/zarm/src/image-preview/style/component.scss b/packages/zarm/src/image-preview/style/component.scss
@@ -5,6 +5,19 @@
 
   padding: 0;
 
+  @include e(title) {
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    height: 60px;
+    line-height: 60px;
+    font-size: var(--pagination-font-size);
+    font-weight: var(--title-font-weight);
+    color: var(--za-color-text-inverse);
+  }
+
   @include e(content) {
     display: flex;
     align-items: center;