feat: 图片集优化 #8697
Open
feat: 图片集优化 #8697
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
sqzhou
commented
Nov 10, 2023
sqzhou
commented
- 支持images、image支持内嵌模式显示
- 支持images、image图片放大的显示UI完善
- 支持images、image图片放大的底部滚动完善
- 支持images、image图片放大的标题和描述的显示
|
👍 Thanks for this! Please review the labels and make any necessary changes. |
sqzhou
force-pushed
the
feat/images
branch
5 times, most recently
from
da3bf75
to
22079d4
Compare
lurunze1226
suggested changes
Nov 23, 2023
docs/zh-CN/components/image.md
Outdated
| @@ -431,6 +431,22 @@ List 的内容、Card 卡片的内容配置同上 | |||
| } | |||
| ``` | |||
|
|
|||
| ## 内嵌模式 | |||
|
|
|||
| 配置`"embed": true`，显示图片内嵌模式 | |||
docs/zh-CN/components/images.md
Outdated
| | embed | `boolean` | `false` | 内嵌模式，当是 `true` 开启内嵌显示 | `3.5.3` | | ||
| | imageStyle | `object` | | 设置图片列表每一项的style | `3.5.3` | | ||
| | position.toolbar | `top' \| 'bottom'` | `'bottom'` | 设置图片放大时，工具栏位置 | `3.5.3` | | ||
| | position.description | `'left' \| 'right'` | `'right'` | 设置图片放大时，描述对应显示框位置 | `3.5.3` | |
| @@ -0,0 +1,64 @@ | |||
| .#{$ns}DrapProgress { | |||
There was a problem hiding this comment.
拼写错误: DragProgress 统一检查一下，一些关键的主题样式可以考虑提取成组件的 CSS 变量，比如下面的一些硬编码的颜色、边框、阴影等
| autobind | ||
| } from 'amis-core'; | ||
|
|
||
| interface DragProgrocessProp extends ThemeProps, LocaleProps { |
| import {resizeSensor} from 'amis-core'; | ||
| import {Icon} from './icons'; | ||
|
|
||
| interface SlidingProp extends ThemeProps, LocaleProps { |
There was a problem hiding this comment.
把这个和Carousel 组件融合一下，在 amis-ui 里加一个Carousel吧
| @@ -161,6 +163,8 @@ registerIcon('remove', RemoveIcon); | |||
| registerIcon('retry', RetryIcon); | |||
| registerIcon('upload', UploadIcon); | |||
| registerIcon('download', DownloadIcon); | |||
| registerIcon('download-new', DownloadNewIcon); | |||
There was a problem hiding this comment.
图标名称语义化：ImageDownload
| @@ -595,6 +618,32 @@ export class ImageField extends React.Component< | |||
| ? filter(defaultImage, data, '| raw') | |||
| : imagePlaceholder; | |||
|
|
|||
| const filterSrc = value ? value : defaultValue; | |||
|
|
|||
| if (embed) { | |||
There was a problem hiding this comment.
感觉不需要吧，Images 图片集支持内嵌就行了
| ? filter(originalSrc, item, '| raw') | ||
| : item?.src || filter(src, item, '| raw') || item?.image || item, | ||
| title: title ? this.stringParse(title, 'title') : '', | ||
| caption: description ? this.stringParse(description, 'caption') : '' |
There was a problem hiding this comment.
每个 Image 元素可以单独设置 style，local style > global style
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.