feat(): add image component

TDesignOteam · Jun 24, 2024 · 9e2b19c · 9e2b19c
1 parent af5422d
commit 9e2b19c
Show file tree

Hide file tree

Showing 16 changed files with 1,069 additions and 0 deletions.
diff --git a/src/image/README.md b/src/image/README.md
@@ -0,0 +1,77 @@
+---
+title: Image 图片
+description: 用于展示图片素材。
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### 基础图片
+
+不同填充模式的图片
+
+提供 fill、contain、cover、none、scale-down 5 种填充类型。
+
+{{ fill-mode }}
+
+不同填充位置的图片
+
+图片相对于容器的位置。当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
+
+{{ fill-position }}
+
+### 不同形状的图片
+
+提供方形、圆角方形、圆角 3 种形状。
+
+当图片长宽不相等时，无法使用 circle 展示一个正圆。
+
+{{ shape }}
+
+### 图集样式的图片
+
+图片呈现图集样式的效果。
+
+{{ gallery-cover }}
+
+### 加载状态的图片
+
+显示加载的不同状态，提供默认、自定义两种占位样式。
+
+{{ placeholder }}
+
+### 图片懒加载
+
+#### 单图用法
+
+placeholder 在图像加载时占位显示。
+
+{{ lazy-single }}
+
+#### 图片列表用法
+
+多张图片滚动下拉时，尚未出现的图片会用占位图表示，呈现懒加载的效果。
+
+{{ lazy-list }}
+
+### 图片扩展元素
+
+带有悬浮层的图片。
+
+#### 始终显示
+
+悬浮层常驻显示，不因用户操作出现或消失。
+
+{{ extra-always }}
+
+#### 悬浮显示
+
+默认不显示悬浮层，鼠标悬浮到图片区域后悬浮层出现。
+
+{{ extra-hover }}
+
+### 支持 `avif` 和 `webp` 格式的图片
+
+支持使用 `srcset` 设置特殊格式的图片渲染，如 `.avif` 和 `.webp`。图片转码为 AVIF/WEBP 推荐使用腾讯云数据万象<a href="https://cloud.tencent.com/document/product/436/60455">图片压缩服务</a>。
+
+{{ avif }}
diff --git a/src/image/_example/avif.tsx b/src/image/_example/avif.tsx
@@ -0,0 +1,21 @@
+import 'tdesign-web-components/image';
+
+import { Component,tag } from 'omi';
+
+@tag('image-avif')
+export default class ImageAvif extends Component {
+  render() {
+    return (
+      <t-image
+        src="https://tdesign.gtimg.com/img/tdesign-image.avif"
+        srcset={{
+          'image/avif': 'https://tdesign.gtimg.com/img/tdesign-image.avif',
+          'image/webp': 'https://tdesign.gtimg.com/img/tdesign-image.webp',
+        }}
+        shape="square"
+        style={{ maxWidth: '100%' }}
+        fit="scale-down"
+      ></t-image>
+    );
+  }
+}
diff --git a/src/image/_example/extra-always.tsx b/src/image/_example/extra-always.tsx
@@ -0,0 +1,73 @@
+import 'tdesign-web-components/image';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+// import 'tdesign-icons-omi/print';
+
+export default class ImageExtraAlways extends Component {
+  render() {
+    const mask = (
+      <div
+        style={{
+          background: 'rgba(0,0,0,.4)',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 14,
+          lineHeight: 22,
+        }}
+      >
+        <t-tag
+          shape="mark"
+          theme="warning"
+          style={{
+            borderRadius: 3,
+            background: 'transparent',
+            color: '#fff',
+          }}
+        >
+          <t-icon-print size={16} /> 高清
+        </t-tag>
+      </div>
+    );
+
+    const button = (
+      <t-tag
+        shape="mark"
+        theme="warning"
+        style={{
+          position: 'absolute',
+          right: 8,
+          bottom: 8,
+          borderRadius: 3,
+          background: 'rgba(236,242,254,1)',
+          color: 'rgba(0,82,217,1)',
+        }}
+      >
+        <t-icon-print size={16} /> 高清
+      </t-tag>
+    );
+
+    return (
+      <t-space size={32}>
+        <t-space direction="vertical">
+          <strong style={{ fontSize: 20 }}>有遮罩</strong>
+          <t-image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            style={{ width: 284, height: 160 }}
+            overlayContent={mask}
+          />
+        </t-space>
+        <t-space direction="vertical">
+          <strong style={{ fontSize: 20 }}>无遮罩</strong>
+          <t-image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            style={{ width: 284, height: 160 }}
+            overlayContent={button}
+          />
+        </t-space>
+      </t-space>
+    );
+  }
+}
diff --git a/src/image/_example/extra-hover.tsx b/src/image/_example/extra-hover.tsx
@@ -0,0 +1,31 @@
+import 'tdesign-web-components/image';
+
+import { Component } from 'omi';
+
+export default class ImageExtraHover extends Component {
+  render() {
+    const mask = (
+      <div
+        style={{
+          background: 'rgba(0,0,0,.4)',
+          color: '#fff',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        预览
+      </div>
+    );
+
+    return (
+      <t-image
+        src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+        style={{ width: 284, height: 160 }}
+        overlayContent={mask}
+        overlayTrigger="hover"
+      />
+    );
+  }
+}
diff --git a/src/image/_example/fill-mode.tsx b/src/image/_example/fill-mode.tsx
@@ -0,0 +1,18 @@
+import 'tdesign-web-components/image';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class ImageFillMode extends Component {
+  render() {
+    return (
+      <t-space breakLine size={16}>
+        {['fill', 'contain', 'cover', 'none', 'scale-down'].map((item) => (
+          <t-space direction="vertical" align="left" key={item}>
+            {item}
+          </t-space>
+        ))}
+      </t-space>
+    );
+  }
+}
diff --git a/src/image/_example/fill-position.tsx b/src/image/_example/fill-position.tsx
@@ -0,0 +1,111 @@
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/image';
+
+import { Component } from 'omi';
+
+export default class ImageFillPosition extends Component {
+  render() {
+    return (
+      <t-space direction="vertical" style={{ width: '100%' }}>
+        <t-space breakLine>
+          <t-space direction="vertical" align="left">
+            <t-image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="cover"
+              position="center"
+              style={{ width: 120, height: 120 }}
+            />
+            cover center
+          </t-space>
+          <t-space direction="vertical" align="left">
+            <t-image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="cover"
+              style={{ width: 120, height: 120 }}
+              position="left"
+            />
+            cover left
+          </t-space>
+          <t-space direction="vertical" align="left">
+            <t-image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="cover"
+              style={{ width: 120, height: 120 }}
+              position="right"
+            />
+            cover right
+          </t-space>
+        </t-space>
+        <t-space style={{ marginTop: 20 }} breakLine>
+          <t-space direction="vertical" align="left">
+            <t-image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="cover"
+              style={{ width: 280, height: 120 }}
+              position="top"
+            />
+            cover top
+          </t-space>
+          <t-space direction="vertical" align="left">
+            <t-image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="cover"
+              style={{ width: 280, height: 120 }}
+              position="bottom"
+            />
+            cover bottom
+          </t-space>
+        </t-space>
+        <t-space style={{ marginTop: 20 }} breakLine>
+          <t-space direction="vertical" align="left">
+            <t-image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="contain"
+              style={{ width: 120, height: 200 }}
+              position="top"
+            />
+            contain top
+          </t-space>
+          <t-space direction="vertical" align="left">
+            <t-image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="contain"
+              style={{ width: 120, height: 200 }}
+              position="bottom"
+            />
+            contain bottom
+          </t-space>
+          <t-space direction="vertical" align="left">
+            <t-image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="contain"
+              style={{ width: 120, height: 200 }}
+              position="center"
+            />
+            contain center
+          </t-space>
+          <t-space style={{ marginTop: 20 }} breakLine>
+            <t-space direction="vertical" align="left">
+              <t-image
+                src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+                fit="contain"
+                style={{ width: 280, height: 120 }}
+                position="left"
+              />
+              contain left
+            </t-space>
+            <t-space direction="vertical" align="left">
+              <t-image
+                src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+                fit="contain"
+                style={{ width: 280, height: 120 }}
+                position="right"
+              />
+              contain right
+            </t-space>
+          </t-space>
+        </t-space>
+      </t-space>
+    );
+  }
+}
diff --git a/src/image/_example/gallery-cover.tsx b/src/image/_example/gallery-cover.tsx
@@ -0,0 +1,31 @@
+import 'tdesign-web-components/image';
+
+import { Component } from 'omi';
+
+export default class ImageGalleryCover extends Component {
+  render() {
+    const label = (
+      <t-tag
+        shape="mark"
+        theme="warning"
+        style={{
+          margin: 8,
+          borderRadius: 3,
+          background: 'rgba(236,242,254,1)',
+          color: 'rgba(0,82,217,1)',
+        }}
+      >
+        标签一
+      </t-tag>
+    );
+
+    return (
+      <t-image
+        src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+        style={{ width: 284, height: 160 }}
+        gallery
+        overlayContent={label}
+      />
+    );
+  }
+}