mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
Merge remote-tracking branch 'baidu/master'
This commit is contained in:
2betop
commit
7e5f498ec9
@ -66,6 +66,30 @@ order: 33
|
||||
|
||||
其中的 `imageList` 要和配置的 `name` 值对应。
|
||||
|
||||
## 点击图片打开外部链接
|
||||
|
||||
> 1.3.3 及以上版本
|
||||
|
||||
需要放回的字段中除了前面的 image，还有 href 属性
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"imageList": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png",
|
||||
"href": "https://github.com/baidu/amis"
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"type": "carousel",
|
||||
"name": "imageList"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 自定义轮播图的展现
|
||||
|
||||
通过配置 `itemSchema` 可以自定义轮播图的展现，比如图片默认背景配置是 contain，可以改成 cover：
|
||||
@ -85,6 +109,7 @@ itemSchema: {
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| options | `array` | `[]` | 轮播面板数据 |
|
||||
| options.image | `string` | | 图片链接 |
|
||||
| options.href | `string` | | 图片打开网址的链接 |
|
||||
| options.imageClassName | `string` | | 图片类名 |
|
||||
| options.title | `string` | | 图片标题 |
|
||||
| options.titleClassName | `string` | | 图片标题类名 |
|
||||
|
||||
@ -273,3 +273,27 @@ order: 52
|
||||
```
|
||||
|
||||
其他配置项参考 [快速编辑](../crud#快速编辑)
|
||||
|
||||
## 弹出框（popOver）
|
||||
|
||||
可以通过 `popOver` 属性配置弹出框
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"body": [
|
||||
{
|
||||
"name": "static",
|
||||
"type": "static",
|
||||
"label": "静态展示",
|
||||
"value": "aaa",
|
||||
"popOver": {
|
||||
"body": {
|
||||
"type": "tpl",
|
||||
"tpl": "弹出内容"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -189,7 +189,7 @@ order: 52
|
||||
|
||||
## 原图模式
|
||||
|
||||
> since 1.2.3
|
||||
> 1.2.3 及以上版本
|
||||
|
||||
默认图片为缩略图模式，可以通过配置 imageMode: "original" 修改为原图模式，原图模式为块状展示，宽度尽可能占满。
|
||||
|
||||
@ -209,6 +209,37 @@ order: 52
|
||||
}
|
||||
```
|
||||
|
||||
## 打开外部链接
|
||||
|
||||
> 1.3.3 及以上版本
|
||||
|
||||
可以设置 href 属性来支持图片点击打开链接，需要注意这和放大功能是冲突的，只能二选一。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "image",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"href": "https://github.com/baidu/amis"
|
||||
}
|
||||
```
|
||||
|
||||
href 也可以是模板
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"imageUrl": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"imageHref": "https://github.com/baidu/amis"
|
||||
},
|
||||
"body": {
|
||||
"type": "image",
|
||||
"name": "imageUrl",
|
||||
"href": "${imageHref}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 用作 Field 时
|
||||
|
||||
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量
|
||||
@ -271,23 +302,24 @@ List 的内容、Card 卡片的内容配置同上
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | --------- | --------- | -------------------------------------------------------------------------------------- |
|
||||
| type | `string` | | 如果在 Table、Card 和 List 中，为`"color"`；在 Form 中用作静态展示，为`"static-color"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| imageClassName | `string` | | 图片 CSS 类名 |
|
||||
| thumbClassName | `string` | | 图片缩率图 CSS 类名 |
|
||||
| height | `string` | | 图片缩率高度 |
|
||||
| width | `string` | | 图片缩率宽度 |
|
||||
| title | `string` | | 标题 |
|
||||
| imageCaption | `string` | | 描述 |
|
||||
| placeholder | `string` | | 占位文本 |
|
||||
| defaultImage | `string` | | 默认显示的图片地址 |
|
||||
| src | `string` | | 缩略图地址 |
|
||||
| originalSrc | `string` | | 原图地址 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| enlargeTitle | `string` | | 放大预览的标题 |
|
||||
| enlargeCaption | `string` | | 放大预览的描述 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | ------------------------------------ | --------- | -------------------------------------------------------------------------------------- |
|
||||
| type | `string` | | 如果在 Table、Card 和 List 中，为`"color"`；在 Form 中用作静态展示，为`"static-color"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| imageClassName | `string` | | 图片 CSS 类名 |
|
||||
| thumbClassName | `string` | | 图片缩率图 CSS 类名 |
|
||||
| height | `string` | | 图片缩率高度 |
|
||||
| width | `string` | | 图片缩率宽度 |
|
||||
| title | `string` | | 标题 |
|
||||
| imageCaption | `string` | | 描述 |
|
||||
| placeholder | `string` | | 占位文本 |
|
||||
| defaultImage | `string` | | 默认显示的图片地址 |
|
||||
| src | `string` | | 缩略图地址 |
|
||||
| href | [模板](../../docs/concepts/template) | | 外部链接地址 |
|
||||
| originalSrc | `string` | | 原图地址 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| enlargeTitle | `string` | | 放大预览的标题 |
|
||||
| enlargeCaption | `string` | | 放大预览的描述 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 |
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
min-width: var(--Carousel-arrowControl-width);
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
transition-duration: var(--Carousel-transitionDuration);
|
||||
svg {
|
||||
@ -161,6 +163,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Carousel-leftArrow {
|
||||
@include arrow-control;
|
||||
display: none;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.#{$ns}Carousel-rightArrow {
|
||||
@include arrow-control;
|
||||
display: none;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.#{$ns}Carousel-leftArrow {
|
||||
display: block;
|
||||
}
|
||||
.#{$ns}Carousel-rightArrow {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-arrowsControl {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -169,26 +192,5 @@
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
|
||||
.#{$ns}Carousel-leftArrow {
|
||||
@include arrow-control;
|
||||
display: none;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.#{$ns}Carousel-rightArrow {
|
||||
@include arrow-control;
|
||||
display: none;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.#{$ns}Carousel-leftArrow {
|
||||
display: block;
|
||||
}
|
||||
.#{$ns}Carousel-rightArrow {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,6 @@
|
||||
&-thumb {
|
||||
width: px2rem(110px);
|
||||
height: px2rem(110px);
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=');
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@ -531,7 +531,11 @@ addSchemaFilter(function (schema: Schema, renderer: any, props: any) {
|
||||
};
|
||||
}
|
||||
|
||||
if (schema?.controls && schema.type !== 'audio') {
|
||||
if (
|
||||
schema?.controls &&
|
||||
schema.type !== 'audio' &&
|
||||
schema.type !== 'carousel'
|
||||
) {
|
||||
schema = {
|
||||
...schema,
|
||||
[schema.type === 'combo' ? `items` : 'body']: (Array.isArray(
|
||||
|
||||
@ -290,12 +290,15 @@ export default class Overlay extends React.Component<
|
||||
|
||||
// This goes after everything else because it adds a wrapping div.
|
||||
if (rootClose) {
|
||||
child = (
|
||||
<RootClose onRootClose={props.onHide}>
|
||||
{(ref: any) => {
|
||||
return <div ref={ref}>{child}</div>;
|
||||
}}
|
||||
</RootClose>
|
||||
return (
|
||||
// @ts-ignore
|
||||
<Portal container={container}>
|
||||
<RootClose onRootClose={props.onHide}>
|
||||
{(ref: any) => {
|
||||
return <div ref={ref}>{child}</div>;
|
||||
}}
|
||||
</RootClose>
|
||||
</Portal>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -276,6 +276,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
|
||||
selectMode,
|
||||
noResultsText,
|
||||
searchResultColumns,
|
||||
columns,
|
||||
classnames: cx,
|
||||
value,
|
||||
disabled,
|
||||
@ -286,12 +287,13 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
|
||||
} = this.props;
|
||||
const options = this.state.searchResult || [];
|
||||
const mode = searchResultMode || selectMode;
|
||||
const resultColumns = searchResultColumns || columns;
|
||||
|
||||
return mode === 'table' ? (
|
||||
<TableCheckboxes
|
||||
placeholder={noResultsText}
|
||||
className={cx('Transfer-checkboxes')}
|
||||
columns={searchResultColumns!}
|
||||
columns={resultColumns!}
|
||||
options={options}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
|
||||
@ -120,6 +120,9 @@ const defaultSchema = {
|
||||
<Image
|
||||
src={data.image}
|
||||
title={data.title}
|
||||
href={data.href}
|
||||
blank={data.blank}
|
||||
htmlTarget={data.htmlTarget}
|
||||
imageCaption={data.description}
|
||||
thumbMode={data.thumbMode ?? thumbMode ?? 'contain'}
|
||||
imageMode="original"
|
||||
@ -413,7 +416,16 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
|
||||
{body ? body : placeholder}
|
||||
|
||||
{dots ? this.renderDots() : null}
|
||||
{arrows ? this.renderArrows() : null}
|
||||
{arrows ? (
|
||||
<div className={cx('Carousel-leftArrow')} onClick={this.prev}>
|
||||
<Icon icon="left-arrow" className="icon" />
|
||||
</div>
|
||||
) : null}
|
||||
{arrows ? (
|
||||
<div className={cx('Carousel-rightArrow')} onClick={this.next}>
|
||||
<Icon icon="right-arrow" className="icon" />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -67,6 +67,11 @@ export interface TransferControlSchema extends FormOptionsControl {
|
||||
*/
|
||||
columns?: Array<any>;
|
||||
|
||||
/**
|
||||
* 当 searchResultMode 为 table 时定义表格列信息。
|
||||
*/
|
||||
searchResultColumns?: Array<any>;
|
||||
|
||||
/**
|
||||
* 可搜索？
|
||||
*/
|
||||
@ -252,6 +257,7 @@ export class BaseTransferRenderer<
|
||||
loading,
|
||||
searchable,
|
||||
searchResultMode,
|
||||
searchResultColumns,
|
||||
deferLoad,
|
||||
leftOptions,
|
||||
leftMode,
|
||||
@ -275,6 +281,7 @@ export class BaseTransferRenderer<
|
||||
showArrow={showArrow}
|
||||
selectMode={selectMode}
|
||||
searchResultMode={searchResultMode}
|
||||
searchResultColumns={searchResultColumns}
|
||||
columns={columns}
|
||||
onSearch={searchable ? this.handleSearch : undefined}
|
||||
onDeferLoad={deferLoad}
|
||||
|
||||
@ -104,6 +104,21 @@ export interface ImageSchema extends BaseSchema {
|
||||
* 预览图比率
|
||||
*/
|
||||
thumbRatio?: '1:1' | '4:3' | '16:9';
|
||||
|
||||
/**
|
||||
* 链接地址
|
||||
*/
|
||||
href?: SchemaTpl;
|
||||
|
||||
/**
|
||||
* 是否新窗口打开
|
||||
*/
|
||||
blank?: boolean;
|
||||
|
||||
/**
|
||||
* 链接的 target
|
||||
*/
|
||||
htmlTarget?: string;
|
||||
}
|
||||
|
||||
export interface ImageThumbProps
|
||||
@ -137,6 +152,9 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
|
||||
alt,
|
||||
title,
|
||||
caption,
|
||||
href,
|
||||
blank = true,
|
||||
htmlTarget,
|
||||
onLoad,
|
||||
enlargeAble,
|
||||
translate: __,
|
||||
@ -144,7 +162,7 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
|
||||
imageMode
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
let image = (
|
||||
<div
|
||||
className={cx(
|
||||
'Image',
|
||||
@ -221,6 +239,21 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (href) {
|
||||
image = (
|
||||
<a
|
||||
href={href}
|
||||
target={htmlTarget || (blank ? '_blank' : '_self')}
|
||||
className={cx('Link', className)}
|
||||
title={title}
|
||||
>
|
||||
{image}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return image;
|
||||
}
|
||||
}
|
||||
const ThemedImageThumb = themeable(localeable(ImageThumb));
|
||||
@ -302,6 +335,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
|
||||
width,
|
||||
classnames: cx,
|
||||
src,
|
||||
href,
|
||||
thumbMode,
|
||||
thumbRatio,
|
||||
placeholder,
|
||||
@ -314,6 +348,8 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
|
||||
let value =
|
||||
finnalSrc || getPropValue(this.props) || defaultImage || imagePlaceholder;
|
||||
|
||||
const finnalHref = href ? filter(href, data, '| raw') : '';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
@ -331,6 +367,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
|
||||
height={height}
|
||||
width={width}
|
||||
src={value}
|
||||
href={finnalHref}
|
||||
title={filter(title, data)}
|
||||
caption={filter(imageCaption, data)}
|
||||
thumbMode={thumbMode}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user