p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Image caption 配置

This commit is contained in:
2betop 2020-01-06 19:32:12 +08:00
parent e139320489
commit af70dd7247
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
scss/components/_images.scss
View File

@ -11,13 +11,14 @@
.#{$ns}Image {
display: inline-block;
width: px2rem(120px);
border: $borderWidth solid $borderColor;
padding: $gap-xs;
&-thumb {
width: px2rem(108px);
width: 100%;
height: px2rem(108px);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=");
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=');
overflow: hidden;
position: relative;
@ -67,6 +68,10 @@
object-fit: cover;
}
}
&-caption {
font-size: $fontSizeSm;
}
}
.#{$ns}ImageField {

24
src/renderers/Image.tsx
View File

@ -9,9 +9,9 @@ export interface ImageProps {
alt?: string;
className?: string;
imageClassName?: string;
description?: string;
caption?: string;
thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover';
thumbRatio?: '1-1' | '4-3' | '16-9';
thumbRatio?: '1:1' | '4:3' | '16:9';
classnames: ClassNamesFn;
classPrefix: string;
onLoad?: React.EventHandler<any>;
@ -28,7 +28,7 @@ export class Image extends React.Component<ImageProps> {
src,
alt,
title,
description,
caption,
onLoad
} = this.props;
@ -38,7 +38,7 @@ export class Image extends React.Component<ImageProps> {
className={cx(
'Image-thumb',
thumbMode ? `Image-thumb--${thumbMode}` : '',
thumbRatio ? `Image-thumb--${thumbRatio}` : ''
thumbRatio ? `Image-thumb--${thumbRatio.replace(/:/g, '-')}` : ''
)}
>
<img
@ -48,11 +48,11 @@ export class Image extends React.Component<ImageProps> {
alt={alt}
/>
</div>
{title || description ? (
<div key="caption" className={cx('Image-caption')}>
{title || caption ? (
<div key="caption" className={cx('Image-info')}>
{title ? <div className={cx('Image-title')}>{title}</div> : null}
{description ? (
<div className={cx('Image-description')}>{description}</div>
{caption ? (
<div className={cx('Image-caption')}>{caption}</div>
) : null}
</div>
) : null}
@ -69,7 +69,7 @@ export interface ImageFieldProps extends RendererProps {
placeholder: string;
description?: string;
thumbMode: 'w-full' | 'h-full' | 'contain' | 'cover';
thumbRatio: '1-1' | '4-3' | '16-9';
thumbRatio: '1:1' | '4:3' | '16:9';
}
export class ImageField extends React.Component<ImageFieldProps, object> {
@ -80,7 +80,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
defaultImage:
'https://fex.bdstatic.com/n/static/amis/renderers/crud/field/placeholder_cfad9b1.png',
thumbMode: 'contain',
thumbRatio: '1-1',
thumbRatio: '1:1',
placeholder: '-'
};
@ -88,7 +88,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
const {
className,
defaultImage,
description,
imageCaption,
title,
data,
imageClassName,
@ -109,7 +109,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
imageClassName={imageClassName}
src={value}
title={filter(title, data)}
description={filter(description, data)}
caption={filter(imageCaption, data)}
thumbMode={thumbMode}
thumbRatio={thumbRatio}
/>